Membuat gambar postingan valid AMP~perlu diketahui juga postingan gambar itu terbagi menjadi dua jenis, yaitu gambar yang nantinya digunakan untuk thumbnail dan gambar tambahan atau selain thumbnail. Kedua jenis gambar di atas berbeda kodenya dalam template berbasiskan AMP. Oleh karenanya, sahabat BLOGSGOBLOG harus memperhatikan dengan saksama dan juga teliti.
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.