✔ 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 ialah malas, setuju? Yap!. Kadang aku pun sebagai salah satu blogger yang sedang mencar ilmu AMP, malas alasannya ialah harus mengatur dari awal.
Apalagi jikalau kita memakai platform blogspot, kita harus mengedit semua artikel biar valid AMP.
Apalagi jikalau kita memakai platform blogspot, kita harus mengedit semua artikel biar valid AMP.
Dan yang paling menyita waktu ialah 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 ialah pada <amp-img> wajib menyertakan width dan height jikalau memakai layout="responsive".Masalahnya ialah 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 biar 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 ialah 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.
0 Response to "✔ Cara Semoga Image Di Artikel Blog Amp Rapih Sesuai Ukuran"
Posting Komentar