Làm cách nào để thay đổi kích thước hình ảnh sản phẩm mặc định trên Magento 2?

Trong magento 1.xx , chúng tôi có thể thay đổi hình ảnh thu nhỏ mặc định trong quản trị viên:

Hệ thống> Cấu hình> Danh mục

Nhưng trong magento 2.0 , làm thế nào tôi có thể thay đổi giá trị luận án mà tôi dường như không thể tìm thấy bất kỳ cấu hình nào để cho phép điều này? Vấn đề là hình ảnh sản phẩm của tôi đang hiển thị với các sọc trắng lớn và tôi muốn ngăn chặn điều này.

Magento sử dụng tệp được gọi view.xmllà duy trì ở cấp chủ đề của ứng dụng.

Vì vậy, ví dụ, nếu bạn đang sử dụng chủ đề mặc định, lumabạn nên tìm bên view.xmldướivendor/magento/theme-frontend-luma/etc/view.xml

Trong tệp này, bạn sẽ thấy <images/>nút bên trong <media>nút.

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

Kích thước của hình ảnh được duy trì ở đây dưới <image/>nút.

Các idgiá trị thuộc tính của <image/>nút được tham chiếu trong codebase.

Ví dụ:

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

Giá trị id được sử dụng trong tệp xem 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;

Ở đây $imageđề cập đến giá trị của kích thước hình ảnh ở đây:

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

Trong trường hợp chủ đề không có view.xml, thì có thể sử dụng chủ đề dự phòng (chủ đề gốc) có view.xmltệp.

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

Đây Magento/blanklà chủ đề phụ huynh.

Trong trường hợp thay đổi / ghi đè các giá trị của view.xmltệp, bạn cần sao chép hoàn toàn toàn bộ view.xmltệp vào chủ đề tùy chỉnh của mình và thay đổi các giá trị.

view.xmlkhông có hệ thống dự phòng giá trị nút, có nghĩa là nếu giá trị của nút không có trong chủ đề tùy chỉnh của view.xml bạn thì nó sẽ không dự phòng theo giá trị view.xml của chủ đề gốc, đó là lý do tại sao toàn bộ tệp cần được sao chép.

Khi các thay đổi giá trị đã được thực hiện, bạn sẽ phải chạy

php bin/magento catalog:images:resize

Điều này sẽ tạo lại kích thước hình ảnh mới.

• Kiến trúc Magento 2 frontend
• Tạo chủ đề tùy chỉnh

Sản phẩm Magento sử dụng tệp view.xml cho kích thước kích thước hình ảnh tại nhà cung cấp đường dẫn / magento / theme-frontend-luma / etc / view.xml

Ở đây bạn sẽ tìm thấy nút bên trong nút.

Sao chép tệp view.xml và đặt nó vào đường dẫn chủ đề của bạn và thực hiện các thay đổi, giả sử 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>

Xóa bộ nhớ cache và tải trang danh sách danh mục. Những thay đổi của bạn sẽ được phản ánh.

Bạn cũng có thể chỉ định kích thước hình ảnh trực tiếp trong tệp mẫu như thế này:

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

Thêm mẫu tại đây - https://nwdtheme.com/2017/12/19/magento-2-product-image-size/