Como posso alterar o tamanho padrão das imagens do produto no Magento 2?

No magento 1.xx , podemos alterar as imagens em miniatura padrão em admin:

Sistema> Configuração> Catálogo

Mas no magento 2.0 , como posso alterar esse valor? Parece que não consigo encontrar nenhuma configuração para permitir isso? O problema é que as imagens dos meus produtos estão sendo exibidas com listras brancas grandes e eu gostaria de evitar isso.

Magento usa o arquivo chamado view.xmlque é mantido no nível do tema do aplicativo.

Por exemplo, se você estiver usando o tema padrão, lumadeverá encontrar o view.xmlitemvendor/magento/theme-frontend-luma/etc/view.xml

Nesse arquivo, você veria o <images/>nó dentro do <media>nó.

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

A dimensão das imagens é mantida aqui sob o <image/>nó.

O idvalor do atributo do <image/>nó é referenciado na base de código.

Por exemplo:

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

O valor do ID é usado no arquivo de visualização 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;

Aqui o $imagerefere-se ao valor do tamanho da imagem aqui:

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

Caso o tema não possua um view.xml, pode estar usando um tema de fallback (tema pai) que possui o view.xmlarquivo.

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

Aqui Magento/blankestá o tema principal.

No caso de alterar / substituir os valores do view.xmlarquivo, você precisa copiar completamente o view.xmlarquivo inteiro para o seu tema personalizado e alterar os valores.

view.xmlnão possui um sistema de fallback de valor de nó, significa que, se um valor de um nó não estiver presente nos seus temas personalizados, view.xml ele não retornará ao valor view.xml do tema pai, é por isso que o arquivo inteiro precisa ser copiado.

Depois que as alterações nos valores forem feitas, você terá que executar

php bin/magento catalog:images:resize

Isso regenerará os novos tamanhos de imagem.

• Arquitetura de front-end do Magento 2
• Criando tema personalizado

O produto Magento usa o arquivo view.xml para dimensões de tamanho de imagem no caminho vendor / magento / theme-frontend-luma / etc / view.xml

Aqui você encontrará um nó dentro do nó.

Copie o arquivo view.xml e coloque-o no caminho do tema e faça as alterações, digamos 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>

Limpe o cache e carregue a página da lista de categorias. Suas alterações serão refletidas.

Você também pode especificar as dimensões da imagem diretamente no arquivo de modelo 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" />';
}

Mais amostras aqui - https://nwdthemes.com/2017/12/19/magento-2-product-image-size/