Magento图片大小调整的相关代码
来源:互联网 发布:手机上怎么在淘宝贷款 编辑:程序博客网 时间:2024/05/14 18:53
今天在研究公司Magento新模板的时候,发现列表页的图片大小全部修改为了160*160像素。而Magento默认模板的列表页图片是135*135。这也没什么问题,在模板文件中硬编码为160px的话也就无话可说了,然而找了很长时间,完全没有发现160这个数字。只是在列表页模板文件中发现了一段与获取当前图片大小的代码。这个问题目前还没有解决,另外家里没有这个模板,先不说这个,明天上午继续研究这个问题。
在解决这个问题的过程中,粗略了解到了Magento图片的缓存机制以及产品图片大小的调整规则。首先看下在Magento默认模板的产品列表页中,下列路径中有如下代码,
/magento_1_5_1/app/design/frontend/base/default/template/catalog/product/list.phtml
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>
很明显这个是在产品列表页的Grid显示模式中显示产品图片的一段代码。我们忽略除了src属性以外的其他属性。首先,调用Mage_Catelog_Helper_Image助手,该类用于生成各种形式的产品图片,例如在列表页,产品单页及缩略图等。我们注意到在上述代码中,resize()的参数为135,即设置当前图片的宽度为135px。该方法实际上有两个参数,第二个为图片宽度。可以在Mage_Catelog_Helper_Image中找到如下代码,
public function resize($width, $height = null){$this->_getModel()->setWidth($width)->setHeight($height);$this->_scheduleResize = true;return $this;}
下图为默认模板下,不改动代码,系统自动生成的135*135的图片。你可能会感到奇怪,图片很明显是一张矩形而非正方形,怎么可能是135*135的图片呢?如果仔细看的话,会注意到图片的上方有白色的背景,实际上,上下的白色背景,也是这张135*135图片的组成部分。用Firebug查看下该图片的URL地址,就能发现该图片实际上并非你上传到产品中的那张图片,而是Magento系统根据代码中的设置,自动生成的一张新尺寸的图片。不出意外的话,应该可以在media/catelog/product/cache/[xx]/small_image文件夹中看到135x的文件夹,这里即保存为该图片生成的135*135的新尺寸图片。我们可以理解为,在模板中,同一张图片被生成了各种可能需要的尺寸。
了解到该函数的意思之后,我们一起来试着修改下模板文件中的值,首先,我们将resize()参数,width及height设置为100。看看上述图片会发生什么。会发生什么呢?自己去试试吧。记录一下该助手中比较重要的方法,
Mage_Catelog_Helper_Image::constrainOnly(true)
该方法不会将小于模板中图片属性宽高(width=”135″ height=”135″)的图片放大,从而导致图片放大失真。
Mage_Catelog_Helper_Image::keepAspectRatio(true)
该方法会让图片保持宽高的原始缩放比例,保证图片不会失真。
Mage_Catelog_Helper_Image::keepFrame(false) This will not put a white frame around your image.
该方法保证图片不会生成多于的白色边框,向上图中上下白色边框不会出现。
先写到这里吧,这片文章会在解决160*160问题之后继续,主要看下如何使用模板中自动获取图片的大小,从而决定图片应该生成何种尺寸。
转载请注明:锐想Magento » Magento图片大小调整的相关代码
- Magento图片大小调整的相关代码
- 31. Magento图片大小调整的相关代码
- 调整图片大小JS代码
- 网页里控制图片大小的相关代码
- 图片大小调整
- 剪裁图片大小的代码
- CSDN的MarkDown图片大小的调整
- 调整图片大小适应屏幕的imagview类
- 调整图片大小的功能php-img
- Magento跟获取分类遍历分类相关的代码段
- 【JavaScript】控制图片大小的代码
- javascript 调整图片大小
- js 调整图片大小
- 自适应图片大小调整
- android动态调整图片大小
- 利用CSS调整图片大小
- word2007 统一调整图片大小
- iOS UIWebView 图片大小调整
- [GIT] git config
- Android HAL hardware module分析 以GPS module为例
- oracle 中 the account is locked 解决办法
- sharepoint 2007 WPManager(Web部件管理器)
- ubuntu的超级终端
- Magento图片大小调整的相关代码
- sysconf 获取计算机参数
- ASP中的IsPostBack回复机制
- MapReduce理解
- 存钱方法不同利息可能差6倍
- 获取Magento域名及图片,JS路径方法
- 微顯示技術爭奇鬥豔
- java socket 长连接
- Magento路由分发过程解析(一):在前端控制器中获取路由对象