Saturday, June 18, 2016

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, &quot;1:1&quot;)'/>

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.

Labels: ,

16 Comments:

At Saturday, June 18, 2016 at 9:57:00 PM GMT+7, Blogger Putra said...

info terbaru nih, makasih mas :-bd

 
At Sunday, June 19, 2016 at 5:17:00 AM GMT+7, Blogger Adhy Suryadi said...

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 :)

 
At Sunday, June 19, 2016 at 6:05:00 AM GMT+7, Anonymous Anonymous said...

Baru update lagi nih mas...

 
At Sunday, June 19, 2016 at 11:13:00 AM GMT+7, Blogger IRIL SAGITA said...

Kalau untuk :

<meta expr:content='data:post.thumbnailUrl'/>

apakah sama caranya kak ?

 
At Sunday, June 19, 2016 at 7:05:00 PM GMT+7, Blogger budkalon said...

Bantu jawab, Kang. Supaya gambar tidak terpotong, saya mengosongkan nilai variabel ratio. Jadi sintaksnya hanyalah resizeImage(url, size);

 
At Tuesday, June 21, 2016 at 6:00:00 AM GMT+7, Blogger Taufik Nurrohman said...

Iya sama.

 
At Thursday, June 23, 2016 at 5:51:00 AM GMT+7, Blogger Adhy Suryadi said...

Sip...makasih solusinya mas Dzulmar...mantap :)

 
At Friday, June 24, 2016 at 5:31:00 PM GMT+7, Anonymous Anonymous said...

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

 
At Friday, June 24, 2016 at 7:06:00 PM GMT+7, Blogger Taufik Nurrohman said...

Untuk pengaturan tinggi gambar sepertinya hanya bisa dilakukan melalui parameter rasio, untuk kekurangan selebihnya bisa diatasi dengan CSS height.

 
At Friday, June 24, 2016 at 9:51:00 PM GMT+7, Anonymous Anonymous said...

berarti untuk penulisan dengan ukuran width 72px dan height 50px seperti ini bukan mas taufiq
<img expr:src='resizeImage(data:post.thumbnailUrl, 72, 50)'/>

 
At Saturday, June 25, 2016 at 7:19:00 PM GMT+7, Blogger Unknown said...

Maaf mas mungkin oot, 7:(
Apa ini fungsi sama kayak fitur "Fill image" pada pengaturan wallpaper di windows? :\

Terima kasih.

 
At Wednesday, July 6, 2016 at 1:19:00 PM GMT+7, Blogger Taufik Nurrohman said...

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, &quot;1:1&quot;)'/>
</span>

 
At Wednesday, July 6, 2016 at 1:22:00 PM GMT+7, Blogger Taufik Nurrohman said...

Iya kalau nilai crop aktif (jika parameter rasio ditentukan).

 
At Wednesday, July 20, 2016 at 9:16:00 PM GMT+7, Blogger Unknown said...

Maaf mas OOT..
klo cara membuat emoticon saat diklik muncul shortcut key nya gimana..
seperti blog ini

 
At Friday, April 14, 2017 at 10:30:00 PM GMT+7, Blogger Nurul Hikmah S. said...

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

 
At Monday, March 5, 2018 at 7:28:00 PM GMT+7, Blogger Unknown said...

Izin belajar di blog ini mas, artikelnya bermanfaat banget. Makasih mas.

 

Post a Comment

<< Home