Wie kann ich die Standardgröße für Produktbilder in Magento 2 ändern?

In magento 1.xx können wir die Standard-Miniaturbilder in admin ändern:

System> Konfiguration> Katalog

Aber wie kann ich in Magento 2.0 diesen Wert ändern, wenn ich scheinbar keine Konfigurationen finde, die dies zulassen? Das Problem ist, dass meine Produktbilder mit großen weißen Streifen angezeigt werden und ich dies verhindern möchte.

Magento verwendet die aufgerufene Datei, view.xmldie auf der Themenebene der Anwendung verwaltet wird.

Wenn Sie beispielsweise das Standarddesign verwenden luma, sollten Sie das view.xmlunter findenvendor/magento/theme-frontend-luma/etc/view.xml

In dieser Datei würden Sie <images/>Knoten innerhalb des <media>Knotens sehen.

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

Die Dimension der Bilder wird hier unter dem <image/>Knoten beibehalten .

Der idAttributwert des <image/>Knotens wird in der Codebasis referenziert.

Beispielsweise:

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

Der ID-Wert wird in der Ansichtsdatei verwendet 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;

Hier $imagebezieht sich das auf den Wert der Bildgröße hier:

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

Falls das Design kein hat view.xml, könnte es ein Fallback-Design (übergeordnetes Design) verwenden, das die view.xmlDatei enthält.

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

Hier Magento/blankist das übergeordnete Thema.

Wenn Sie die Werte der view.xmlDatei ändern oder überschreiben möchten, müssen Sie die gesamte view.xmlDatei vollständig in Ihr benutzerdefiniertes Design kopieren und die Werte ändern.

view.xmlEs gibt kein Fallback-System für Knotenwerte. Wenn ein Wert eines Knotens in Ihrem benutzerdefinierten Design nicht vorhanden ist view.xml , wird er nicht auf den view.xml-Wert des übergeordneten Designs zurückgesetzt. Aus diesem Grund muss die gesamte Datei kopiert werden.

Sobald die Wertänderungen vorgenommen wurden, müssen Sie ausführen

php bin/magento catalog:images:resize

Dadurch werden die neuen Bildgrößen neu generiert.

• Magento 2 Frontend-Architektur
• Benutzerdefiniertes Design erstellen

Das Magento-Produkt verwendet die Datei view.xml für die Abmessungen der Bilder unter dem Pfad vendor / magento / theme-frontend-luma / etc / view.xml

Hier finden Sie Knoten innerhalb des Knotens.

Kopieren Sie die Datei view.xml, fügen Sie sie in Ihren Themenpfad ein und nehmen Sie die Änderungen vor, z. B. 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>

Leeren Sie den Cache und laden Sie die Kategorielistenseite. Ihre Änderungen werden übernommen.

Sie können die Bildabmessungen auch direkt in der Vorlagendatei wie folgt angeben:

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

Weitere Beispiele hier - https://nwdthemes.com/2017/12/19/magento-2-product-image-size/