 |
| Source: jagodesain.com |
Perbedaan yang paling jelas dari template AMP dan non-AMP adalah penulisan kode gambar dari yang 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.
Penggunaan tag <noscript> (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.
Mengingat browser pada saat ini sudah semakin canggih maka penggunaan 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 gambar thumbnail yang tidak muncul pada AMP Blogger
Untuk menampilkan kembali thumbnail pada blogger diperlukan tag <noscript>...</noscript> tapi Anda tidak perlu menambahkan tag ini disetiap gambar pada artikel.
Hanya tambahkan tag ini satu kali pada gambar yang ingin anda jadikan thumbnail sehingga keseluruhan kodenya akan menjadi seperti dibawah ini:
<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.