[EC-CUBE覚書(ver2.11)]トップページのおすすめ商品ブロックを列を少なくしたり画像を大きくしたりする

2012年7月24日

今まで2.4では以下の様な感じで変更していたのですが、
[EC-CUBE覚書]商品一覧とトップのオススメ商品の画像の大きさを変更する方法(改・Ver2対応) – ponnao-clip

[EC-CUBE覚書]トップのオススメ商品の列数を変更する – ponnao-clip

今回2.11を初めて扱ったところ、2.4よりもだいぶ楽になってました。
パラメータ設定で、SMALL_IMAGE_WIDTH と SMALL_IMAGE_HEIGHT の数値を変更するところは同じです。
デザイン管理→ブロック編集→「おすすめ商品」のテンプレート変更をします。

※既に商品画像をアップロード済の場合は、数値を変更しても画像の大きさはそのままなので、再度画像のアップロードと商品登録更新が必要です。更新後に画像が大きくなります。

4列:画像幅180pxに変更

<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->&amp;width=80&amp;height=80" alt="<!--{$arrProduct.name|h}-->" />

↓ ↓ ↓

<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->&amp;width=180&amp;height=180" alt="<!--{$arrProduct.name|h}-->" />

今まで長ったらしくブロックに分けて書いてたとこは、以下のように数値を変更するだけです!
これはデフォルト2列から4列に変更しています。

<!--{if $smarty.foreach.recommend_products.iteration % 2 === 0}-->
↓ ↓ ↓
<!--{if $smarty.foreach.recommend_products.iteration % 4 === 0}-->

3列:画像幅246pxに変更

とりあえず案は上記の4列2段としたのですが、
おすすめ商品を6個にして、3列2段にしたいという要望がありました。うぉ!
CSSで先にいじくったところ、元の画像幅180→246に変更に。
今までは、おすすめ商品の読み込んでいる「一覧-メイン画像[180×180]」内の大きさにおさまっていたのですが、このままの設定だと画像が引き伸ばされて荒れてしまいます
そこで更なる修正が必要に。

といっても数値変更の他、このソースの中の「main_list_image」「main_image」を変更するだけですが。
この設定で、詳細-メイン画像[260×260]を読みこむことになります。

<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->">
                                <img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->&amp;width=180&amp;height=180" alt="<!--{$arrProduct.name|h}-->" />

↓ ↓ ↓

  <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->">
                                <img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.main_image|sfNoImageMainList|h}-->&amp;width=246&amp;height=246" alt="<!--{$arrProduct.name|h}-->" />

参考:おすすめ商品の画像サイズを変更したいのですが|EC-CUBE 開発コミュニティ – フォーラム

商品登録画面で、画像を大中小3種類登録出来るようになっていますが、
main_list_image はそのうちもっとも小さい「一覧-メイン画像」、
main_image は中サイズの「詳細-メイン画像」を表しています。

これで表示されるはずなのですが、何回かリロードして画像を落としたら180のままでした。今は246に変更されたのですが、なんか画像が荒れてる気がするなぁ。
もしかしたらもう一度おすすめ商品を登録する必要があるのかも。
それとも、260→246っつー微妙なリサイズだから荒れるのか!?
ちょっとまだ検証中です。

2.4からの変更点

もしかしてテンプレートの変更が必要?と思ったけど、2.4のときのLC_Page_FrontParts_Bloc_Best5.phpの修正すべき部分の記述はなくなってます。
テンプレートもLC_Page_FrontParts_Bloc_Reccomend.phpに名称も変わってるのでなんらかの仕様変更があったのかも。

WEBあくまこ » Blog Archive » EC-CUBEのおすすめ画像を大きくしたい。

オススメ商品の画像のサイズを変更したい|EC-CUBE 開発コミュニティ – フォーラム

EC-CUBEの商品サブ画像に登録した拡大画像を表示させたい時|Materializing [マテリアライジング]

EC-CUBE

Posted by ponnao