いつもお世話になっております。

現在、eccubeのデフォルトのスマホテンプレートでカスタマイズを行っております。そこで商品詳細画像をデフォルトの200pxから300pxに変更しようと思ったのですが、上手くいかず四苦八苦しております。

管理画面より、該当の商品詳細のテンプレートの画像箇所を

width="300px"　height="300px"

に指定しcssも調整したのですが、実際のソースの中に

<li class="slideUnit resizable" style="padding-top: 0px; width: 200px;">

の記載があり300pxにならないようです。

どなたか解決方法をご教授頂けませんでしょうか？

よろしくお願いいたします。

EC-CUBEバージョン 2.12.2
PHPバージョン PHP 5.3.3
DBバージョン MySQL 5.0.95

metan 様

スマホの商品詳細画面で画像が300px×300pxで表示されないとのことですが、修正したテンプレートファイルとcssファイルの変更箇所をご提示頂けますでしょうか。

またスマホのdetail.tplで商品タイトルの下部に

と書き、widthとheightにはどのような数字が入っているか確認できますでしょうか？

----------------
アイピーロジック株式会社
EC-CUBE専用メール配信サービス「PostCarrier for EC-CUBE」
[url=http://www.rakusite.net/]EC-CUBE専用サイト保守監視サービス「らくらくサイト保守

IPLOGIC様

ご返信頂きまして誠にありがとうございます。

修正を加えた箇所は下記になります。

<!--{* 画像の縦横倍率を算出 *}-->
<!--{assign var=detail_image_size value=200}-->
<!--{assign var=main_image_factor value=`$arrFile[$key].width/$detail_image_size`}-->
<!--{if $arrProduct.main_large_image|strlen >= 1}-->
<a rel="external" class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" target="_blank">
<img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_image|h}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile.main_image.width/$main_image_factor}-->" height="<!--{$arrFile.main_image.height/$main_image_factor}-->" /></a>
<!--{else}-->
<img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_image|h}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile.main_image.width/$main_image_factor}-->" height="<!--{$arrFile.main_image.height/$main_image_factor}-->" />
<!--{/if}-->
</li>

▼修正後▼


<!--{* 画像の縦横倍率を算出 *}-->
<!--{assign var=detail_image_size value=300}-->
<!--{assign var=main_image_factor value=`$arrFile[$key].width/$detail_image_size`}-->
<!--{if $arrProduct.main_large_image|strlen >= 1}-->
<a rel="external" class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" target="_blank">
<img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_image|h}-->" alt="<!--{$arrProduct.name|h}-->" width="300" height="300" /></a>
<!--{else}-->
<img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_image|h}-->" alt="<!--{$arrProduct.name|h}-->" width="300" height="300" />
<!--{/if}-->
</li>

また、<!--{$arrFile|@var_dump}-->で取得したデータは下記になります。

array(5) {
["main_image"]=>
array(5) {
["filepath"]=>
string(32) "/upload/save_image/●-1.jpg"
["real_filepath"]=>
string(66) "/●/●/●.jp/public_html/upload/save_image/●-1.jpg"
["width"]=>
int(500)
["height"]=>
int(500)
["disp_name"]=>
string(22) "詳細-メイン画像"
}
["sub_image1"]=>
array(5) {
["filepath"]=>
string(32) "/upload/save_image/●-1.jpg"
["real_filepath"]=>
string(66) "/●/●/●.jp/public_html/upload/save_image/●-1.jpg"
["width"]=>
int(500)
["height"]=>
int(500)
["disp_name"]=>
string(20) "詳細-サブ画像1"
}
["sub_image2"]=>
array(5) {
["filepath"]=>
string(32) "/upload/save_image/●-2.jpg"
["real_filepath"]=>
string(66) "/●/●/●.jp/public_html/upload/save_image/●-2.jpg"
["width"]=>
int(500)
["height"]=>
int(500)
["disp_name"]=>
string(20) "詳細-サブ画像2"
}
["sub_image3"]=>
array(5) {
["filepath"]=>
string(32) "/upload/save_image/●-3.jpg"
["real_filepath"]=>
string(66) "/●/●/●.jp/public_html/upload/save_image/●-3.jpg"
["width"]=>
int(500)
["height"]=>
int(500)
["disp_name"]=>
string(20) "詳細-サブ画像3"
}
["sub_image4"]=>
array(5) {
["filepath"]=>
string(45) "/upload/save_image/wrapping-present-watch.jpg"
["real_filepath"]=>
string(79) "/●/●/●.jp/public_html/upload/save_image/wrapping-present-watch.jpg"
["width"]=>
int(500)
["height"]=>
int(500)
["disp_name"]=>
string(20) "詳細-サブ画像4"
}
}

御手数お掛けし大変恐縮です。よろしくお願いいたします。

metan 様

テンプレートにスタイルシートを書かれたのですね。

detail.tplの



はこのままで、

html/user_data/packages/sphone/css/product.css

の316行目にある#detailphotoblock div.moveWrapのwidthとheightを300pxに書き換えてみて下さい。

私はこれで300px×300pxにすることが出来ました。

また、商品詳細の画像のcssは
html/user_data/packages/sphone/js/jquery.flickslide.js
のjqueryで制御しています。

今回の.resizableにwidth:200pxが入る原因は、jquery.flickslide.jsの295行目付近の#detailphotoblock div.moveWrapのwidth（200px)を取得して、動的にcssを書き足していることによるものです。

----------------
アイピーロジック株式会社
EC-CUBE専用メール配信サービス「PostCarrier for EC-CUBE」
[url=http://www.rakusite.net/]EC-CUBE専用サイト保守監視サービス「らくらくサイト保守

IPLOGIC様

ご返信頂きまして誠にありがとうござます。

IPLOGIC様の通りに行ったら無事に画像を大きくすることが出来ました！

本当にありがとうございます。助かりました。