Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Shopify
Webdesign

Cara Bekerja dengan Gambar di Shopify

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Saat memulai dengan platform baru seperti Shopify, ada banyak hal yang dipelajari. Sementara Liquid, Bahasa template yang digunakan di tema Shopify bisa dibaca dan mudah dimulai, satu area pengembangan Shopify yang sering menyebabkan kebingungan bagi pengembang tema baru adalahh gambar. Saya yakin alasan utama untuk hal ini ada pada pemahaman “jenis” gambar yang anda temui dalam tema Shopify. Di atas bagian artikel ini, kami akan memeriksa tiap jenis gambar yang berbeda-beda dan cara memakainya dalam tema Shopify.

Jika anda masih baru terhadap Liquid, tiga rangkaian bagian saya akan memberi anda dasar yang solid dan akan terbantu selama anda mengikutinya. Jika anda awam terhadap Shopify, anda dapat bereksperimen dengan teknik-teknik mana saja yang menggunakan toko pengembangan gratis. Agar pembuatan toko pengembangan terdaftar ke program Shopify Partner dengan gratis.

Five Simple Steps make use of theme images to provide their home page hero image
Lima Langkah Sederhana menggunakan manfaat gambar tema untuk menyediakan gambar hero pada home page mereka.

Jenis Gambar

Ada empat jenis gambar pada tema Shopify. Anda akan bekerja dengan setiap jenisnya melalui sebuah tema, maka penting memahami perbedaan antar keempatnya. Mari uji setiap jenisnya :

  1. Gambar Tema: ini tersimpan bersama folder aset tema dan khusus untuk tema tersebut. Biasanya ditambahkan ke tema oleh pengembang tema.
  2. Gambar Produk: gambar ini khusus untuk toko dan diunggah via admin Shopify untuk setiap produk.
  3. Gambar Koleksi: satu gambar ditempatkan untuk mewakili sebuah koleksi yang diunggah via admin Shopify.
  4. Gambar Artikel: satu gambar ditempatkan mewakili artikel blog yang diunggah via halaman edit artikel di admin Shopify.

Penting dicatat bahwa produk, koleksi dan gambar artikel semuanya ditautkan secara langsung ke toko. Jika anda mengubah tema toko, maka gambar-gambarnya akan tetap di tempatnya dan akan bekerja dengan tema mana saja yang mengacu ke gambarnya.

1. Gambar Tema

Mari awali dengan melihat gambar tema. Saat membuat tema Shopofy, anda dapat menambahkan jumlah gambar, dengan format apa saja dan di ukuran apa saja ke folder aset dalam petunjuk tema anda. Gambar-gambar ini biasanya dapat digunakan untuk latar, sprite dan branding elemen.

Pengacuan gambar-gambar ini pada sebuah tema sangatlah lurus. Mari asumsikan, kita memiliki logo.png di folder aset kita; kita dapat menghasilkannya ke dalam template mana saja dengan memakai sintaksis Liquid berikut:

Pendekatan ini memakai dua filter Liquid untuk membuat elemen img HTML terformat full. Pertama, asset_url, menambah jalur penuh ke folder aset untuk tema toko yang terbaru. Kedua, img_tag, ambil ini dan buat elemen img HTML lengkap dengan atribut alt. Jika hilang, atribut alt akan menjadi kosong. Inilah hasil akhirnya:

Greats cleverly showcase their shoes using product images on their stores home page
Dengan cerdiknya menunjukkan sepatu mereka dengan menggunakan gambar produk di halaman muka toko mereka.

Lokasi, Lokasi, Lokasi

Anda akan menyadari bahwa atribut src mengacu pada Shopify CDN (Jaringan Pengirim Konten). Setiap gambar yang anda tambahkan, terlepas dari jenisnya akan terdistribusi ke CDN. Hal ini membentu menjamin kecepatan pengiriman gambar toko anda ke pelanggan.

Tidak sama dengan file gambar yang self-hosted, anda tidak memiliki cara mengetahui lokasi server yang tepat untuk file gambar anda. Untungnya, anda tidak perlu khawatir tentang ini sebagaimana Shopify mengkhususkan filter Liquid asset_url akan menyediakan jalan untuk anda saat halaman anda berubah.

Meringkas jalur server penuh jauh ke filter juga berarti tema anda dapat dipindah secara penuh dari satu toko ke toko lainnya. URL yang benar dapat dimasukan tergantung pada tema dan toko yang telah dilihat.

Menambah Kelas ke Elemen img

Pada contoh di atas, kami telah menambahkan atribut alt melalui filter img_tag. Mungkin juga bisa menambah parameter lebih jauh yang membiarkan anda menambah kelas ke elemen img. Inilah kode kami yang telah difaktor ulang:

Ini akan membuahkan hasil berikut:

Kendali Lebih

Akan ada kejadian dimana anda memerlukan sedikit kendali lebih atas HTML anda. Dengan menghilangkan filter img_tag, kita bisa membuat tanda sesuai yang diinginkan.

Inilah pendekatan yang membolehkan anda menambahka atribut anda sendiri seperti id:

Mengacu Gambar di CSS dan JavaScript

Ini sangat mudah memakai aset ini di kedua file CSS dan JavaScript. Untuk melakukan ini tambahkan .liquid (e.g. style.css.liquid) ke file CSS atau JavaScript di folder aset anda dan mengacu ke gambarnya di fileCSS anda memakai kode Liquid yang sama dipakai di atas:

Gambar tema secara relatif mudah. Selama anda memahami bagaimana menggunakan asset_url, anda dapat memilihapakah menambah filter img_tag ekstra atau membangun elemen img anda sendiri atau tidak.

Produk, Koleksi dan Gambar Artikel

Sementara kami memiliko kontrol penuh atas gambar tema kami, kami berada dalam kekuasaan pemilik toko jika berkaitan dengan gambar produk. Untungnya Shopify berusaha keras agar membantu kami memperoleh kendali itu. Mari awali dengan melihat apa yang terjadi saat penjual mengunggah sebuah gambar di admin Shopify.

Studio Neat product image on their Neat Ice Kit product page
Gambar produk Studio Neat di halaman produk Neat Ice Kit

Setiap kali sebuah produk, koleksi, atau gambar artikel terunggah, Shopify mengambil gambar tersebut dan secara otomatis mengganti ukuran ke jumlah ukuran standar . Gambar-gambar ini diruangnamakan sehingga kami mudah merujuknya di tema kami.

Inilah daftar ukuran dengan nama gambarnya yang sesuai:

16 × 16
pico
32 x 32
icon
50 x 50
thumb
100 x 100
small
160 x 160
compact
240 x 240
medium
480 x 480
large
600 x 600
grande
1024 x 1024
1024 x 1024
2048 x 2048
2048 x 2048
Largest image
master

Mengganti Ukuran Otomatis

Nilai-nilai di atas mengkhususkan batas “maksimum” ukuran gambar. Semua gambar yang terukur ulang akan menyimpan rasio aspeknya dan akan terskala dengan sesuai.

Ini bisa berarti bahwa gambar “medium” memiliki lebar 240px namu tingginya hanya 190px dan demikian pula tinggi 240px tapi lebar 80px. Inilah alasan sebagian besar pengembang tema meminta klien mereka mengunggah gambar persegi karena akan menjadi lebih bisa diprediksi.

Ukuran gambar “master” akan selalu mengikuti ukuran terbesar yang tersedia dari servernya. Saat ini ukurannya 2048px x 2048px. Jika anda mengunggah sebuah gambar dengan ukuran yang lebih besar dari 2048px anda tidak bisa mengaksesnya ke bentuk aslinya.

Ini juga cukup baik dicatat bahwa keaslian gambar produk yang terunggah tidak pernah terskala dalam ukuran. Jika anda mengunggah gambar kecil, maka akan tetap menjadi kecil. Anda tentu bisa merujuk gambar dengan menggunakan nama gambar mana saja di atas. Tetapi, perhatikan jika anda meminta ukuran yang tidak mungkin dibuat maka anda akan diberikan ukuran yang paling mendekati yang tersedia.

Juga perlu diingat bahwa jika memanipulasi dengan CSS (contoh lebar: 100%) gambar mungkin terskala dan mungkin menjadi terpiksel (tergantung formatnya). Saat bekerja dengan klien, bujuk mereka agar mengunggah gambar persegi dengan resolusi tinggi bila mungkin.

Terakhir, perlu diingat bahwa kami tidak memiliki akses ke gambar produk di folder tema kami. Gambar tersebut tersimpang di Shopify CDN dan tetap terpasang ke toko terlepas dari tema yang telah diterapkan.

2. Menampilkan Gambar Produk

Tidak seperti gambar tema, gambar produk tidak membuat penggunaan asset_url. Agar hasil gambar produk kami dapat membuat penggunaan filter Liquid img_url. Hal ini dikarenakan kenyataan gambar produk dikaitkan ke toko dan bukan bagian dari aset tema.

img_url kembali ke URL sebuah gambar dan menerima ukuran gambar sebagai parameter. Ini bisa digunakan pada objek Liquid berikut:

  • produk
  • Varian
  • Barisan Item
  • Koleksi

Menggunakan filter img_url seperti berikut:

Tiap filter ini akan kembali ke URL berkualitas penuh ke gambar yang tersimpang di CDN Shopify.

Untuk mendemonstrasikan, mari perhatikan ke beberapa contoh kode Liquid dari template product.liquid khas. Karena template khusus ini memiliki akses ke variabel produk semua contoh ini akan bekerja. Tetapi, tolong perhatikan contoh-contohnya tidak akan bekerja sesuai dugaan di template lainnya.

Pada contoh pertama, nilai gambar akan memperlihatkan setiap gambar di koleksinya dan memiliki nilai yang berbeda melalui tiap pengulangan putaran Liquid kami. Variabel ini bisa dinamai tetapi anda memutuskan; saya menggunakan gambar seperti konteksnya yang masuk akal.

Setelah anda telah bekerja dengan tema untuk beberapa waktu anda mungkin menyadari filter lain yang digunakan dalam kaitannya ke gambar produk. Inilah beberapa alternatif yang bisa digunakan pada contoh kami di atas, setiap manapun itu akan memiliki hasil yang sama:

Keseluruhannya tergantung kepada anda mana yang anda pilih untuk dipakai. Jika anda lebih suka satu metode dari lainnya, anda bisa selalu menaruh komentar menggunakan {% komentar %}….{% akhirkomentar %} menjelaskan pilihan anda. Hal ini berguna terutama saat berkolaborasi pada tema. Menampilkan gambar varian produk

Menampilkan gambar varian produk

Sebagai tambahan gambar produk juga memungkinkan menampilkan gambar yang berkaitan dengan varian produk. Sebuah varian bisa dijelaskan sebagai variasi produk. Katakan kami memiliki kaos dengan sablon khusus. Kaos ini mungkin menjadi hijau, biru dan merah. Sementara sablonnya yang tetap berwarna sama dengan warna kaosnya sendiri yang berbeda. Padahal masih produk yang sama, namun kami telah memutuskan agar membolehkan pelanggan memilih dari beberapa opsi. Sudah pasti ukuran dan warna.

Varian juga memiliki harganya sendiri dan tingkatan inventarisnya. Memungkinkan untuk menghubungkan gambar khusus ke tiap varian-sebagai tambahan ke gambar produk. Jika tema anda menggunakan gambar varian, anda dapat menampilkannya dengan cara berikut dengan template roduct.liquid:

alt Atribute

Jika anda ingin menambah atribut alt ke hasilnya, anda bisa melakukan ini:

Ini akan menghasilkan teks alt masuk ke admin Shopify, atau kosong jika tidak ada yang dimasukkan. Secara alternatif, anda bisa melakukannya jika anda memilih untuk menggunakan filter img_tag:

Gambar Fitur

Pada contoh kami di atas, kami menggunakan putaran Liquid untuk mengakses setiap gambar yang terhubung dengan produk. Jika produk memiliki satu gambar, kami akan menghasilkan satu gambar, jika produk memiliki sepuluh yang tergabung maka putarannya akan mengeluarkan sepuluh gambar.

Pada Shopify gambar pertama terdaftar di admin juga diketahui sebagai “gambar fitur”. Untungnya mengeluarkan “gambar fitur” ini baik dan mudah dan tidak memerlukan putaran. Inilah contoh yang akan bekerja pada template product.liquid:

Selalu ada cara alternatif yang anda bisa capai, termasuk:

Anda juga bisa memperluas sintaksis agar memasukkan atribut alt ke contoh kedua dan ketiga:

3. Gambar Koleksi

Saya sering menggambarkan sebuah koleksi di Shopify sebagai golongan logis produk. Contoh bisa kaos, jeans, dan gaun untuk toko pakaian. Sebuah produk bisa berada di nol, satu atau banyak koleksi, digunakan untuk penggolongan dan penemuan yang mudah.

Helm Boots make use of collection images to guide customers into different areas of their store
Helm Boots membuat kegunaan gambar koleksi agar memandu pelanggan ke area yang berbeda-beda dari toko mereka.

Penjual seringkali ingin memasukkan sebuah halaman ke toko mereka merinci semua koleksi mereka yang ada. Templatenya yang membuat hal ini menjadi mungkin di Shopify adalah daftar collections.liquid. Ini adalah contoh bagaimana anda dapat memutar setiap koleksi dan mengeluarkan gambar terhubung dari dalam template itu:

Anda dapat memperluas contoh ini lebih jauh agar menjamin anda memenuhi situasi dimana gambar koleksi tidak ditambahkan:

Pada contoh ini, kami menggunakan gambar tema di tempat gambar koleksi. Ini hanya akan tersambung jika tidak ada gambar koleksi terhubung. Agar hal ini bekerja sesuai yang diharapkan, anda perlu memastikan ada gambar berjudul collection-image-default.png di dalam folder aset tema anda.

4. Gambar Artikel

Gambar artikel berfungsi banyak dengan cara yang sama seperti gambar produk dan koleksi. Inilah contohnya:

The Shopify Partner Blog uses article images to provide hero images for each post
Blog Shopify Partner menggunakan gambar artikel untuk menyediakan gambar hero untuk tiap post.

Jika artikel memiliki gambar terhubung maka akan muncul dan diberi atribut alt judul artierl. Ada beberapa cara gambar koleksi dan artiker bisa menjadi berguna:

  • Membuat grid gambar di halaman daftar
  • Menggunakan gambar latar yang bisa anda taruh teks

Gambar Terunggah melalui “Menyesuaikan Tema”

Bagian akhir berkaitan dengan gambar terunggah melaui opsi “Menyesuaikan Tema”.

Setiap tema memiliki folder konfigurasi. Disitu anda akan menemukan file bernama settings_schema.json. File ini membantu menghasilkan antarmuka admin yang memperbolehkan penjual menambah data seperti teks, nilai boolean (benar/salah), memilih huruf, mengunggah gambar dan sebagainya. Kami dapat menegaskan elemen antarmuka ini menggunakan JSON.

Membolehkan mengunggah gambar, anda perlu menambah elemen baru ke file settings_schema.json dalam format berikut:

Inilah contoh berdasarkan penambahan logo untuk toko:

Gambar terunggah melalui halaman “Menyesuaikan Tema” ditambahkanc ke folder aset tema. Saya tidak memasukkannya sebagai jenis gambar yang terpisah di awal artikel.

File gambar tersimpan dengan nama dan format yang menyesuaikan atribut id terlepas dari nama atau format asli file. Sebagai contoh, file image.jpg akan tersimpan sebagai shop_logo.png. Shopify akan mencoba mengubah file yang terunggah ke format yang sesuai (.png) sebelum menyimpannya. Jika Shopify tidak mampu mengubah file ke file .png, maka pengguna akan menerima pesan eror di admin.

Anda akan menyadari bahwa jenis masukan adalah gambar yang hasilnya dalam tombol unggah yang muncul di browser. Anda juga bisa menggolongkan tinggi dan lebar maksimum untuk sebuah gambar unggahan dengan menggunakan atribut data. Shopify akan mempertahankan rasio aspek gambar yang terunggah saat memaksanya ke dimensi maksimum.

Merujuk gambar yang ditambahkan via “Membuat Tema” telah selesai dengan cara yang sama seperti gambar tema lainnya:

Ruang Nama Menyesuaikan Unggahan Tema

Satu hal yang anda mungkin ingin pertimbangkan adalah menggunakan atribut id ke “ruangnama” unggahan pengaturan tema anda. Cara ini mudah ditempatkan di folder aset karena akan digabungkan bersama. Ini juga membantu secara tidak langsung menimpa file yang anda tambahkan ke tema anda.

Saya sering memakai awalan ct- seperti:

Gambar Persegi Terpotong

Di pertengahan tahun 2015, Jason Bowman menyadari bahwa percobaan Shopify telah menampilkan gambar persegi terpotong. Anda bisa membaca tentang penemuannya pada blog Freak Desain miliknya.

Investigasi Jason membawanya menemukan semua gambar percobaan telah dilampirkan dengan _cropped. Inilah contohnya:

tes-memotong-produk-011_1024x1024.jpg

Saat terpotong menjadi:

tes-memotong-produk-001_1024x1024_cropped.png

Pemotongannya berlaku untuk semua ukuran kecuali Master. Untuk menggunakan gambar terpotong, kami manambah _cropped ke filter img_tag kami. Inilah contoh untuk gambar fitur produk:

Di saat sedang menulis, ini tidak terdokumentasi maka pasti ada kemungkinan berubah, namun saya ingin memasukkannya.

Pemikiran Terakhir

Kami telah merangkum banyak dasar pada artikel ini namun diharapkan dapat menunjukkan kepada anda fleksibilitas Shopify saat berhubungan ke bekerja dengan gambar di sebuah tema.

Gambar adalah bagian integral di toko komersial manapun. Pemahaman bagaimana gambar diatur dan dimanipulasi di tema Shopify merupakan bagian penting pembelajaran tentang Liquid dan platform Shopify.

Diharapkan anda akan menyetujui bahwa alat di dalam platform Shopify dan Liquid memberi anda banyak fleksibilitas ketika berkaitan dengan gambar di tema anda.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.