ฉันจะเปลี่ยนขนาดรูปภาพเริ่มต้นของผลิตภัณฑ์ใน Magento 2 ได้อย่างไร

ในmagento 1.xxเราสามารถเปลี่ยนภาพย่อขนาดเริ่มต้นในผู้ดูแลระบบ:

ระบบ> การกำหนดค่า> แคตตาล็อก

แต่ในmagento 2.0ฉันจะเปลี่ยนค่าเหล่านี้ได้อย่างไรฉันไม่สามารถหาค่าคอนฟิกที่อนุญาตได้ ปัญหาคือภาพผลิตภัณฑ์ของฉันแสดงเป็นแถบสีขาวขนาดใหญ่และฉันต้องการจะป้องกันสิ่งนี้

Magento ใช้ไฟล์ที่เรียกว่าview.xmlซึ่งถูกดูแลรักษาที่ระดับธีมของแอปพลิเคชัน

ตัวอย่างเช่นหากคุณใช้ชุดรูปแบบเริ่มต้นlumaคุณควรค้นหาส่วนview.xmlใต้vendor/magento/theme-frontend-luma/etc/view.xml

ในไฟล์นี้คุณจะเห็น<images/>โหนดภายใน<media>โหนด

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

ขนาดของอิมเมจถูกดูแลรักษาที่นี่ภายใต้<image/>โหนด

idค่าแอตทริบิวต์ของ<image/>โหนดถูกอ้างถึงใน codebase

ตัวอย่างเช่น:

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

ค่า id ถูกใช้ในไฟล์มุมมอง 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;

นี่คือการ$imageอ้างอิงถึงค่าของขนาดภาพที่นี่:

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

ในกรณีที่ชุดรูปแบบไม่มีview.xml, ก็อาจใช้ชุดรูปแบบสำรอง (ชุดรูปแบบหลัก) ซึ่งมีview.xmlไฟล์

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

นี่Magento/blankคือธีมหลัก

ในกรณีที่มีการเปลี่ยนแปลง / เขียนทับค่าของview.xmlไฟล์คุณจะต้องคัดลอกview.xmlไฟล์ทั้งหมดไปยังธีมที่กำหนดเองของคุณและเปลี่ยนค่า

view.xmlไม่มีระบบสำรองค่าโหนดหมายความว่าหากค่าของโหนดไม่มีอยู่ในธีมที่คุณกำหนดเองview.xml จะไม่มีการย้อนกลับไปเป็นค่า view.xml ของธีมหลักซึ่งเป็นสาเหตุที่ต้องคัดลอกไฟล์ทั้งหมด

เมื่อการเปลี่ยนแปลงค่าเสร็จสิ้นคุณจะต้องเรียกใช้

php bin/magento catalog:images:resize

สิ่งนี้จะสร้างขนาดภาพใหม่

• สถาปัตยกรรมส่วนหน้าของ Magento 2
• การสร้างธีมที่กำหนดเอง

ผลิตภัณฑ์ Magento ใช้ไฟล์view.xmlสำหรับขนาดภาพที่ผู้ขายพา ธ/ magento / theme-frontend-luma / etc / view.xml

ที่นี่คุณจะพบโหนดภายในโหนด

คัดลอกไฟล์ view.xml และวางไว้ในพา ธ ธีมของคุณและทำการเปลี่ยนแปลงพูดแอพ / 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>

ล้างแคชและโหลดหน้ารายการหมวดหมู่ การเปลี่ยนแปลงของคุณจะสะท้อนให้เห็น

คุณยังสามารถระบุขนาดภาพโดยตรงในไฟล์เทมเพลตเช่นนี้:

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

ตัวอย่างเพิ่มเติมได้ที่นี่ - https://nwdthemes.com/2017/12/19/magento-2-product-image-size/