Jak mogę zmienić domyślne rozmiary zdjęć produktów w Magento 2?

W magento 1.xx możemy zmienić domyślne miniatury w adminie:

System> Konfiguracja> Katalog

Ale w Magento 2.0 , jak mogę zmienić tezy, że nie mogę znaleźć żadnych konfiguracji, aby to umożliwić? Problem polega na tym, że moje zdjęcia produktów są wyświetlane z dużymi białymi paskami i chciałbym temu zapobiec.

Magento korzysta z pliku o nazwie, view.xmlktóry jest utrzymywany na poziomie kompozycji aplikacji.

Na przykład, jeśli używasz domyślnego motywu luma, powinieneś znaleźć view.xmlponiżejvendor/magento/theme-frontend-luma/etc/view.xml

W tym pliku zobaczysz <images/>węzeł wewnątrz <media>węzła.

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

Wymiary obrazów są utrzymywane tutaj pod <image/>węzłem.

Wartość idatrybutu <image/>węzła jest przywoływana w bazie kodu.

Na przykład:

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

Wartość identyfikatora jest używana w pliku widoku 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;

Tutaj $imageodnosi się do wartości rozmiaru obrazu tutaj:

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

W przypadku gdy motyw nie ma view.xml, może być używany motyw zastępczy (motyw nadrzędny), który zawiera view.xmlplik.

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

Oto Magento/blankmotyw nadrzędny.

W przypadku zmiany / zastąpienia wartości view.xmlpliku należy całkowicie skopiować cały view.xmlplik do niestandardowego motywu i zmienić wartości.

view.xmlnie ma systemu rezerwowego wartości węzła, co oznacza, że ​​jeśli w węźle niestandardowym nie ma wartości węzła, nie view.xml nastąpi powrót do wartości view.xml jego motywu nadrzędnego, dlatego należy skopiować cały plik.

Gdy zmiany wartości zostaną wykonane, będziesz musiał uruchomić

php bin/magento catalog:images:resize

Spowoduje to zregenerowanie nowych rozmiarów obrazu.

• Architektura frontendu Magento 2
• Tworzenie niestandardowego motywu

Produkt Magento używa pliku view.xml dla wymiarów rozmiaru obrazu u dostawcy ścieżki / magento / theme-frontend-luma / etc / view.xml

Tutaj znajdziesz węzeł wewnątrz węzła.

Skopiuj plik view.xml i umieść go w ścieżce motywu i wprowadź zmiany, powiedzmy 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>

Wyczyść pamięć podręczną i załaduj stronę listy kategorii. Twoje zmiany zostaną odzwierciedlone.

Możesz również określić wymiary obrazu bezpośrednio w pliku szablonu, jak poniżej:

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

Więcej próbek tutaj - https://nwdthemes.com/2017/12/19/magento-2-product-image-size/