EC-CUBEの決済サービスはペイジェント

ロッカールーム

科目一覧

EC-CUBEのためのレンタルサーバー「EC-CUBEのサーバー」 会員登録（無料）はこちら
サイトマップ ご意見箱

EC-CUBE2系のモバイルサイトでサムネイル表示をする。

カスタマイズ講座

ホーム > カスタマイズ講座 > 【中級】カスタマイズ > EC-CUBE2系のモバイルサイトでサムネイル表示をする。
【中級】カスタマイズ9
2009.03.08　（更新日: 2009.06.05）

EC-CUBE2系のモバイルサイトでサムネイル表示をする。

EC-CUBEにはresize_image.phpという、画像を動的に縮小して表示できる便利なPHPがあります。これを利用すると、横縦比を維持したまま画像を縮小できるのですが、EC-CUBE2系では、なぜかモバイル側で利用しようとすると表示できません。(1系は普通に利用できるようです。)

コレ、ちょっとした工夫で利用できるので、今回はその方法をお教えします!



原因は?

この原因はまだ明らかではないのですが、リダイレクトが関係しているのでは?と思われています。PCサイトと同じURLにアクセスしても、モバイルからのアクセスと判断されれば「/mobile」がURLにくっついたページに飛ばされます。その辺の設定の絡みかもしれません(詳細は未確認です)。


どうするの?

結論から言うと、resize_image.phpのときだけリダイレクトしないように設定します。リダイレクトを実行しているファイルは「/html/require.php」。


このファイルの最後の方に以下のような記述があります。
header("Location: ". SC_Utils_Ex::sfRmDupSlash($url . $path));
exit;


これを以下のように、if文を付け足して書き換えます。

/* resize_image.phpのときだけ、リダイレクト解除 */
if(!preg_match("/resize_image.php/i", $path)) {
header("Location: ". SC_Utils_Ex::sfRmDupSlash($url . $path));
exit;
}



そして、携帯側でサムネイル表示したい個所に、以下のようなタグを挿入します。

<img src="<!--{$smarty.const.SITE_URL}-->resize_image.php?image=<!--{$image_path|sfRmDupSlash}-->&width=50&height=50" alt="<!--{$arrProducts[cnt].name|escape}-->" />


ちなみに、上記で注意が必要なのは、$image_pathと$arrProducts[cnt].nameです。
上記はあくまで例(商品一覧ページ用)なので、知識がない方がそのまんま貼り付けしても表示できないかと思います。一覧ページの場合は、foreach文で商品が繰り返し表示されていますので、

<!--{foreach from=$arrProducts key=i item=arrProduct name=list}-->



～省略～



<!--{if $arrProduct.main_list_image != ""}-->

  <!--{assign var=image_path value="`$arrProduct.main_list_image`"}-->

<!--{else}-->

  <!--{assign var=image_path value="`$smarty.const.NO_IMAGE_DIR`"}-->

<!--{/if}-->



<img src="<!--{$smarty.const.SITE_URL}-->resize_image.php?image=<!--{$image_path|sfRmDupSlash}-->&width=50&height=50" alt="<!--{$arrProducts[cnt].name|escape}-->" />



～省略～



<!--{/foreach}-->


という感じにすると、$image_pathにリスト用画像のパスが挿入されます。

このページを見ている人は、以下のページも参照しているようです・・・！

レビュー

レビューによるご意見・ご質問は会員登録された方のみとなっております。

  • ★★★★★　待ってました!　2009/03/08
    レビュアー：ike

    先生!
    私はこの授業を待ってました!
    モバイルの画像表示についてはかなり苦労しました!
    とりあえず表示されてはいますけど、リサイズ表示はできませんでした。参考にさせて頂き、さっそく活用します!
    次の授業も期待していますので、よろしくお願いします!

  • リサイズされませんでしたか?　2009/03/09
    レビュアー：homan

    既にカスタマイズ済みのものから抜粋して掲載させて頂いている関係で、もしかすると抜けている部分があるかもしれません。(その時はごめんなさい)

    もし具体的にどううまくいかないかわかるようであれば、お知らせ下さい。

  • ★★★★★　ありがとうございます!　2009/04/12
    レビュアー：えびな

    2系でばっちりできました!
    本当に助かりました。
    足を向けて寝られません(笑)
    ありがとうございます。m(__)m

この記事に対するトラックバック

この記事のトラックバック先URL

EC-CUBE＋安心＝カゴラボ
アラタナ www.aratana.jp