Menampilkan Gambar Pada Blogger AMP

Pada artikel sebelumnya saya pernah membahas mengenai Google AMP sekarang mimin akan memberikan tutorial Cara Menampilkan Gambar di AMP Blogger. Perbedaan yang menonjol dari blog AMP dan Non AMP yaitu kode gambar yang tidak biasa jika pada biasanya untuk menampilkan gambar menggunakan tag <img .../> maka pada template AMP penulisannya adalah seperti dibawah ini:

<amp-img alt='alt_image_disini' title='judul_image_disini' src='url_image_disini' width='xxx' layout='responsive' height='xxx'/>

Beberapa pilihan layout yang tersedia antara lain :fill, fixed, fixed-height, flex-item, nodisplay, responsiveYang paling umum dipakai adalah layout responsive selain lebih mudah gambar yang ditampilkan juga menyesuaikan dengan layar.

Apa Fungsi Tag <nonscript> (opsional) 

Pada dasarnya tag <noscript>...</noscript> digunakan sebagai alternatif(pengganti) untuk menampilkan konten atau element lain apabila javascript tidak berfungsi atau dinonaktifkan pada browser yang digunakan oleh user.

Sekarang ini pengguna browser makin canggih walaupun sekarang walaupun tanpa kode 

tag <noscript> sudah tidak diperlukan lagi, termasuk untuk penulisan gambar pada template AMP blogger walaupun tanpai tag ini gambar akan tetap muncul hanya saja pada Blogger hanya membaca gambar dengan tag <img .../>, akibatnya gambar thumbnail postingan pada homepage tidak akan muncul.

Mengatasi Thumbnail Tidak Muncul di AMP

<amp-img alt='alt_image_disini' title='judul_image_disini' src='url_image_disini' width='xxx' layout='responsive' height='xxx'/>
<noscript><img alt='alt_image_disini' title='judul_image_disini' src='url_image_disini'/></noscript>

Semoga bermanfaat.