Mengatur Gambar Postingan Blog AMP HTML

Ditulis oleh: Adhy Suryadi

Ditulis pada: 11/27/2016

Sebenarnya menyimpan gambar untuk postingan Blogger sangatlah mudah, tinggal klik ikon upload gambar kemudian pilih gambar di komputer maka gambar akan tampil di postingan blog. Namun gambar-gambar tersebut tentunya harus kita atur letak dan ukurannya agar tampil bagus dan rapih serta tidak terlalu membebani loading blog.

Untuk itu dalam menambahkan image post jangan sembarangan dengan hanya sebatas meng-upload gambar di postingan lalu dibiarkan begitu saja.

Namun biasakan untuk membetulkan kode HTML postingan, seperti menghapus style yang dipasang secara inline seperti <div style="text-align: center;"> dan lainnya. Itu karena style yang dipasang secara inline dapat menyumbang loading blog.

Cara terbaiknya yaitu menggunakan CSS style dari edit HTML, misalkan untuk tag <div style="text-align: center;"> kita rubah menjadi <div class="center"> dengan CSS yang di simpan di edit HTML seperti berikut:

.center {

   text-align: center;

}

Begitu juga untuk left, right, atau justify.

Begitupun untuk gambar postingan, khususnya untuk gambar postingan blog AMP HTML (sebenarnya ini berlaku untuk semua jenis blog), letak dan ukuran gambar semestinya diatur dengan CSS dari edit HTML.

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;}

}

Ingat! width dan height gambar harus sesuai dengan lebar dan tinggi gambar sesungguhnya baik blog AMP HTML maupun blog non AMP HTML.


1. 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>

Contoh:


2. Untuk gambar dengan lebar lebih kecil dari lebar halaman postingan, misalnya dengan lebar 300px, 400px, 500px, atau 600px (ini kita asumsikan bahwa lebar postingan 700px).

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.

Solusinya yaitu menggunakan class pada CSS tadi. 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>

Contoh gambar ukuran 300px dengan layout="responsive" tanpa class img-width-300 img-center:


Contoh gambar ukuran 300px dengan layout="responsive" dengan class img-width-300 img-center:


Jika gambar ingin berada 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) (ini kita asumsikan bahwa lebar postingan 700px), silahkan ganti dengan img-width-500 atau img-width-600.

Silahkan klik kanan halaman ini kemudian inspect element lalu Ctrl + Shipt + M untuk melihat di berbagai tampilan device. Bagaimana, mudah bukan?

Semoga postingan ini bisa dimengerti sehingga postingan blog Anda selalu valid AMP HTML.