Merapihkan Postingan Gambar Pada Blog AMP HTML

Pada postingan sebelumnya Saya sudah membagikan Posting Gambar Dan Video Valid AMP HTML. Namun dengan cara tersebut gambar yang kita posting belum terlihat rapih alias masih berantakan, karena gambar masih ada yang melebar, terpotong, dan ada yang terlihat buram. Untuk itu disini Saya akan share bagaimana caranya agar gambar yang kita posting pada blog AMP HTML terlihat lebih rapih.

Sebenarnya postingan ini bukan hanya untuk blog yang valid AMP HTML saja, tetapi untuk blog non AMP juga harus menerapkan cara ini agar postingan gambar nya lebih terlihat rapih.

Postingan ini Saya dapat dari blog kompi ajaib yang membahas tentang Mengatur Gambar Postingan Blog AMP HTML. Nah, agar postingan gambar di blog kita lebih rapih, kita harus mengakali dengan CSS yang kita tempatkan di Editor HTML pada template blog kita.

Silahkan simpan kode CSS berikut di edit HTML, untuk style halaman postingan (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 harus kita perhatikan adalah width dan height gambar harus sesuai dengan lebar dan tinggi gambar sesungguhnya baik blog AMP HTML maupun blog non AMP HTML.

Jika untuk gambar dengan lebar sama 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>

Dan untuk gambar dengan lebar lebih kecil dari lebar halaman postingan, misalnya dengan lebar 240px, 300px, 400px, 500px, atau 600px, dan lebar postingan adalah 700px. Jika kita tidak menambahkan kode layout="responsive", maka secara otomatis gambar tersebut akan berada di sebelah kiri dan gambar akan terpotong pada layar device yang lebih kecil dari lebar gambar.

Tetapi jika kita menambahkan layout="responsive" pada gambar tersebut maka gambar akan menjadi buram atau tidak jelas. Cara yang tepat yaitu menggunakan class pada CSS di atas. Silahkan ganti kode

<div class="separator" style="clear: both; text-align: center;">

Dengan

<div class="img-width-300 img-center">

Maka kode HTML-nya akan seperti berikut:

<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 Anda ingin meletakan gambar di samping kiri atau kanan, maka kita tinggal mengganti kode img-center dengan img-left atau img-right.

Begitu pun dengan img-width-300, jika lebar gambarnya 400px (atau lebar di bawah 500px) maka silahkan ganti menjadi img-width-400. Begitu pun 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 img-width-600, agar gambar tidak terpotong melebihi lebar postingan.

Nah, mungkin hanya itu saja yang bisa Saya bagikan. Semoga bermanfaat.