Cara membuat gambar AMP bisa di klik

Gambar di AMP sampai saat ini belum mendukung Image Lightbox ( Gambar akan membesar ketika di klik ). Ini cukup mengganggu bagi sobat yang punya blog tutorial, padahal kita sudah membuat gambar dengan resulusi tinggi tapi ketika di buka di perangkat mobile gambar tersebut berubah responsive alias menyesuaikan lebar layar, alhasil detail pada gambar tidak kelihatan.

Sebenarnya blogger memiliki fitur ini tapi tak bisa kita manfaatkan kalau blog kita menggunakan template AMP. duh sayang sekali padahal fitur itu sangat membantu dan membuat blog terlihat semakin keren.

Saat menulis di Warta Kemiri.com teman saya ada yang menanyakan kenapa gambarnya tak bisa diklik, karena belum nemu caranya akhirnya saya jawab saja bahwa formatnya memang seperti itu.

Cara membuat gambar AMP bisa di klik

Satu kekurangan dari efek Lightbox AMP adalah tak punya navigasi kanan kiri untuk melihat gambar selanjutnya di postingan.

Caranya cukup tambahkan kode on="tap:lightbox1" role="button"  tabindex="0" sehingga kode gambar amp akan tampak seperti ini :

<amp-img src="#" alt="#" height="350"      width="650" layout="responsive"  on="tap:lightbox1" role="button"    tabindex="0" ></amp-img>

Nah untuk penggunaan gambar berformat webp ( loading gambar lebih cepat ) yang nalagila gunakan untuk gambar di postingan ( bukan thumbnail ) adalah sebagai berikut:
Kode gambar format webp untuk blog AMP yang tidak bisa diklik ( yang saya pakai selama ini ).
<amp-img alt="Cara membuat gambar AMP bisa di klik" height="600" layout="responsive" src="https://lh3.googleusercontent.com/-1cBKYEGsENU/XBmGxCek53I/AAAAAAAACuI/vlK6VpFOwcwKvOUbW5yWD4uUaBPt_N37QCLcBGAs/s1600-rw/gambar%2BAMP%2Btidak%2Bbisa%2Bdi%2Bklik.jpg" title="Cara membuat gambar AMP bisa di klik" width="1000">
  <amp-img alt="Cara membuat gambar AMP bisa di klik" fallback="" height="600" layout="responsive" src="https://lh3.googleusercontent.com/-1cBKYEGsENU/XBmGxCek53I/AAAAAAAACuI/vlK6VpFOwcwKvOUbW5yWD4uUaBPt_N37QCLcBGAs/s1600/gambar%2BAMP%2Btidak%2Bbisa%2Bdi%2Bklik.jpg" title="Cara membuat gambar AMP bisa di klik" width="1000"></amp-img>
</amp-img>

Hasilnya :

Ini adalah kode gambar format webp yang sudah dilengkapi Lightbox AMP dan bisa diklik.
<amp-img alt="Cara membuat gambar AMP bisa di klik" height="600" layout="responsive" on="tap:lightbox1" tabindex="0" role="button" src="https://lh3.googleusercontent.com/-cdt-_c7lYf0/XBmFiofqHXI/AAAAAAAACt8/d8gDn_P7kssM9L9VmOpOX-F-q3zvJcQawCLcBGAs/s1600-rw/gambar%2BAMP%2Bbisa%2Bdi%2Bklik.jpg"  title="Cara membuat gambar AMP bisa di klik" width="1000">
  <amp-img alt="Contoh gambar blogger menjadi webp" fallback="" height="600" layout="responsive" on="tap:lightbox1" tabindex="0" role="button" src="https://lh3.googleusercontent.com/-cdt-_c7lYf0/XBmFiofqHXI/AAAAAAAACt8/d8gDn_P7kssM9L9VmOpOX-F-q3zvJcQawCLcBGAs/s1600/gambar%2BAMP%2Bbisa%2Bdi%2Bklik.jpg" title="Cara membuat gambar AMP bisa di klik" width="1000"></amp-img>
</amp-img>

Hasilnya :

 Sekian tutorial cara membuat gambar AMP bisa diklik dan tetap valid AMP tentunya. semoga bermanfaat.

Referensi : Kompiajaib
Reaksi:

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser