Mengubah Ukuran Gambar Mini Tanpa JavaScript
Blogger memperkenalkan satu fitur lagi berupa kemampuan untuk mengubah ukuran gambar melalui sintaks templat:
resizeImage(url, size, ratio);
Berikut ini adalah contoh penerapannya pada widget posting populer. Sebelumnya, di dalam widget posting populer, kita akan melihat kode seperti ini yang berfungsi untuk menampilkan gambar mini:
<img expr:src='data:post.thumbnailUrl'/>
Sintaks di bawah ini memungkinkan kita untuk mengubah ukuran gambar mini ke dalam ukuran selain 72 × 72 piksel:
<img expr:src='resizeImage(data:post.thumbnailUrl, 72)'/>
Alternatif jika gambar utama tersedia di dalam posting (seperti featured image dalam WordPress, tapi sepertinya fitur ini masih draf):
<img expr:src='resizeImage(data:post.featuredImage.isResizable ? data:post.featuredImage : data:post.thumbnailUrl, 72, "1:1")'/>
Ini berlaku juga untuk keluaran gambar dari data yang lain seperti gambar mini posting atau gambar mini dalam widget profil.
Singkatnya seperti itu.
Diskusi bisa dilanjutkan di bawah. Maaf jadi singkat-singkat, sekarang Saya sudah ada kesibukan tambahan lain di RS.
16 Comments:
info terbaru nih, makasih mas :-bd
Saya pernah mencoba mengutak-atiknya mas, bagaimana untuk menghilangkan cropping-nya? saya coba menggunakan perbandingan 2:1 memang menjadi persegi tapi gambar tetap tidak tampil utuh.
Mudah2an ada solusinya :)
Baru update lagi nih mas...
Kalau untuk :
<meta expr:content='data:post.thumbnailUrl'/>
apakah sama caranya kak ?
Bantu jawab, Kang. Supaya gambar tidak terpotong, saya mengosongkan nilai variabel ratio. Jadi sintaksnya hanyalah resizeImage(url, size);
Iya sama.
Sip...makasih solusinya mas Dzulmar...mantap :)
ditunggu tunggu akhirnya bangkit lagi blog DTE \o/, numpang gelar tikar mas taufik biar cepat merasuk ilmu yang saya dapat diblog ini.
untuk pengaturan heightnya bagaimana mas ???
makasih sebelumnya semoga DTE tambah sukses dan sering diupdate lagi artikel2 kerennya. :-bd
Untuk pengaturan tinggi gambar sepertinya hanya bisa dilakukan melalui parameter rasio, untuk kekurangan selebihnya bisa diatasi dengan CSS height.
berarti untuk penulisan dengan ukuran width 72px dan height 50px seperti ini bukan mas taufiq
<img expr:src='resizeImage(data:post.thumbnailUrl, 72, 50)'/>
Maaf mas mungkin oot, 7:(
Apa ini fungsi sama kayak fitur "Fill image" pada pengaturan wallpaper di windows? :\
Terima kasih.
Parameter ke tiga digunakan untuk memasukkan rasio, dan rasio hanya akan valid jika nilainya berupa integer (angka bulat), jadi untuk membuat kalkulasi seperti ini misalnya, masih tetap tidak memungkinkan.
Solusi satu-satunya cuma membungkus gambar dengan elemen HTML, kira-kira seperti ini:
.image {
display:inline-block;
width:72px;
height:50px;
overflow:hidden;
}
.image img {
display:block;
width:72px;
height:72px;
}
<span class="image">
<img expr:src='resizeImage(data:post.thumbnailUrl, 72, "1:1")'/>
</span>
Iya kalau nilai crop aktif (jika parameter rasio ditentukan).
Maaf mas OOT..
klo cara membuat emoticon saat diklik muncul shortcut key nya gimana..
seperti blog ini
Ya ampun, saya nyari kemana" ga ada yang work. Rupanya meta expr-nya juga diganti semuaa, baru deh nggak blur. Thanks banget ya gan :D
Izin belajar di blog ini mas, artikelnya bermanfaat banget. Makasih mas.
Post a Comment
<< Home