2024年4月20日

HYEOS

随事而为

如何修改magento前台显示的产品图片的尺寸

1 min read

原文地址

如何修改magento前台显示的产品图片的尺寸,magento产品图片的尺寸是和页面的css修饰代码相关的,所以你最好了解些css。有的时候在css中已经指定了图片的尺寸,你在代码中修改也不一定会出现你想要的效果的,检查css。还有,别忘了刷新magento缓存。

最模板的helloblank模板为例,注意你所使用的模板文件路径。
第一个地方,产品列表页的产品图片
文件位置:appdesignfrontenddefaulthelloblanktemplatecatalogproductlist.phtml
在此文件中搜 “resize”,发现有两处,因为列表页有 List 和 Grid 两种显示方式,第一个resize一般是List列表显示中的产品图片,第二个resize一般是 Grid 列表显示中的产品图片。
截取代码片段:
1
$this->helper('catalog/image')->init($_product, 'small_image')->resize(135, 135); ?>" width="135" height="135"
代码分析:
resize(135, 135),就是设置产品图片尺寸的函数,以像素为单位的。width=”135” height=”135“就是css的设置。例如,想改成150像素宽,200像素高。那么代码就改成
$this->helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(150, 200); ?>” width=”150” height=”200”
第二个地方,产品详细页产品图片
文件位置:appdesignfrontenddefaulthelloblanktemplatecatalogproductviewmedia.phtml
在此文件中搜“resize”。我们会找到两处,第一处是产品大图的,第二个是大图下面小图的。
代码片段截取:
1
2
3
4
5
….
resize(265)
….
resize(48, 48); ?>" width="48" height="48"
….
代码分析:
当resize里面只有一个参数的时候就是设置宽和高是一样的。resize(265) 等于resize(265,256)。
这页有大量css的修饰代码,请务必用firebug等工具检查下,最大可以修改到多大
第三个地方,相关产品图片,upsell产品图片,crosssell产品图片
相关产品图片修改文件位置:appdesignfrontenddefaulthelloblanktemplatecatalogproductlistrelated.phtml
upsell产品图片修改文件位置:appdesignfrontenddefaulthelloblanktemplatecatalog productlistupsell.phtml
crosssell产品图片修改文件位置:appdesignfrontenddefaulthelloblanktemplatecheckoutcartupsell.phtml
设置图尺寸的函数还是resize()函数,也基本和前面说的是一样的。
第四个地方,页面边栏购物车里产品图片
文件位置:appdesignfrontenddefaulthelloblanktemplatecheckoutcartitemdefault.phtml
基本就这些了,还有别的地方要改的,开启下magento模板路径看下,在哪里,改的方法也一样。最重要的是,要和你的css修饰代码配合好。

(责任编辑:最模板)

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注