Magento v2.3.3, v2.3.4
- Doc officielle: configure image properties in view.xml.
- Magento 2 : Product image size and other options. Qui donne en plus quelques codes samples pour l’utilisation dans les PHTML (mais pas testé).
- How to increase the quality of product photos JPG (Magento 2)
view.xml de votre thème
Pour les visuels de la fiche produit, que votre thème hérite de blank ou de luma, voici les dimensions à surcharger dans le fichier app/design/frontend/VotreVendor/votretheme/etc/view.xml (ne tenez pas compte des valeurs que j’ai mis, surtout pour le thumbnail) :
product_page_main_image: ???product_page_main_image_default: ???product_page_image_large: les dimensions des visuels zoomés du carousel. Remarque: ne pas surcharger permet, il me semble, d’afficher l’image dans sa taille d’origine dans le zoom.product_page_image_medium: les dimensions des visuels qui s’affichent en carouselproduct_page_image_small: les dimensions des visuels des miniatures (thumbnails) du carousel
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<image id="product_page_main_image" type="image"> <width>1294</width> <height>1294</height> </image> <image id="product_page_main_image_default" type="image"> <width>1294</width> <height>1294</height> </image> <image id="product_page_image_large" type="image"> <width>1294</width> <height>1294</height> </image> <image id="product_page_image_medium" type="image"> <width>647</width> <height>647</height> </image> <image id="product_page_image_small" type="thumbnail"> <width>90</width> <height>90</height> </image> |
Puis en bash:
|
1 2 |
php magento catalog:images:resize php magento cache:clean |
Modifier le taux de compression (la qualité) des images
En BO:
Stores > Configuration > Advanced > System > Images Upload Configuration > Quality > 100
Dans le code en créant un module (pas testé):
File : {Vendor}/{Module}/etc/di.xml
|
1 2 3 4 5 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <preference for="Magento\Catalog\Model\Product\Image" type="{Vendor}\{Module}\Model\Product\Image" /> </config> |
File : {Vendor}/{Module}/Model/Product You can set the quality to whatever you want. Then flush image cache.
|
1 2 3 4 5 6 7 8 9 10 |
namespace {Vendor}\{Module}\Model\Product; class Image extends \Magento\Catalog\Model\Product\Image { protected function _construct() { $this->_quality = 100; parent::_construct(); } } |
Utilisation dans un PHTML (pas testé):
Image ID could be used in .phtml template like this:
|
1 2 3 4 5 6 7 8 9 |
<?php /** * @var $block \Magento\Catalog\Block\Product\Widget\NewWidget */ $image = 'new_products_content_widget_grid'; $items = $block->getProductCollection()->getItems(); foreach ($items as $_item) { echo $block->getImage($_item, $image)->toHtml(); } |
You can set custom dimensions directly in template file:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php /** * @var $block \Magento\Catalog\Block\Product\Widget\NewWidget */ $image = 'new_products_content_widget_grid'; $items = $block->getProductCollection()->getItems(); $width = 100; $height = 100; foreach ($items as $_item) { $resizedUrl = $block->resizeImage($_item, $image , $width, $height)->getUrl(); echo '<img src="'.$resizedUrl .'" alt="alt text" />'; } |
You can modify other image options in template file. In order to do it in you need to inject image helper class (\Magento\Catalog\Helper\Image) in your block class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php /** * @var $block \Magento\Catalog\Block\Product\Widget\NewWidget * @var $imageHelper \Magento\Catalog\Helper\Image */ $image = 'new_products_content_widget_grid'; $items = $block->getProductCollection()->getItems(); $width = 100; $height = 100; foreach ($items as $_item) { $resizedUrl = $imageHelper->init($_item, $image ) ->keepAspectRatio(TRUE) ->constrainOnly(TRUE) ->keepFrame(TRUE) ->resize($width, $height) ->getUrl(); echo '<img src="'.$resizedUrl .'" alt="alt text" />'; } |