Mengatur rasio gambar di magento 2

Thumbnail atau gambar produk di magento harus disesuaikan dengan kebutuhan tema kita. Terkadang kita ingin tampilan gambar memiliki rasio square sementara default magento memiliki rasio portrait. Atau anda ingin mengatur ukuran thumbnail agar lebih kecil sehingga lebih hemat bandwith. Atau anda merasa thumbnail anda blurry dan kurang tajam sehingga harus di perbesar ukurannya. Kita dapat mengatur rasio gambar magento di themes kita.

File view.xml

Penyesuaian rasio gambar dapat dilakukan per themes. Jadi kita dapat menyesuaikan sesuai tema kita.

Pertama, jika kita buat file terlebih dahulu jika belum memiliki file etc/view.xml didalam direktori themes kita. Kita juga bisa copas dari themes luma atau blank di path ini: vendor/magento/theme-frontend-blank/etc/view.xml

view.xml untuk mengatur rasio gambar magento

Misalnya kita ingin mengubah rasio gambar dari product list tipe grid. Kita bisa langsung mengubah konfigurasi ukuran thumbnail melalui file ini.

rasio gambar magento sebelum diubah

Cek ukuran gambar melalui inspect elemen browser, ukuran semula dari thumbnail grid ini adalah 240 x 300. Kita akan coba merubah thumbnail ini menjadi ukuran 300 x 300.

Cari konfigurasi category_page_grid pada etc/view.xml pada themes kita. Lalu ubah value width dan height, sesuaikan dengan keinginan (300×300).

Bersihkan cache sistem dengan perintah php bin/magento cache:flush lalu refresh dan cek kembali ukuran gambar / thumbnailnya.

Selain untuk mengatur rasio gambar thumbnail magento, kita juga dapat merubah ukuran gambar dari product detail melalui rule dalam file ini. Kita hanya harus menyesuaikan rule key dan tag apa saja yang dibutuhkan.

Anda dapat mencontoh rule dari yang sudah ada. Misalnya pada themes luma atau blank.

Gambar oleh Luisella Planeta Leoni dari Pixabay

Leave a Reply

%d bloggers like this: