Lewati ke konten utama

Template Prabuka

Template prabuka memungkinkan Anda untuk mengatur parameter gambar yang digunakan dalam atribut. Dengan menerapkan template pada atribut dengan tipe "Gambar" atau "Grup Gambar", Anda akan mendapatkan gambar yang disesuaikan dengan standar yang ditentukan dalam template prabuka. Ini sangat berguna jika desain proyek Anda sensitif terhadap ukuran gambar. Dengan mengatur template prabuka, Anda dapat mengubah parameter gambar yang akan dilihat oleh pengguna akhir.

Untuk mulai bekerja dengan template prabuka, buka bagian "Pengaturan" dan kemudian pergi ke subbagian "Template Prabuka". Di bagian ini terdapat daftar template yang sudah dibuat, serta formulir untuk membuat yang baru.

Pembuatan​

Di formulir pembuatan, silakan isi:

  • Nama - String yang tidak unik.
  • Penanda - String yang unik.

Setelah mengisi, tekan tombol "Buat"

Pengaturan​

Pilih dari daftar umum template prabuka yang ingin Anda atur dan tekan ikon roda gigi Optimize images untuk masuk ke mode pengeditan. Untuk membuat parameter prabuka, tekan tombol "Tambah". Anda dapat mengatur format untuk gambar vertikal, horizontal, dan persegi.

Di formulir yang sesuai, isi:

  • Lebar dan Tinggi (Sisi Persegi) - Ukuran dalam piksel, di mana gambar akan dimuat.
  • Jenis Pusat - Garis yang akan menjadi sumbu tengah saat gambar dikompresi.

Template Default​

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

Penghapusan​

Pilih dari daftar umum template prabuka yang ingin Anda hapus dan tekan ikon penghapusan Edit untuk masuk ke mode pengeditan. Konfirmasikan tindakan di jendela dialog.

LQTP​

Setiap template prabuka terdiri dari array dua elemen:

  • Miniatur (base64 WebP)

Format: WebP (dioptimalkan untuk pemuatan cepat). Ukuran: tidak lebih dari beberapa ratus byte. Ditanamkan langsung ke dalam objek dalam bentuk base64-URI, yang mempercepat tampilan, sementara gambar lengkap masih dimuat.

  • Prabuka yang Dihasilkan Gambar utama prabuka yang menggantikan miniatur setelah pemuatan lengkap.

Keuntungan:

  • Tampilan miniatur instan (tanpa permintaan HTTP tambahan).
  • Transisi mulus ke prabuka penuh setelah pemuatan.
  • Penghematan trafik dengan menggunakan WebP terkompresi.

Contoh struktur:

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

Pendekatan ini meningkatkan pengalaman pengguna, terutama saat koneksi internet lambat.

Lebih lanjut tentang LQTP dapat ditemukan di sini. Anda juga dapat menonton video