¿Cómo puedo cambiar el tamaño predeterminado de las imágenes del producto en Magento 2?

En magento 1.xx , podríamos cambiar las imágenes en miniatura predeterminadas en admin:

Sistema> Configuración> Catálogo

Pero en magento 2.0 , ¿cómo puedo cambiar el valor de estas tesis? Parece que no puedo encontrar ninguna configuración para permitir esto. El problema es que las imágenes de mis productos se muestran con grandes franjas blancas y me gustaría evitarlo.

Magento usa el archivo llamado view.xmlque se mantiene en el nivel de tema de la aplicación.

Así, por ejemplo, si está utilizando el tema por defecto lumaque debe encontrar el view.xmlbajovendor/magento/theme-frontend-luma/etc/view.xml

En este archivo, verá el <images/>nodo dentro 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 dimensión de las imágenes se mantiene aquí debajo del <image/>nodo.

El idvalor de atributo del <image/>nodo se referencia en la base de código.

Por ejemplo:

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

El valor de id se usa en el archivo de vista 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;

Aquí se $imagerefiere al valor del tamaño de la imagen aquí:

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

En caso de que el tema no tenga un view.xml , entonces podría estar usando un tema alternativo (tema principal) que tiene el view.xmlarchivo.

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

Aquí Magento/blankestá el tema principal.

En caso de cambiar / sobrescribir los valores del view.xmlarchivo, debe copiar completamente todoview.xml archivo a su tema personalizado y cambiar los valores.

view.xmlno tiene un sistema de recuperación de valor de nodo, significa que si el valor de un nodo no está presente en sus temas personalizados, view.xml no lo hará recurrirá al valor view.xml de su tema principal, por eso es necesario copiar todo el archivo.

Una vez que se hayan realizado los cambios de valores, deberá ejecutar

php bin/magento catalog:images:resize

Esto regenerará los nuevos tamaños de imagen.

• Arquitectura frontend de Magento 2
• Crear tema personalizado

El producto Magento usa el archivo view.xml para las dimensiones del tamaño de la imagen en la ruta proveedor / magento / theme-frontend-luma / etc / view.xml

Aquí encontrará el nodo dentro del nodo.

Copie el archivo view.xml y colóquelo en su ruta de tema y realice los cambios, diga 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>

Borre el caché y cargue la página de lista de categorías. Tus cambios se reflejarán.

También puede especificar las dimensiones de la imagen directamente en un archivo de plantilla como este:

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

Más muestras aquí: https://nwdthemes.com/2017/12/19/magento-2-product-image-size/