Cara Memposting Gambar [Thumbnail] Valid Amp (Accelerated Mobile Pages)

Cara Memposting Gambar [Thumbnail] Valid Amp (Accelerated Mobile Pages)

Salah satu hal yang berbeda antara arahan html dan arahan amp yakni image atau gambar. Jika arahan html biasanya memakai img, maka arahan amp memakai amp-img. Karena perbedaan inilah menimbulkan postingan html tidak sejalan dengan postingan AMP. Jika arahan tersebut tidak diubahsuaikan maka yang terjadi yakni munculnya eror pada template berbasis AMP. Oleh karenanya, pada kesempatan ini, akan membuatkan cara memposting gambar [thumbnail] valid AMP dengan benar.

DEMO TEMPLATE VALID AMP

Inilah arahan dasar image valid AMP:

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

Sebagaimana telah diketahui bahwa telah membuatkan template blogspot yang valid AMP, maka sudah tentunya untuk memposting sebuah postingan pun harus benar dan valid pula amp-nya. Tak terkecuali arahan image atau gambar. Dan, perlu diketahui juga postingan gambar itu terbagi menjadi dua jenis, yaitu gambar yang nantinya dipakai untuk thumbnail dan gambar suplemen atau selain thumbnail. Kedua jenis gambar di atas berbeda kodenya dalam template berbasiskan AMP. Oleh karenanya, sobat harus memperhatikan dengan saksama dan juga teliti.

1. Gambar Thumbnail

Gambar thumbnail yakni 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 arahan berikut ini di template, bukan compose ketika memposting:

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

2. Gambar selain Thumbnail

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

<amp-img src="url-image-disini"     width="1080"     height="610"     layout="responsive"     alt="Salah satu hal yang berbeda antara arahan html dan arahan amp yakni image atau gambar Cara Memposting Gambar [Thumbnail] valid AMP (Accelerated Mobile Pages)"></amp-img>

Silahkan sobat atur sendiri ukuran width dan heightnya sesuai selera, baik pada gambar thumbnail ataupun selain thumbnail. INGAT, yang membedakan antara thumbnail dan bukan hanya suplemen arahan 'noscript' saja.

Demikian cara memposting gambar [thumbnail] valid AMP. Selamat mencoba dan biar berhasil. Silahkan coret-coret kotak komentar kalau ada kesulitan.
Sumber https://www.blog.pustakamadrasah.web.id/