Membuat gambar thumbnail postingan valid amp

Salah satu hal yang berbeda antara kode html dan kode amp adalah image atau gambar. Jika kode html biasanya menggunakan img, maka kode amp menggunakan amp-img. Karena perbedaan inilah menjadikan postingan html tidak sejalan dengan postingan AMP. Jika kode tersebut tidak disesuaikan maka yang terjadi adalah munculnya eror pada template berbasis AMP. Oleh karenanya, pada kesempatan ini, BLOGSGOBLOG akan berbagi cara membuat gambar [thumbnail] valid AMP dengan benar.

Inilah kode dasar image valid

<img alt='gambar' src='url-image'/>

1.  Gambar Thumbnail/gambar utama

Gambar thumbnail adalah gambar yang muncul pada thumbnail. Gambar ini biasanya berada paling depan/atas. Gambar ini akan muncul di halaman utama/homepage. Untuk memunculkan thumbnail pada template berbasiskan AMP, maka gunakanlah kode berikut ini di dalam HTML postingan  bukan compose saat memposting:

<noscript><img width="1080" height="610" alt='gambar' src='url-gambar-anda'/></noscript>

2.Gambar selain Thumbnail/gambar pelengkap di dalam postingan

Gambar selain thumbnail adalah gambar tambahan. Gambar ini tidak muncul di halaman utama/homepage. Untuk kodenya adalah sebagai berikut: [tulis di HTML di dalam postingan bukan compose]

<amp-img src="url gambar.png"

width="500"

height="300"

layout="responsive"

alt="gambar">

</amp-img>

untuk memsukan gambar agar berada di sebelah kiri, tengah, atau kanan, gunakan kode. <div class="center"> kalo ingin gambar berada di sebelah kiri, Ganti tulisan center menjadi Left dan kalo ingin gambar di sebelah kanan, ganti tulisan center menjadi right

Cukup mudah bukan.Itulah cara Membuat gambar postingan valid amp.

Semoga bermanfaat.