IwanBerbagi.com - Untuk menambah pengetahuan dan tidak ketinggalan dengan para senior blogging yaitu Kang Ismet dan Kang Adhy yang selalu menjadi panduan saya untuk tetap update perihal blogging.

Akhir-akhir ini kedua guru blogging tersebut sering membahas AMP HTML dan mengeluarkan template AMP dan juga widget-widget yang kreatif lainnya. Nah, berawal dari sana saya mencoba build blog baru dengan memfokuskan arsitektur AMP HTML. Demi mendapatkan pengalaman lebih saya mencoba edit sendiri template agar bisa valid AMP dengan panduan yang sudah dibagikan Kang Adhy di KompiAjaib.

Seberapa penting resizeImage ini mas??

Sangat penting sekali karena kita tahu gambar menjadi satu hal yang penting dalam artikel, karena menjadi sebuah pendukung untuk gambar-gambar kecil yang tampil pada homepage blog kamu, yang seharusnya ukuran gambarnya tidaklah berukuran sama dengan gambar aslinya. Karena jika terload gambar aslinya maka akan membebankan loading blog itu sendiri.

Karena gambar yang ditampilkan kecil, seharusnya ukuran gambar (byte) dari gambar tersebut juga kecil. Gambar yang saya maksud yaitu gambar berikut :
Optimasi Gambar Blogger AMP Template Dengan resizeImage
Bisa juga gambar pertama pada postingan, bahkan gambar untuk popular post juga perlu untuk di resize, dalam percobaan saya saya mengganti atau bahkan resize image untuk tampilan gambar homepage dan juga saya mencoba resize image gambar untuk gambar pertama yang kita khususkan untuk thumbnail homepage. Yang saya maksud adalah gambar pertama seperti berikut :
Optimasi Gambar Blogger AMP Template Dengan resizeImage
Untuk mengatur gambar-gambar tersebut kamu setidaknya mengerti ngoprek html template kamu sendiri, karena nanti saya tidak akan menjelaskan secara detail melainkan saya akan jelaskan secara pengalaman saya aja. Dengan cara ini, kita menghindari penggunaan javascript yang memang dilarang penggunaannya pada blog AMP itu sendiri,karena akan membuat blog AMP tidak valid.

Sebagai contoh dasar, kita akan meresize image homepage pada template brosense yang sudah kita valid ke AMP seperti berikut :
<a expr:href='data:post.url'><div class='img-thumbnail'><amp-img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl,184)' height='134' layout='responsive' width='184'/></div>
Coba perhatikan baris
expr:src='resizeImage(data:post.firstImageUrl,184)' height='134' layout='responsive' width='184'
itu sudha kita gunakan resizeImage yang pada dasarnya ditulis seperti
expr:src='data:post.firstImageUrl' expr:title='data:post.title' height='134' width='184'
untuk lebih jelasnya kamu hanya perlu menambahkan kode resizeImage dan mengurung kode pemanggil gambar menjadi (data:post.firstImageUrl,184) dan perhatikan angka 184 tersebut harus sama dengan lebar dari gambar yang kamu akan berikan resizeImage.

Kurang lebih seperti itu saja penerapannya, maaf jika penjelasan saya kurang jelas, karena saya sendiri juga masih tahap belajar untuk hal-hal seperti ini. Semoga bermanfaat.
Share this with short URL:
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed