Mengenai Fitur Terbaru amp-auto-lightbox pada AMP HTML
Penjelasan dan Penerapan Fitur amp-auto-lightbox pada AMP HTML
Setiap harinya, developer dan kontributor AMP Project bekerja untuk memperbaharui ataupun menambah fitur pada AMP HTML. Dan baru-baru ini, seorang kontributor AMP Project di github menjelaskan tentang fitur atau komponen terbaru dari AMP HTML. Fitur atau komponen ini dinamakan dengan
amp-auto-lightbox saat ini akan aktif ketika seorang pengunjung Web AMP mengunjungi halaman tersebut dari Google, atau dari URL
amp-auto-lightbox. Apa itu? Kita akan bahas di artikel ini.Fungsi amp-auto-lightbox
Auto-Lightbox ala AMP ini memiliki fungsi untuk secara otomatis mendeteksi gambar dan menempatkan gamabr tersebut menjadi lightbox. Sederhananya, ketika pengunjung mengklik salah satu gambar yang ada pada artikel, maka akan muncul modal popup gambar tersebut (lightbox).amp-auto-lightbox saat ini akan aktif ketika seorang pengunjung Web AMP mengunjungi halaman tersebut dari Google, atau dari URL
google.com/amp/:url atau http://*.cdn.ampproject.orgJika anda pernah membaca artikel Cara Simple Mengaktifkan Image Lightbox pada AMP Blogger, di artikel tersebut saya menjelaskan cara memengaktifkan lightbox untuk amp-img. Dimana anda cukup memasukan komponen amp-lightbox-gallery dan menambahkan atribut ligthbox pada amp-img.
Tapi, dengan adanya komponen amp-auto-lightbox pekerjaan kita tampaknya akan lebih mudah jika ingin mengaktifkan fitur image lightbox. Karena, kita tidak perlu lagi secara manual menambahkan atribut lightbox pada amp-img.
Tapi fitur amp-auto-lightbox ini masih dalam mode experimental, meskipun di github sudah dinyatakan rolled out. Jika dilihat pada halaman pengaktifan amp experimental pun memang komponen ini masih dalam tahap experimental.
Selain itu, ada beberapa "syarat" agar gambar dalam sebuah artikel bisa secara otomatis diklik dan muncul dalam lightbox. Saya akan jelaskan di bawah ini.
Tapi fitur amp-auto-lightbox ini masih dalam mode experimental, meskipun di github sudah dinyatakan rolled out. Jika dilihat pada halaman pengaktifan amp experimental pun memang komponen ini masih dalam tahap experimental.
Selain itu, ada beberapa "syarat" agar gambar dalam sebuah artikel bisa secara otomatis diklik dan muncul dalam lightbox. Saya akan jelaskan di bawah ini.
Ketentuan Gambar untuk Auto-Lightbox
Ada beberapa syarat atau ketentuan jika gambar ingin secara otomatis bisa diklik dan muncul dalam lightbox. Diantaranya:- Gambar ada dalam opengraph atau schema dengan type Article, NewsArticle, BlogPosting, LiveBlogPosting, DiscussionForumPosting.
- Gambar tidak dalam tag
<a href>, <button>, <amp-selector> - Pada tag <amp-img> tidak terdapat atribut on="tap: ..." action
- Gamabar juga tidak akan mendapatkan amp-auto-lightbox ketika dalam salah satu dari komponen berikut:amp-script, amp-story, amp-lightbox.
- Yang paling penting, amp-auto-lightbox saat ini akan aktif ketika seorang pengunjung Web AMP mengunjungi halaman tersebut dari Google, atau dari URL
google.com/amp/:urlatau http://*.cdn.ampproject.org
Cara Mengaktifkan amp-auto-lightbox
Untuk saat ini, anda tidak perlu menambahkan komponen AMP apapun untuk mengaktifkan fitur
amp-auto-lightbox ini.Mencegah auto-lightbox aktif
Adapun cara untuk mencegah komponen amp-auto-lightbox mengaktifkan auto lightbox pada gambar di halaman website anda. Caranya cukup mudah, anda cukup menambahkan atribut
data-amp-auto-lightbox-disable pada gambar maupun tag induk nya. Contoh, jika anda ingin memblokir auto lightbox di seluruh halaman website:
< body data-amp-auto-lightbox-disable> Jika di bagian atau section tertentu:
<div id="main-wrapper" data-amp-auto-lightbox-disable>Atau jika hanya di gambar tertentu, maka seperti contoh berikut ini:
<amp-img src="../image/example.jpg" data-amp-auto-lightbox-disable=""> </amp-img>Bagaimana teman-teman, menurut kalian fitur terbaru AMP HTML ini membantu tidak? Yuk beri komentar dan diskusi. Semoga bermanfaat :)