Monday, April 29, 2019

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. 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.org

    Jika 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.

    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/:url atau 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 :)

    Disqus Comments