PCサイトとスマホ(スマートフォン)サイトの画像を切り替える方法(4)

4)画像切り替え追加

( 2)でできたブロックのview.php(カスタムテンプレートでもどうぞ)に 3)のメソッド(関数)を使って作成 )

ダウンロードした、フォルダ(select_image_by_agent)内は以下のファイルがあります。

add.php
auto.js
controller.php
db.xml
edit.php
icon.png
view.php

※ファイル個々の内容は、本家サイト、
ホーム → concrete5の使い方・ヘルプv5.6 → 開発者向け → ブロックの作り方
concrete5 ブロックの基本」 → 「ブロックのファイル構成」参照
http://concrete5-japan.org/help/5-6/developer/making_blocks/

ここでは、controller.phpview.phpを修正します。
※view.php はカスタムテンプレート(本家サイト参照)を使って作成・変更しても結構です。 http://concrete5-japan.org/help/5-6/design/block_custom_template/

●画像を切替える修正(view.php)
http://concrete5-japan.org/community/forums/beginner/post-10347/post-10351/
より、デバイスを切り替えるクラスがconcrete5に標準であるので、この「Mobile_Detect」を使って、 画像を切り替えることが出来るようにコードを追加します。

[修正前] (view.php)
<?php defined('C5_EXECUTE') or die("Access Denied.");
$nh = Loader::helper('navigation');
?>

<class = "slide">

<?php if (!empty($field_2_image)): ?>
<!-- 画像1(PC) -->
<?php if (!empty($field_2_image_internalLinkCID)) { ?><a href="<?php echo $nh->getLinkToCollection(Page::getByID($field_2_image_internalLinkCID), true); ?>"><?php } ?><img src="<?php echo $field_2_image->src; ?>" width="<?php echo $field_2_image->width; ?>" height="<?php echo $field_2_image->height; ?>" alt="" /><?php if (!empty($field_2_image_internalLinkCID)) { ?></a><?php } ?> <?php endif; ?>

<?php if (!empty($field_3_image)): ?>
<!-- 画像2(SP) -->
<?php if (!empty($field_3_image_internalLinkCID)) { ?><a href="<?php echo $nh->getLinkToCollection(Page::getByID($field_3_image_internalLinkCID), true); ?>"><?php } ?><img src="<?php echo $field_3_image->src; ?>" width="<?php echo $field_3_image->width; ?>" height="<?php echo $field_3_image->height; ?>" alt="" /><?php if (!empty($field_3_image_internalLinkCID)) { ?></a><?php } ?> <?php endif; ?>

</div>


[修正後] (view.php)
<?php
defined('C5_EXECUTE') or die("Access Denied.");
$nh = Loader::helper('navigation');
$md = new Mobile_Detect();
?>

<div class="slide">

<?php
if(!$md->isMobile()) {
?>
<?php if (!empty($field_2_image)): ?>
<!--画像1(PC) -->
<?php if (!empty($field_2_image_internalLinkCID)) { ?><a href="<?php echo $nh->getLinkToCollection(Page::getByID($field_2_image_internalLinkCID), true); ?>"><?php } ?><img src="<?php echo $field_2_image->src; ?>" width="<?php echo $field_2_image->width; ?>" height="<?php echo $field_2_image->height; ?>" alt="" /><?php if (!empty($field_2_image_internalLinkCID)) { ?></a><?php } ?> <?php endif; ?>
<?php
} else {
<?php if (!empty($field_3_image)): ?>
<!--画像2(SP) -->
<?php if (!empty($field_3_image_internalLinkCID)) { ?><a href="<?php echo $nh->getLinkToCollection(Page::getByID($field_3_image_internalLinkCID), true); ?>"><?php } ?><img src="<?php echo $field_3_image->src; ?>" width="<?php echo $field_3_image->width; ?>" height="<?php echo $field_3_image->height; ?>" alt="" /><?php if (!empty($field_3_image_internalLinkCID)) { ?></a><?php } ?> <?php endif; ?>
?>

<?php
}
?>

</div>

「PCサイトとスマホ(スマートフォン)サイトの画像を切り替える方法(4)」への0件のフィードバック

コメントを残す



(このメールアドレスは表示されません。)


Captcha認証コード

Captchaをクリックすると違う文字候補が出てきます。