天天看點

如何修改Magento前台顯示的産品圖檔的尺寸大小

第一個:修改産品清單頁的産品圖檔大小

檔案位置:app\design\frontend\default\Your_Template\template\catalog\product\list.phtml

在此檔案中搜 “resize”,發現有兩處,因為清單頁有 List 和 Grid 兩種顯示方式,第一個resize一般是List清單顯示中的産品圖檔,第二個resize一般是 Grid 清單顯示中的産品圖檔。

截取代碼片段:

$this->helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(135, 135); ?>” width=”135″ height=”135″

代碼分析:

resize(135, 135),就是設定産品圖檔 尺寸的函數,以像素為機關的。width=”135″ height=”135″就是css的設定。例如,想改成 180像素寬,180像素高。那麼代碼就改成

$this->helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(180, 180); ?>” width="180" height="180″

第二個:修改産品詳細頁面的産品圖檔大小

檔案位置:app\design\frontend\default\Your_Template\template\catalog\product\view\media.phtml

在此檔案中搜“resize”。我們會找到兩處,第一處是産品大圖的,第二個是大圖下面小圖的。

代碼片段截取:

resize(265)

$_image->getFile())->resize(56); ?>" width="56" height="56"

代碼分析:

當resize裡面隻有一個參數的時候就是設定寬和高是一樣的。resize(265) 等于resize(265,256)。

這頁有大量css的修飾代碼,請務必用firebug等工具檢查下,以協調網頁布局。

第三個:修改相關産品圖檔大小,upsell産品圖檔大小,crosssell産品圖檔大小

相關産品圖檔修改檔案位置:app\design\frontend\default\Your_Template\template\catalog\product\list\related.phtml

upsell産品圖檔修改檔案位置:

app\design\frontend\default\Your_Template\template\catalog \product\list\upsell.phtml

crosssell産品圖檔修改檔案位置:

app\design\frontend\default\Your_Template\template\checkout\cart\upsell.phtml

設定圖檔尺寸的函數還是resize()函數,修改方法也基本和前面說的是一樣的。