Cara Semoga 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 insan yang paling jelek yakni malas, setuju? Yap!. Kadang aku pun sebagai salah satu blogger yang sedang mencar ilmu AMP, malas alasannya yakni harus mengatur dari awal.

Apalagi jikalau kita memakai platform blogspot, kita harus mengedit semua artikel semoga valid AMP.

Dan yang paling menyita waktu yakni mengubah arahan 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, alasannya yakni pada <amp-img> wajib menyertakan width dan height jikalau memakai layout="responsive".

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

Namun, sehabis aku banyak mencar ilmu di website resmi amp project, aku menemukan cara yang lebih mudah semoga 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 menciptakan css gres pada template kita, dan memanggilnya dikala kita mengubah <img> menjadi <amp-img>. 

Copy CSS Fixed-Container

Silahkan copy arahan 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 yakni dengan mengubah artikel anda dan mengubah arahan amp-img standar dengan arahan khusus yang akan aku jelaskan.

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

 <div class="fixed-height-container">
  <amp-img class="contain" 
layout="fill" 
alt=" Agar Gambar di Artikel Blog AMP anda Rapih Cara Agar Image di Artikel Blog AMP Rapih Sesuai Ukuran" src="URL-GAMBAR"></amp-img>
        </div>

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

Hasilnya ibarat pola di bawah ini.

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

Berbagi :