关于 view.xml

如何创建 Magneto 2 前端主题中提到用view.xml来配置前端产品图片的属性(高度宽度什么的)。本篇主要归纳总结view.xml相关的内容。

文件位置<theme_dir>/etc/view.xml
我们来看Blank主题的view.xml

<media>
    // Part-1
    <images module="Magento_Catalog">
        <image id="bundled_product_customization_page" type="thumbnail">
            <width>140</width>
            <height>140</height>
        </image>
        ......
    </images>
</media>
// Part-2
<vars module="Magento_Catalog">
    <!-- Gallery and magnifier theme settings. Start -->
    <var name="gallery">
        <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
        .....
    </var>
    <var name="magnifier">
        ......
    </var>
    <var name="breakpoints">
        ......
    </var>
    ......
</vars>
......
// Part-3
<exclude>
    <item type="file">Lib::jquery/jquery.min.js</item>
    <item type="file">Lib::jquery/jquery-ui-1.9.2.js</item>
    <item type="file">Lib::jquery/jquery.ba-hashchange.min.js</item>
    ......
</exclude>

Part-1

举个例子:

<image id="related_products_list" type="small_image">
    <width>152</width>
    <height>190</height>
</image>

这里的id用在了vendor/magento/module-catalog/view/frontend/templates/product/list/items.phtml模板中。

case 'related':
    /** @var \Magento\Catalog\Block\Product\ProductList\Related $block */
    if ($exist = $block->getItems()->getSize()) {
        $type = 'related';
        $class = $type;

        $image = 'related_products_list';
        $title = __('Related Products');
        $items = $block->getItems();
        $limit = 0;
        $shuffle = 0;
        $canItemsAddToCart = $block->canItemsAddToCart();

        $showWishlist = true;
        $showCompare = true;
        $showCart = false;
        $templateType = null;
        $description = false;
    }
break;

上面代码中的$image的值和上面的id是一致的,通过该id获得图片的配置尺寸。图片的输出是这样的:

<?php echo $block->getImage($_item, $image)->toHtml(); ?>

如果主题没有view.xml那么就会使用fallback theme(一直向上找他的父主题)。

当你要做一些修改的时候,一般会完整拷贝一个view.xml文件过去,然后在他的基础上进行修改,因为view.xml的节点并不会合并。就是说,如果你的主题中有view.xml,那么就会使用它,如果你里面缺少一些节点,是不会向上查找父主题,并进行合并节点的。

修改后需要运行如下命令:

php bin/magento catalog:images:resize

这个命令会重新生成新的尺寸的图片。

Part-2

这部分是负责配置 Gallery widget。就是产品页大图片放大镜那里。

这一部分可以参考Magento 2 Javascript Init Scripts

Part-3

直接看参考文档的最后一个。看起来exclude节点中的文件不会被合并,每次都会单独加载。

参考文档

Configure images properties for a theme
Magento 2 > Change default product images sizes
What does the “exclude” Tag in Magento 2’s view.xml file do

发表评论

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