为Magento2主题配置图片性能

redmaomail 2024-07-24 18:13 阅读数 91 #Magento

为Magento2主题配置图片性能

Magento2中用于前台的产品图片性能都被存储在view.xml配置文件中。本文提供所有的可用性能细节及配置方法。

在view.xml中配置图片性能

view.xml通常位于主题的：

<theme_dir>/etc/view.xml

例如，view.xml在Magento Blank主题中的位置是：

app/design/frontend/Magento/blank/etc/view.xml

在view.xml中，图片性能被配置在<images module="Magento_Catalog">元素内：

<images module="Magento_Catalog">
...
<images/>

每种被图片性能配置的类型图片是通过<image>元素的id和type属性定义的：

<images module="Magento_Catalog">
	<image id="unique_image_id" type="image_type">
	...
	</image>
<images/>

下面的表格描述属性的详情：

属性类型描述

属性	类型	描述
`id（标识）`	string（字符串）	图片标识，主题中是唯一的可以是任何值，但在Magento主题中`ID`是有意义的并描述图像的位置。例如，购物车中的交叉销售产品图片<code>ID是`cart_cross_sell_products`. `ID`被用在`.phtml`模版来给特定网页特定位置的图片定义类型和性能。
`type（类型）`	string（字符串）	通过指定的<code>ID来定义图片的类型。允许值为： `image` - 对应Magento2后台中的Base Image `small_image` - 对应Magento2后台中的Small Image `swatch_image` - 对应Magento2后台中的Swatch Image `swatch_thumb` - 对应Magento2后台中的Swatch Image `thumbnail` - 对应Magento2后台中的Thumbnail Image 下面的图片说明了Magento2后台中的各种图片角色:

id（标识）

string（字符串）

图片标识，主题中是唯一的

可以是任何值，但在Magento主题中ID是有意义的并描述图像的位置。

例如，购物车中的交叉销售产品图片<code>ID是cart_cross_sell_products.

ID被用在.phtml模版来给特定网页特定位置的图片定义类型和性能。

type（类型）

string（字符串）

通过指定的<code>ID来定义图片的类型。允许值为：

image - 对应Magento2后台中的Base Image
small_image - 对应Magento2后台中的Small Image
swatch_image - 对应Magento2后台中的Swatch Image
swatch_thumb - 对应Magento2后台中的Swatch Image
thumbnail - 对应Magento2后台中的Thumbnail Image

下面的图片说明了Magento2后台中的各种图片角色:
magento2 cache

图片性能通过对应的元素而被定义，例如：

<images module="Magento_Catalog">
    <image id="unique_image_id" type="image">
        <width>100</width> <!-- Image width in px --> 
        <height>100</height> <!-- Image height in px -->
    </image>
</images>

下面表格是所有可配置性能的列表：

元素	属性值类型	描述	属性值必须性
`width`	整型	以像素为单位的图像宽度。	可选填
`height`	整型	以像素为单位的图像高度。	可选填
`constrain`	布尔型	如果被设置为`true`时，当图像小于配置值时不会扩大。默认值为：`true`。	可选填
`aspect_ratio`	布尔型	如果被设置为`true`，图片比例不会改变即使配置中需求。默认值为：`true`.	可选填
`frame`	布尔型	如果被设置为`true`, 图片不被裁剪。默认值为：`true`。只有当`aspect_ratio`被设置为 `true`时才可被应用。	可选填
`透明度`	布尔型	如果被设置为`true`，图片的透明背景被保存。如果设置为`false`，图片背景为白色（默认的)。你可以使用 `background`字段来设置背景色。默认值为：`true`。	可选填
`背景`	数组	图片的背景色。如果`transparency`被设置为`true`时，不被应用到透明背景图。	可选填