Bagaimana saya bisa mengubah ukuran gambar produk default di Magento 2?

25

Di magento 1.xx , kita dapat mengubah gambar mini standar di admin:

Sistem> Konfigurasi> Katalog

Tetapi di Magento 2.0 , bagaimana saya bisa mengubah nilai tesis ini Saya tidak bisa menemukan konfigurasi untuk memperbolehkan ini? Masalahnya adalah gambar produk saya ditampilkan dengan garis-garis putih besar dan saya ingin mencegahnya.

— Dynomite
sumber

39

Magento menggunakan file yang disebut view.xmlyang dikelola di tingkat tema aplikasi.

Jadi misalnya, jika Anda menggunakan tema default lumaAnda harus menemukan di view.xmlbawahnyavendor/magento/theme-frontend-luma/etc/view.xml

Dalam file ini, Anda akan melihat <images/>simpul di dalam <media>simpul tersebut.

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

Dimensi gambar dipertahankan di sini di bawah <image/>simpul.

Nilai idatribut dari <image/>simpul dirujuk dalam basis kode.

Sebagai contoh:

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

Nilai id digunakan dalam file tampilan 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;

Di sini $imagemengacu pada nilai ukuran gambar di sini:

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

Jika tema tidak memiliki view.xml, maka mungkin menggunakan tema fallback (tema induk) yang memiliki view.xmlfile.

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

Inilah Magento/blanktema induknya.

Dalam hal mengubah / menimpa nilai-nilai view.xmlfile Anda perlu menyalin seluruh view.xmlfile ke tema kustom Anda dan mengubah nilai-nilai.

view.xmltidak memiliki sistem fallback nilai simpul, berarti jika nilai simpul tidak ada di tema Anda, view.xml itu tidak akan mundur ke nilai view.xml tema induknya, itu sebabnya seluruh file perlu disalin.

Setelah perubahan nilai telah dilakukan, Anda harus menjalankannya

php bin/magento catalog:images:resize

Ini akan membuat ulang ukuran gambar baru.

Arsitektur frontend Magento 2

Membuat Tema Khusus

— Atish Goswami
sumber

Terima kasih. Saya tidak pernah tahu di mana ini dihasilkan. +1

— andy jones

5

Harus mencintai bagaimana ini direkayasa namun kurang dalam dokumentasi. Anda harus melihat ke dalam kode atau menggali skema db hanya untuk mengetahui nama-nama ini.

— Miguel Felipe Guillen Calo

Terima kasih atas jawabannya, tetapi saya lelah dan menemukan proses setup terakhir php bin/magento catalog:images:resize tidak perlu (menghabiskan banyak waktu) , kita hanya perlu menghapus cache dan kemudian akan bekerja.

— Kunci Shang

@KeyShang Anda benar, gambar yang diubah ukurannya dapat dihasilkan dalam runtime jika belum ada. Namun disarankan Anda menjalankan perintah ini karena membantu dengan kinerja pada produksi

— Atish Goswami

6

Produk Magento menggunakan file view.xml untuk dimensi ukuran gambar di jalur vendor / magento / theme-frontend-luma / etc / view.xml

Di sini Anda akan menemukan simpul di dalam simpul.

Salin file view.xml dan letakkan di jalur tema Anda dan buat perubahan, katakan aplikasi / desain / antarmuka / 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>

Bersihkan cache dan muat halaman daftar kategori. Perubahan Anda akan tercermin.

— Ahmad Vaqas Khan
sumber

Hal ini layak dicatat bahwa memperpanjang jalur "vendor / Magento / tema-frontend-luma / etc / view.xml" juga bisa "vendor / Magento / tema-frontend-blank / etc / view.xml" tergantung pada paket tema default Kau gunakan.

— Dynomite

bagaimana cara mengubah ukuran gambar mini pada halaman detail produk?

— jafar pinjar

1

Anda juga dapat menentukan dimensi gambar secara langsung dalam file template seperti ini:

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

Lebih banyak sampel di sini - https://nwdthemes.com/2017/12/19/magento-2-product-image-size/

— Sergey Korzhov
sumber