zoukankan      html  css  js  c++  java
  • 如何修改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()函数,修改方法也基本和前面说的是一样的。

    第四个:修改页面边栏购物车里产品图片大小

    文件位置:app\design\frontend\default\Your_Template\template\checkout\cart\item\default.phtml

    基本就这些了,还有别的地方要改的,就开启下magento模板路径看下在哪里,修改的方法也一样。还有就是,要和你的css修饰代码配合好。

  • 相关阅读:
    Asp.net2.0 中自定义过滤器对Response内容进行处理 dodo
    自动化测试工具 dodo
    TestDriven.NET 2.0——单元测试的好助手(转) dodo
    JS弹出窗口的运用与技巧 dodo
    ElasticSearch 简介 规格严格
    修改PostgreSQL字段长度导致cached plan must not change result type错误 规格严格
    Linux系统更改时区(转) 规格严格
    mvn编译“Cannot find matching toolchain definitions for the following toolchain types“报错解决方法 规格严格
    ElasticSearch 集群 & 数据备份 & 优化 规格严格
    Elasticsearch黑鸟教程22:索引模板的详细介绍 规格严格
  • 原文地址:https://www.cnblogs.com/zhouwenwu/p/2469668.html
Copyright © 2011-2022 走看看