Lewati ke konten utama

Template Prabaca

Template prabaca memungkinkan Anda untuk mengonfigurasi parameter gambar yang digunakan dalam atribut. Dengan menerapkan template pada atribut bertipe "Gambar" atau "Grup Gambar," Anda akan mendapatkan gambar yang distandarisasi sesuai dengan spesifikasi yang ditetapkan dalam template prabaca. Ini sangat berguna jika desain proyek Anda sensitif terhadap ukuran gambar. Dengan mengonfigurasi template prabaca, Anda dapat memodifikasi parameter gambar yang akan dilihat oleh pengguna akhir.

Untuk memulai dengan template prabaca, buka bagian "Pengaturan" dan kemudian navigasikan ke subbagian "Template Prabaca". Di bagian ini, Anda akan menemukan daftar template yang sudah dibuat, serta formulir untuk membuat yang baru.

Pembuatan​

Dalam formulir pembuatan, tentukan:

  • Nama - Sebuah string yang tidak unik.
  • Penanda - Sebuah string yang unik.

Setelah mengisi detailnya, klik tombol "Buat".

Konfigurasi​

Pilih template prabaca yang ingin Anda konfigurasi dari daftar umum dan klik ikon roda gigi Optimize images untuk masuk ke mode edit. Untuk membuat parameter prabaca, klik tombol "Tambah". Anda dapat mengonfigurasi format untuk gambar vertikal, horizontal, dan persegi.

Di formulir yang sesuai, isi:

  • Lebar dan Tinggi (Sisi Persegi) - Dimensi dalam piksel yang akan dimuat gambar.
  • Jenis Pusat - Garis yang akan menjadi sumbu pusat saat mengompresi gambar.

Template Default​

Setelah membuat beberapa set dalam satu template, Anda dapat mengganti template default. Template ini digunakan untuk menampilkan prabaca di CMS.

Penghapusan​

Pilih template prabaca yang ingin Anda hapus dari daftar umum dan klik ikon hapus Edit untuk masuk ke mode edit. Konfirmasikan tindakan dalam kotak dialog.

LQTP​

Setiap template prabaca terdiri dari array dua elemen:

  • Thumbnail (base64 WebP)

Format: WebP (dioptimalkan untuk pemuatan cepat). Ukuran: tidak lebih dari beberapa ratus byte. Ini disematkan langsung ke dalam objek sebagai base64-URI, yang mempercepat rendering sementara gambar penuh masih dimuat.

  • Prabaca yang Dihasilkan Gambar prabaca utama yang menggantikan thumbnail setelah sepenuhnya dimuat.

Keuntungan:

  • Tampilan thumbnail instan (tanpa permintaan HTTP tambahan).
  • Transisi halus ke prabaca penuh setelah pemuatan.
  • Penghematan lalu lintas karena penggunaan WebP terkompresi.

Contoh struktur:

{
  "preview_template": [
    "data:image/webp;base64,UklGRl...", // Thumbnail (base64 WebP)  
    "https://example.com/full-preview.jpg" // Prabaca penuh  
  ]
}

Pendekatan ini meningkatkan pengalaman pengguna, terutama pada koneksi internet yang lambat.

Anda dapat mempelajari lebih lanjut tentang LQTP di sini. Anda juga dapat menonton video.