在Magento2 中view.xml
来配置前端产品图片的属性(高度宽度什么的)。本篇主要归纳总结view.xml
相关的内容。
文件位置<theme_dir>/etc/v
iew.xml
例如:/app/design/frontend/SunTheme/Yang/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。就是产品页大图片放大镜那里。