Comment puis-je modifier les tailles d'images de produit par défaut sur Magento 2?

Dans magento 1.xx , nous pourrions changer les images miniatures par défaut dans admin:

Système> Configuration> Catalogue

Mais dans magento 2.0 , comment puis-je changer ces valeurs, je n'arrive pas à trouver de configurations pour permettre cela? Le problème est que mes images de produits s'affichent avec de grandes rayures blanches et je voudrais éviter cela.

Magento utilise le fichier appelé view.xmlqui est maintenu au niveau du thème de l'application.

Ainsi, par exemple, si vous utilisez le thème par défaut, lumavous devriez trouver le view.xmlsousvendor/magento/theme-frontend-luma/etc/view.xml

Dans ce fichier, vous verriez un <images/>nœud à l'intérieur du <media>nœud.

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="bundled_product_customization_page" type="thumbnail">
                <width>140</width>
                <height>140</height>
            </image>
            <image id="cart_cross_sell_products" type="thumbnail">
                <width>200</width>
                <height>248</height>
            </image>
            <image id="cart_page_product_thumbnail" type="small_image">
                <width>165</width>
                <height>165</height>
            </image>
            ........
        </images>
    </media>
    ......
</view>

La dimension des images est maintenue ici sous le <image/>nœud.

La idvaleur d'attribut du <image/>nœud est référencée dans la base de code.

Par exemple:

<image id="related_products_list" type="small_image">
    <width>152</width>
    <height>190</height>
</image>

La valeur id est utilisée dans le fichier de vue 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;

Ici, le $imagefait référence à la valeur de la taille de l'image ici:

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

Dans le cas où le thème n'en a pas view.xml, il peut utiliser un thème de secours (thème parent) view.xmlcontenant le fichier.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Magento Luma</title>
    <parent>Magento/blank</parent>
    .....
</theme>

Voici Magento/blankle thème parent.

En cas de modification / remplacement des valeurs du view.xmlfichier, vous devez copier complètement le view.xmlfichier entier dans votre thème personnalisé et modifier les valeurs.

view.xmln'a pas de système de secours de valeur de nœud, signifie que si une valeur d'un nœud n'est pas présente dans votre thème personnalisé, view.xml elle ne reviendra pas à la valeur view.xml de son thème parent, c'est pourquoi tout le fichier doit être copié.

Une fois les changements de valeurs effectués, vous devrez exécuter

php bin/magento catalog:images:resize

Cela régénérera les nouvelles tailles d'image.

• Architecture frontend de Magento 2
• Création d'un thème personnalisé

Le produit Magento utilise le fichier view.xml pour les dimensions de la taille de l'image dans le chemin du vendeur / magento / theme-frontend-luma / etc / view.xml

Ici, vous trouverez un nœud à l'intérieur du nœud.

Copiez le fichier view.xml et placez-le dans votre chemin de thème et apportez les modifications, par exemple app / design / frontend / MyThemePackage / MyTheme / etc / view.xml

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
<media>
    <images module="Magento_Catalog">
        ........
        <image id="category_page_list" type="small_image">
             <width>270</width>
             <height>450</height>
        </image>
        ........
    </images>
</media>
......
</view>

Videz le cache et chargez la page de liste des catégories. Vos modifications seront reflétées.

Vous pouvez également spécifier les dimensions de l'image directement dans le fichier de modèle comme ceci:

<?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" />';
}

Plus d'exemples ici - https://nwdthemes.com/2017/12/19/magento-2-product-image-size/