Cara Agar Image di Artikel Blog AMP Rapih Sesuai Ukuran

Agar Gambar di Artikel Blog AMP anda Rapih, Tanpa mengatur Height dan Width pada <amp-img>

Sifat manusia yang paling buruk adalah malas, setuju? Yap!. Kadang saya pun sebagai salah satu blogger yang sedang belajar AMP, malas karena harus mengatur dari awal.

Apalagi jika kita menggunakan platform blogspot, kita harus mengedit semua artikel agar valid AMP.

Dan yang paling menyita waktu adalah mengubah kode gambar yang tadir <img> menjadi <amp-img>. Ini sangat memakan waktu yang lama. 

Yang lebih menjengkelkan lagi, kita harus tahu persis ukuran gambar yang kita upload, karena pada <amp-img> wajib menyertakan width dan height jika menggunakan layout="responsive".

Masalahnya adalah jika kita tidak mengetagui dimensi gambar. Maka jika asal memasukan width dan height, gambar tidak akan rapih dan menyon.

Namun, setelah saya banyak belajar di website resmi amp project, saya menemukan cara yang lebih praktis agar gambar yang kita upload pada artikel tetap presisi dan responsive, sesuai ukuran gambar yang di upload pada artikel blogger.

Lalu bagaimana caranya? Kunci utamanya ternyata kita harus membuat css baru pada template kita, dan memanggilnya saat kita mengubah <img> menjadi <amp-img>. 

Copy CSS Fixed-Container

Silahkan copy kode CSS di bawah ini, dan tambahkan di bawah kode <style amp-custom='amp-custom'> pada panel edit tema anda.

<!-- code CSS AMP blogger image presisi -->


.fixed-container, .fixed-height-container img {


background-color: #ccc;



}


.contain img {


object-fit: contain;



}

.cover img {



object-fit: cover;



}

.fixed-container {


position: relative;


width: 200px;


height: 200px;


}

.fixed-height-container {


position: relative;


width: 100%;


height: 300px;


        }

Memanggil Kode CSS pada AMP-IMG

Kemudian, langkah selanjutnya adalah dengan mengubah artikel anda dan mengubah kode amp-img standar dengan kode khusus yang akan saya jelaskan.

Ketika kita hendak melakukan pengeditan kode <img> menjadi <amp-img>, gunakan kode di bawah ini.

<div class="fixed-height-container">


<amp-img class="contain" 
layout="fill" 
alt="Deskripsi Gambar" src="URL-GAMBAR"></amp-img>


      </div>

Jadi, anda cukup mengubah URL gambarnya saja, tanpa menggunakan width dan height.

Hasilnya seperti contoh di bawah ini.

Itu dia cara agar image pada artikel blogger amp anda rapih, tanpa harus mengatur width dan height. Semoga bermanfaat :)