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


25

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.

Antworten:


39

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.


Vielen Dank. Ich hätte nie gedacht, wo dies erzeugt wurde. +1
Andy Jones

5
Ich muss lieben, wie überentwickelt dies ist und es dennoch an Dokumentation mangelt. Sie müssten sich den Code ansehen oder sich im Datenbankschema umsehen, um diese Namen herauszufinden.
Miguel Felipe Guillen Calo

Vielen Dank für die Antwort, aber ich bin müde und habe festgestellt, dass der letzte Setup-Lauf php bin/magento catalog:images:resize nicht benötigt wird (er kostet viel Zeit) . Wir müssen nur den Cache leeren und dann wird er funktionieren.
Key Shang

@KeyShang Sind Sie richtig, werden die verkleinerten Bilder in Runtime generiert, falls noch nicht vorhanden. Es wird jedoch empfohlen, diesen Befehl auszuführen, da er die Leistung in der Produktion
verbessert

6

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.


Es ist bemerkenswert, dass der Pfad "vendor / magento / theme-frontend-luma / etc / view.xml" auch "vendor / magento / theme-frontend-blank / etc / view.xml" sein kann, abhängig von dem Standard-Theme-Paket Sie nutzen.
Dynomite

Wie ändere ich die Größe der Miniaturbilder auf der Produktdetailseite?
Jafar Pinjar

1

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/

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.