Thumbnail Di Artikel Blog Amp Rapih Sesuai Ukuran Dan Tidak Blur

Mengatasi Gambar di Artikel Blog AMP Blur Dan Tidak Sesuai Ukuran

-Sifat insan tidak jarang ilalah malas, setuju? Ya!. Kadang aku pun sebagai salah satu blogger yang sedang mencar ilmu AMP, malas alasannya ialah harus mengatur semua artikel dari awal. dan itu pengalaman langsung aku yang sudah dilewati :)

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

Dan yang paling menyita waktu ialah mengubah instruksi 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 ialah pada <amp-img> wajib menyertakan width dan height kalau memakai layout="responsive".

Masalahnya ialah kalau kita tidak mengetagui dimensi gambar. Maka kalau asal memasukan width dan height, gambar tidak akan rapih dan menyon. untuk tutorial kali ini Tanpa mengatur Height dan Width pada <amp-img> sampai lebih simple dan mudah

Namun, sehabis aku banyak mencar ilmu di website resmi amp project, aku menemukan cara yang lebih simpel 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 instruksi CSS di bawah ini, dan paste sebelum kode </style> pada Html 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 ialah dengan mengubah artikel anda dan mengubah instruksi amp-img standar dengan instruksi khusus yang akan aku jelaskan.

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

 <div class="fixed-height-container"> <amp-img class="contain"  layout="fill"  alt="Mengatasi Gambar di Artikel Blog AMP Blur Dan Tidak Sesuai Ukuran Thumbnail Di Artikel Blog AMP Rapih Sesuai Ukuran  Dan Tidak Blur" src="URL-GAMBAR"></amp-img>       </div>

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

Silahkan dicoba semoga berkhasiat dan bermnfaat.

Sumber https://www.merpatih.com/