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

25

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.

Dynomit
źródło

Odpowiedzi:

39

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.

Atish Goswami
źródło
Dzięki. Nigdy bym nie pomyślał, gdzie to jest generowane. +1
Andy Jones
5
Uwielbiam to, jak bardzo jest to zaprojektowane, a jednocześnie brakuje dokumentacji. Będziesz musiał zajrzeć do kodu lub przekopać się do schematu db, aby znaleźć te nazwy.
Miguel Felipe Guillen Calo
Dziękuję za odpowiedź, ale zmęczyłem się i stwierdziłem, że ostatnie uruchomienie konfiguracji php bin/magento catalog:images:resize nie potrzebuje (kosztuje dużo czasu) , wystarczy wyczyścić pamięć podręczną, a wtedy będzie działać.
Key Shang
@KeyShang masz rację, obrazy o zmienionym rozmiarze są generowane w środowisku wykonawczym, jeśli jeszcze nie są obecne. Zaleca się jednak uruchomienie tego polecenia, ponieważ pomaga to w
zwiększeniu
6

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.

Ahmad Vaqas Khan
źródło
Warto zauważyć, że rozszerzenie ścieżki „vendor / magento / theme-frontend-luma / etc / view.xml” może również oznaczać „vendor / magento / theme-frontend-blank / etc / view.xml” w zależności od tego, który domyślny pakiet motywów używasz.
Dynomite
jak zmienić rozmiar obrazu miniatury na stronie szczegółów produktu?
jafar pinjar
1

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/

Sergey Korzhov
źródło