Pada postingan kali ini saya ingin membahas satu hal yaitu tentang bagaimana cara mengatur gambar pada postingan agar terlihat rapih untuk blog yang valid AMP. Sebenarnya cara ini sudah banyak kita temui di mesin pencari dengan keyword "Cara merapihkan Gambar Postigan Blog Valid AMP HTML" yang sudah lebih awal di posting oleh para mastah seperti yang sempat saya simak tutorial ini di blog Bang Andhy Suryadi yang kita kenal dengan nama blognya KompiAjaib. Namun tidak ada salahnya juga jika pada kesempatan kali ini ingin mengulas kembali (Repost) hal yang sudah pernah diulas oleh para mastah yang lebih dulu melalui postingannya ketimbang saya.
Sebenarnya cara ini tidak hanya dapat di terapkan di blog yang valid AMP saja, namun cara ini juga bisa di terapkan pada blog NON AMP. Agar gambar pada postingan blog kita terlihat rapih maka langkah awal yang harus kita lakukan adalah dengan melakukan setting CSS di bagian Edit HTML.
Langkah pertama yang harus kita lakukan yaitu dengan menyimpan kode CSS berikut di bagian Edit HTML (untuk blog AMP simpan untuk syle halaman postingan tampilan desktop dan tampilan mobile).
.img-center{text-align:center;margin:0 auto;}
.img-left{clear:left;float:left;margin-bottom:1em;margin-right:1em;text-align:center;}
.img-right{clear:right;float:right;margin-bottom:1em;margin-left:1em;text-align:center;}
.img-width-300,.img-width-400,.img-width-500,.img-width-600{width:100%;text-align:center;clear:both}
.img-width-300{max-width:300px;}
.img-width-400{max-width:400px;}
.img-width-500{max-width:500px;}
.img-width-600{max-width:600px;}
@media screen and (max-width:640px){
.img-width-500.img-left,.img-width-500.img-right,.img-width-600.img-left,.img-width-600.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:414px){
.img-width-300.img-left,.img-width-300.img-right,.img-width-400.img-left,.img-width-400.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}Yang paling utama yang harus kita perhatikan adalah pada bagian
width dan height gambar harus sesuai dengan lebar dan tinggi gambar sebenarnya baik untuk blog valid AMP HTML ataupun blog yang NON AMP HTML.Jika untuk gambar dengan lebar sama dengan atau lebih besar dari lebar halaman postingan, kita cukup menambahkan kode
layout="responsive" pada tag amp-img seperti berikut:
<amp-img src="/img/amp.jpg"
width="1000"
height="564"
layout="responsive"
alt="an image"></amp-img>Jika untuk gambar dengan lebar lebih kecil dari lebar halaman postingan, misalnya dengan lebar dibawah atau 300px, 400px, 500px, atau 600px (ini kita asumsikan bahwa lebar postingan 700px).
Namun kalau tanpa ditambahkan
layout="responsive", maka secara default gambar tersebut akan berada di sebelah kiri namun akan terpotong pada layar device yang lebih kecil dari lebar gambar.Sementara jika ditambahkan
layout="responsive" pada gambar tersebut maka gambar akan menjadi buram.Yaitu solusinya dengan menggunakan class pada CSS tersebut tadi. silahkan ganti kode berikut
<div class="separator" style="clear: both; text-align: center;">
dengan kode ini
<div class="img-width-300 img-center">
Maka kode HTML akan menjadi seperti ini
<div class="img-width-300 img-center">
<amp-img src="/img/amp.jpg"
width="300"
height="169"
layout="responsive"
alt="an image"></amp-img>
</div>
Apabila sobat ingin meletakan gambar di samping kiri atau kanan, maka sobat hanya tinggal mengganti kode
img-center dengan menjadi img-left untuk gambar rata kanan dan atau img-right untuk gambar rata kiri.Begitu juga dengan
img-width-300, jika lebar gambarnya ukuran lebarnya 400px (atau lebar di bawah 500px) maka silahkan ganti menjadi img-width-400. Begitu juga untuk gambar dengan lebar 500px (atau lebar di bawah 600px) atau 600px (atau lebar di bawah 700px) (Misalkan kita mempunyai template blog dengan lebar postingan 700px), silahkan ganti dengan img-width-500 atau dengan img-width-600, agar gambar tidak terpotong melebihi lebar jalaman postingan.Silahkan klik kanan halaman ini kemudian inspect element lalu Ctrl + Shipt + M untuk melihat di berbagai tampilan device. Bagaimana, mudah bukan?
Itulah satu tutorial mengenai Cara Merapihkan Tampilan Gambar Pada Postingan Blog Valid AMP yang dapat saya sampaikan pada kesempatan ini dan semoga tutorial ini bermanfaat bagi para sobat blogger.