Pada artikel sebelumnya yaitu Cara Membuat Gambar di Postingan Blogger Valid AMP menjelaskan cara untuk mengatur gambar postingan supaya valid AMP (amp-img). Serta cara supaya gambar (amp-img) bisa responsive dengan lebar perangkat.
Terkait: Cara Menggunakan AMP di Blogger Yang Perlu Diketahui.
Serta menjelaskan supaya bisa responsive maka amp-img menggunakan atribut layout="responsive" dan elemen induknya atau yang menampungnya harus diatur lebarnya (dengan menggunakan max-width). Jadi elemen induk (biasanya dengan atribut class berisi separator) selalu diatur menggunakan CSS.
Karena jika tidak, Gambar akan melebar sesuai lebar artikel. Masalahnya jika ukuran lebar gambar kecil maka akan menyebabkan gambar pecah-pecah.
Dalam artikel ini membahas cara terbaru untuk membuat amp-img menjadi responsive. Dan cara ini akan lebih mudah digunakan karena tidak perlu mengatur elemen induknya. Jadi lebar amp-img akan menyesuaikan lebar gambar.
Jika sebelumnya menggunakan atribut layout="responsive" maka untuk cara ini akan menggunakan layout="intrinsic". Layout ini di perkenalkan setelah layout responsive. Layout intrinsic dan responsive berbeda. Induk dari amp-img (dengan layout="intrinsic") tidak perlu menggunakan css max-width. Contoh sudah saya terapkan pada artikel ini.
Cara Termudah Mengatur AMP-IMG agar Responsive
Biar lebih mudahnya kita mulai langkah-langkahnya dari awal. Di sini hanya akan menghapus beberapa atribut saja dan menambahkan atribut layout="intrinsic".
Pertama jika memasukkan gambar pada postingan hapus link pada gambar (pilih gambar dengan di klik lalu klik menu link.
Kemudian beralih ke tampilan HTML, maka struktur elemen gambar akan seperti ini.
<div class="separator" style="clear: both; text-align: center;"><img border="0" alt="atribut layout intrinsic di amp-img" data-original-height="376" data-original-width="640" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKE8kBNGNWUSCbbc5ItuX3kGQDnRsMpFXudUxoHSH82p-nFjx2BilXKVJvJL1NauSflir9QWqwPaVP5Ovc73X3RiZ-KK0BlHqut1bONiwmRbYVjXpOTTSrb6i6ffB0uzmtIaARFHNtGaU/s400/layout+intrinsic.png" title="menggunakan layout intrinsic di amp-img" width="400" /></div>
Edit elemen dengan:
- Ubah tag
imgmenjadiamp-imgdan penutupan img yaitu/>menjadi></amp-img>. - Hapus layout
style="clear: both; text-align: center;"pada DIV, lalu ubahborder="0"menjadilayout="intrinsic"pada AMP-IMG.
Sehingga menjadi seperti ini.
<div class="separator"><amp-img alt="atribut layout intrinsic di amp-img" data-original-height="376" data-original-width="640" height="235" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKE8kBNGNWUSCbbc5ItuX3kGQDnRsMpFXudUxoHSH82p-nFjx2BilXKVJvJL1NauSflir9QWqwPaVP5Ovc73X3RiZ-KK0BlHqut1bONiwmRbYVjXpOTTSrb6i6ffB0uzmtIaARFHNtGaU/s400/layout+intrinsic.png" title="menggunakan layout intrinsic di amp-img" width="400"></amp-img></div>
width dan height diwajibkan (harus ada).Sekarang tidak perlu mengatur/mengubah class lagi. CSS ini tidak perlu (jangan) di tambahkan jika Anda telah menggunakan tutorial dari artikel sebelumnya. Tetapi jika baru mencoba maka tambahkan.
.separator{text-align:center;margin.5em auto}.left{float:left;margin-right:15px}.right{float:right;margin-left:15px}Tambahan untuk menaruh gambar di sebelah kanan tambahkan left di sebelah separator. Untuk sebelah kanan gunakan right. Contoh:
<div class="separator left">
mas cara otomatis pengatirannya gimana. biaa g di atur di templetnya saja.
BalasHapusTidak bisa bang abdul, setiap gambar di postingan berbeda-beda lebarnya. Pada artikel sebelumnya membahas agar gambar amp-img menjadi responsive menggunakan CSS class. Jadi harus mengatur beberapa css untuk lebar tertentu.
HapusTapi di sini tidak perlu mengatur CSS class. Cukup mengatur atribut layout saja.
Apakah gambar nantinya akan di fixed ke width='400' atau bisa menyesuaikan sendiri dengan ukuran viewport?
BalasHapusSama seperti layout responsive. Gambar akan berukuran sesuai dengan yang diatur pada atribut width, jika elemen di luarnya mengecil maka gambar akan menjadi responsif (menyesuaikan elemen induknya).
Hapus