What鈥檚 in this topic
The properties of product images used on the storefront are stored in the view.xml
configuration file. This topic provides all details about what properties are available and how to configure them.
Configure image properties in view.xml
The conventional location of view.xml
for a theme is:
<theme_dir>/etc/view.xml
For example, here is the view.xml
of the Magento Blank theme: app/design/frontend/Magento/blank/etc/view.xml
.
In view.xml
, image properties are configured in the scope of <images module="Magento_Catalog">
element:
<images module="Magento_Catalog">
...
<images/>
Image properties are configured for each image type defined by the id
and type
attributes of the <image>
element:
<images module="Magento_Catalog">
<image id="unique_image_id" type="image_type">
...
</image>
<images/>
The following table describes the attributes in detail:
Attribute | Type | Description |
---|---|---|
id
|
string |
Image identifier. Unique in the scope of theme.
Can have any value, but in out-of-the- box Magento themes For example, the
|
type
|
string |
The type of the images defined by the specified id . Allowed values:
|
Image properties are defined by the corresponding elements, for example:
<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>
The following table contains the list of all properties which can be configured:
Element | Type | Description | Required |
---|---|---|---|
width
|
integer | Image width in pixels. | Optional |
height
|
integer | Image height in pixels. | Optional |
constrain
|
boolean |
If set to true , images that are smaller than required by the configuration, are not enlarged. Default value: true .
|
Optional |
aspect_ratio
|
boolean |
If set to true , proportions of images are not changed even if required by the configuration. Default value: true .
|
Optional |
frame
|
boolean |
If set to true , images are not cropped. Default value: true . Applied only if aspect_ratio is set to true .
|
Optional |
transparency
|
boolean |
If set to true , the transparent background of images is saved. If is set to false , images have the white background (by default). You can set the color for the background using the background parameter. Default value: true .
|
Optional |
background
|
array |
The color for the images background. Not applied to images with transparency, if transparency is set to true .
|
Optional |
Resize catalog images
The magento catalog:images:resize
command enables you to resize images for display on your storefront; for example:
- After you import products, which might have variable sized images
- If images were resized or deleted manually from cache
Each image assigned to a product must be resized in accordance with image metadata defined in a module鈥檚 view.xml
configuration file. After resizing an image, its resized copy is stored in the cache (/pub/media/catalog/product/cache
directory). Magento serves storefront images from cache.
Generally, product images are cached while saving the product. However, sometimes you might need to re-create the product images cache using this command鈥攆or example, after you import products, if images were resized manually in the cache, or if the cache was manually cleared by mistake.
Command usage:
php <magento install dir>/bin/magento catalog:images:resize
This command has no arguments or options. A progress indicator displays while the command runs.
The message Product images resized successfully
displays to confirm the command succeeded.
Find us on