Come posso modificare le dimensioni predefinite delle immagini dei prodotti su Magento 2?

In magento 1.xx , potremmo modificare le immagini di anteprima predefinite in admin:

Sistema> Configurazione> Catalogo

Ma in Magento 2.0 , come posso cambiare questo valore che non riesco a trovare alcuna configurazione per permetterlo? Il problema è che le immagini dei miei prodotti vengono visualizzate con grandi strisce bianche e vorrei evitarlo.

Magento utilizza il file chiamato view.xmlche viene mantenuto a livello di tema dell'applicazione.

Quindi, ad esempio, se stai usando il tema predefinito luma, dovresti trovare quello view.xmlsottovendor/magento/theme-frontend-luma/etc/view.xml

In questo file, vedresti il <images/>nodo all'interno del <media>nodo.

<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 dimensione delle immagini è mantenuta qui sotto il <image/>nodo.

Il idvalore dell'attributo del <image/>nodo è indicato nella base di codice.

Per esempio:

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

Il valore ID viene utilizzato nel file di visualizzazione 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;

Qui il si $imageriferisce al valore della dimensione dell'immagine qui:

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

Nel caso in cui il tema non abbia un view.xml, quindi potrebbe utilizzare un tema di fallback (tema principale) che ha il view.xmlfile.

<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>

Ecco Magento/blankil tema principale.

In caso di modifica / sovrascrittura dei valori del view.xmlfile, è necessario copiare completamente l'intero view.xmlfile sul tema personalizzato e modificare i valori.

view.xmlnon ha un sistema di fallback del valore del nodo, significa che se un valore di un nodo non è presente nel tema personalizzato view.xml , non ricadrà sul valore view.xml del tema principale, ecco perché è necessario copiare l'intero file.

Una volta apportate le modifiche ai valori, dovrai eseguirlo

php bin/magento catalog:images:resize

Questo rigenererà le nuove dimensioni dell'immagine.

• Architettura frontend Magento 2
• Creazione di temi personalizzati

Il prodotto Magento utilizza il file view.xml per le dimensioni delle dimensioni dell'immagine nel percorso vendor / magento / theme-frontend-luma / etc / view.xml

Qui troverai il nodo all'interno del nodo.

Copia il file view.xml e inseriscilo nel percorso del tuo tema e apporta le modifiche, ad esempio 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>

Svuota la cache e carica la pagina dell'elenco delle categorie. Le tue modifiche si rifletteranno.

Puoi anche specificare le dimensioni dell'immagine direttamente nel file modello come questo:

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

Altri esempi qui - https://nwdthemes.com/2017/12/19/magento-2-product-image-size/