Komponen Gallery — Tampilkan Banyak Foto dalam Satu Seksi

Apa itu: Komponen untuk menampilkan kumpulan foto dalam format grid (banyak foto sekaligus) atau slider (foto bergulir satu per satu). Kapan pakai: Saat kamu ingin memperlihatkan foto produk, portofolio, testimoni berbentuk gambar, atau perbandingan sebelum/sesudah.

Apa itu Gallery?

Gallery adalah komponen media yang memungkinkan kamu menampilkan banyak gambar sekaligus dalam tata letak yang terstruktur. Berbeda dengan komponen Image yang hanya menampilkan satu gambar, Gallery dirancang untuk koleksi — dari 2 foto produk sampai puluhan foto portofolio.

Dua mode yang tersedia — Grid dan Slider — memberi kamu fleksibilitas untuk menyesuaikan tampilan dengan kebutuhan: grid untuk memperlihatkan banyak foto sekaligus, slider untuk pengalaman browsing yang lebih fokus.

Kapan Pakai Gallery?

• Foto produk — berbagai sudut pandang, warna, atau varian produk fisik
• Portofolio — hasil karya, desain, atau proyek yang sudah selesai
• Before/After — dua gambar yang menunjukkan perbandingan sebelum dan sesudah
• Dokumentasi event — foto dari acara, workshop, atau gathering
• Testimoni visual — screenshot hasil atau foto pelanggan menggunakan produk

Properties

Property	Tipe	Default	Penjelasan
Layout	Pilihan	Grid	Mode tampilan: Grid atau Slider
Columns	Pilihan (2–4)	3	Jumlah kolom (hanya untuk Grid)
Content Alignment	Pilihan	Center	Rata konten (berlaku kalau ada caption)
Gap	Angka (px/rem)	16px	Jarak antar foto
Object Fit	Pilihan	Cover	Cara gambar mengisi area: Cover, Contain, Fill, Scale Down
Aspect Ratio	Pilihan	Auto	Rasio aspek setiap gambar
Items	Daftar gambar	—	Kumpulan gambar yang ditampilkan

Per Item

Setiap gambar di gallery punya field berikut:

Field	Tipe	Penjelasan
Image	Upload	File gambar yang diupload
Alt Text	Teks	Deskripsi gambar untuk aksesibilitas dan SEO
Caption	Teks (opsional)	Keterangan gambar yang tampil di bawah foto

Layout: Grid vs Slider

Aspek	Grid	Slider
Semua foto langsung terlihat	Ya	Tidak (satu per satu)
Cocok untuk	4–12 foto, portofolio, showcase produk	2–6 foto, hero gallery, before/after
Interaksi	Tidak ada (statis)	Swipe / tombol navigasi
Fokus visual	Keseluruhan koleksi	Satu foto dalam satu waktu

Columns (untuk Grid)

Kolom	Cocok untuk
2	Before/after, perbandingan dua produk, atau foto dengan detail banyak
3	Paling umum — foto produk, portofolio ringan
4	Thumbnail kecil, banyak foto, atau layar lebar

Di mobile, kolom akan otomatis dikurangi (mis. 4 kolom → 2 kolom) agar tidak overflow. Lihat panduan responsive sizing untuk tips lebih lanjut.

Object Fit

Properti ini menentukan bagaimana gambar mengisi kotak yang sudah ditentukan oleh Aspect Ratio.

Nilai	Perilaku	Gunakan untuk
Cover	Memotong sisi gambar agar mengisi penuh (crop center)	Foto produk, potret — yang penting bagian tengah terlihat
Contain	Gambar terlihat seluruhnya dengan sisi kosong	Logo, infografis, diagram — tidak boleh terpotong
Fill	Gambar diregangkan mengisi penuh (bisa distorsi)	Hindari kecuali kamu yakin semua gambar rasio sama
Scale Down	Kombinasi None dan Contain, pilih yang lebih kecil	Gambar-gambar dengan ukuran sangat bervariasi

Aspect Ratio

Rasio aspek yang konsisten membuat grid terlihat rapi. Pilih satu rasio dan gunakan untuk semua foto di gallery itu.

Rasio	Proporsi	Cocok untuk
Auto	Ikuti dimensi asli gambar	Pakai hanya kalau semua foto punya rasio sama persis
1/1	Kotak persegi	Foto produk Instagram-style
4/3	Landscape standar	Foto kamera biasa
16/9	Widescreen	Video thumbnail, foto landscape outdoor
3/4	Portrait	Foto fashion, potret orang, cover buku

Gap

Jarak antar foto dalam grid. Default 16px biasanya sudah cukup. Naikkan ke 24–32px untuk tampilan yang lebih "airy" dan premium; turunkan ke 4–8px untuk efek mosaic yang rapat.

Style Universal

Gallery mendukung semua properti style umum (margin, padding, background, border, radius, shadow, hide on mobile/desktop, custom CSS). Lihat panduan lengkapnya di Style Universal.

Contoh Penggunaan

Contoh 1 — Foto Produk (Grid 3 Kolom, Rasio 1/1)

Enam foto produk tas dari berbagai sudut pandang disusun dalam Layout Grid 3 kolom dengan Aspect Ratio 1/1 (kotak), Object Fit Cover, dan Gap 12px. Semua foto berrasio kotak sehingga grid terlihat seragam dan profesional. Setiap item diisi alt text deskriptif ("Tas kulit cokelat tampak depan", "Interior tas dengan kompartemen", dll.) untuk SEO.

Contoh 2 — Slider Portfolio (16:9, dengan Caption)

Tiga hingga lima foto hasil desain interior ditampilkan dalam Layout Slider dengan Aspect Ratio 16/9, Object Fit Cover, dan Gap 0. Setiap item dilengkapi caption nama proyek (misalnya "Proyek: Ruang Tamu Minimalis, Jak-Sel 2024") yang tampil di bawah foto. Pengunjung menggeser kiri-kanan untuk melihat foto berikutnya.

Contoh 3 — Before/After (Grid 2 Kolom)

Dua foto perbandingan perawatan kulit — "Sebelum" dan "Sesudah" — dalam Layout Grid 2 kolom, Aspect Ratio 3/4 (portrait), Object Fit Cover, Gap 8px. Caption "Sebelum" dan "Sesudah" muncul di bawah masing-masing foto untuk memperjelas konteks perbandingan.

Tips & Gotchas