{ Hello Magento 2 }

解决 Magento 2 应用问题,更注重深度挖掘。(ง •̀_•́)ง

0%

关于 view.xml

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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

举个例子:

1
2
3
4
<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模板中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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获得图片的配置尺寸。图片的输出是这样的:

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

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

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

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

1
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