Cara Memposting Gambar [Thumbnail] valid AMP (Accelerated Mobile Pages)

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, Ngonline06 akan berbagi cara memposting gambar [thumbnail] valid AMP dengan benar.

DEMO TEMPLATE VALID AMP

Inilah kode dasar image valid AMP:

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

Sebagaimana telah diketahui bahwa Ngonline06 telah berbagi template blogspot yang valid AMP, maka sudah tentunya untuk memposting sebuah postingan pun harus benar dan valid pula amp-nya. Tak terkecuali kode image atau gambar. Dan, 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 Ngonline06 harus memperhatikan dengan saksama dan juga teliti.

1. Gambar Thumbnail

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 template, bukan compose saat memposting:

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

2. Gambar selain Thumbnail

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

<amp-img src="url-image-disini"
    width="1080"
    height="610"
    layout="responsive"
    alt="AMP HTML"></amp-img>

Silahkan sahabat Ngonline06 atur sendiri ukuran width dan heightnya sesuai selera, baik pada gambar thumbnail ataupun selain thumbnail. INGAT, yang membedakan antara thumbnail dan bukan hanya tambahan kode 'noscript' saja.

Demikian cara memposting gambar [thumbnail] valid AMP. Selamat mencoba dan semoga berhasil. Silahkan coret-coret kotak komentar jika ada kesulitan.