Ikuti Cara Menampikan Gambar Pada AMP Blogger

Ensiklopedi Otomotif - Kali ini Cara Menampikan Gambar Pada AMP Blogger akan saya bahas. Artikel ini berlaku unutk anda blogger yang menggunakan template AMP HTML.

Anda akan melihat perbedaan yang paling jelas dari template AMP dan non-AMP adalah penulisan kode gambar dari yang biasa. Jika pada template non-amp 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'/>

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

Penggunaan tag <noscript> (opsional)

Perbedaan dasarnya ada pada 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

Ada dua jenis gambar yang ditampilkan pada laman blog, antara lain: gambar thumnail pada related post atau pada menu home, dan gambar pada saat artikel dibuka, pembaca sedang membuka sebuah artikel.

Kita menggunakan script berbeda untuk masing-masing fungsi ini. Untuk menampilkan thumbnail pada blogger diperlukan tag <noscript>...</noscript> tapi Anda tidak perlu menambahkan tag ini disetiap gambar artikel pada menu home dan related post.

Sementara untuk menampilkan gambar pada halaman artikel kita hanya harus menambahkan 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.