标签归档:magento模板教程

Magento模板安装教程

此教程讲解如何安装magento模板,由于模板不尽一样,安装可能也不一样,所以如何安装,需要按照模板的说明来进行。此教程只是对其中一种模板安装进行讲解,方便大家参考学习。

视频地址:http://www.tudou.com/programs/view/HbLFdOzp-yw/


继续阅读

magento set image fit or fill the parent container

magento图片自适应容器大小

magento图片自适应容器大小

magento原始模板原先自带的图片处理会有白边,就是图片比例不符合代码中的尺寸时,magento会自动resize图片尺寸,并且自动加上白边。

其实去掉白边好搞,增加去白边的代码即可,如下

$this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(210);

keepFrame(FALSE)这个是控制白边的,参数false就是不带白边。resize控制图片的比例,单独一个数字,如上面 200,是将图片搞成200*200的尺寸,这个只有在有白边的时候才有效,没有白边了这个resize就不太管用了,会按照实际比例缩放图片,你可以试试。

对于很多人来说也许去掉白边就够用了,但是有的时候有变态的情况,比如图片比例是1:5甚至1:10,尼玛 – – ! 怎么会有这么变态的图片比例,这会将你的布局搞的乱七八糟。如果你有这个情况,又想控制图片的最大宽高的话,看这篇博文会有所帮助。

首先我们将magento的图片的白边去掉了,下一步就是使图片自适应到你设置的大小,即使比例差别很大,也自适应下,图片不超出你指定的长宽。相当于,你设置了图片的最大宽度,最大高度。这样对于你布局来说,会好狠多。

jquery有很多图片缩放,自适应的插件,我找到的这个是我自己认为比较合适的 http://imgscale.kjmeath.com/,当然大家也可以找自己喜欢的,或者更满足大家自己需求的js插件。

看插件的说明,他要求在图片的外层有个div或者什么的是block类型的html标签,并且css中写上宽高。

继续阅读

magento模板中XML与phtml关系(四)

magento模板中XML与phtml关系(四)

magento模板中XML与phtml关系(四)

我们来看看magento模板文件的XML与phtml文件以及文件结构。我突然觉得有必要说下,我将对大多数的xml文件以及phtml文件的作用做下讲解。

本次讲解使用magento1.4,模板使用base中default模板。

我们对应着XML文件和phtml文件来进行说明,按照字母顺序还是说,我不太清楚的就忽略掉,我都不知道的,基本大多数人都用不到。

继续阅读

magento模板中XML与phtml关系(三)

magento模板中XML与phtml关系(三)

magento模板中XML与phtml关系(三)

这次继续进行magento模板制作的探讨,上一次说了.xml可以做到.phtml做不到的事情。今天说说xml和phtml是怎么配合着来生成我们的magento模版的。

本次讲解,使用magento 1.4版本,使用base中的default模板。

例子是最快速了解magento的方式了,我们来看下magento头部的搜索框,是怎么显示出来的。

在:app\design\frontend\base\default\layout\catalogsearch.xml 中有声明定义

    <default>
        <reference name="header">
            <block type="core/template" name="top.search" as="topSearch" template="catalogsearch/form.mini.phtml"/>
        </reference>

然后在:app\design\frontend\base\default\template\page\html\header.phtml 中调用输出

 <div class="quick-access">
            <?php echo $this->getChildHtml('topSearch') ?>

继续阅读

magento模板中XML与phtml关系(二)

magento的xml片段

magento的xml片段

今天我来继续讲下magento中xml文件与phtml文件的关系,了解这两种magento结构文件的关系,是magento模板制作的最基础知识。

本例以magento 1.4 中的base下的default模板为例

进入正题,我来说说xml可以做到,但是phtml做不到的事情。

1.定义页面结构(1栏,2栏,3栏)

.xml中定义页面结构,.phtml默认没有此功能。在magento中默认的页面结构有1栏结构,2栏结构,3栏结构。这个页面结构就是在xml文件中定义的。

如在:app\design\frontend\base\default\layout\page.xml 中

<default translate="label" module="page">
        <label>All Pages</label>
        <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

这个template=”page/3columns.phtml”就是在定义所有的页面默认使用3栏结构。

继续阅读