July 16, 2018 - #blog_tutorial
Pada post sebelumnya Memodifikasi Gambar dengan Penggunaan Parameter Struktur URL Blogger / Blogspot Image menjelaskan bagaimana gambar dapat di modifikasi ukurannya secara dinamis tanpa perlu mengunggah gambar kembali.
Lalu bagaimana implementasi sebenarnya?
Hal ini sudah hal lumrah bagi blogger template developers maupun web developer yang ingin mendapatkan gambar dengan ukuran yang tepat, tidak berlebih agar menghindari pemborosan penggunaan juga tidak kurang yang dapat menampilkan gambar berkualitas buruk akibat stretching gambar.Bagaimana caranya?
Agar dapat mendapatkan gambar dengan ukuran yang tepat, atau ukuran gambar mengacu pada ukuran elemen tertentu, maka bisa memanfaatkan parameter struktur URL Blogger/Blogspot Image untuk mendapatkan ukuran lebar gambar yang tepat dan ukuran tinggi yang menyesuaikan atau ekuivalen (tetap menjaga skala rasio gambar) dengan kalkulasi Javascript.Mengacu pada judul, metode ini dilakukan hanya untuk thumbnail post di homepage blogger/blogspot saja. Sebagaimana pada yang saya lakukan pada thumbnail post homepage blog ini, saya menggunakan tag <img> yang diapit <a> agar gambar bertautan ke halaman post, maka saya perlu mendapat source image yang dinamis setiap post nya dengan script yang berada di dalam atau setelah
<b:includable id='post' var='post'>yaitu :
<b:if cond='data:post.firstImageUrl'>
<script type='text/javascript'>//<![CDATA[
function bp_thumbnail_resize(post_url,image_url){
image_tag='<a href="'+post_url+'"><img src="'+image_url+'"/></a>';
return image_tag;
}
//]]>
</script>
<b:else/><!--Antisipasi jika gambar tidak ada sama sekali untuk dijadikan Thumbnail-->
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64eW57-iHwncpUp1sWoHjamDtHGqYY9B9zYTigbQC0pLvh4cLtxvDCoK-d-ij0dYHfPu-hGb-st3_42iYQ1swyvgKdy31VWUrwQ147Q22tuLnGVk7Pec0J7MqKuBYHOCtpdsVIY4Jvp4k/s1600/no-thumbnail.png'/>
</b:if>
<script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.url/>","<data:post.thumbnailUrl/>"));
</script> //Catatan:
<data:post.url/> = Mendapatkan tautan URL post
<data:post.thumbnailUrl/> = Mendapatkan URL thumbnail postDengan itu, saya sudah mendapatkan source image yang dapat mengisi atribut src pada tag img dengan data:post.thumbnailUrl serta tautan URL ke halaman post dengan data:post.url
Namun data:post.thumbnailUrl hanya akan memberikan gambar dengan 72x72 pixel, atau pada parameter URL nya /s72-c/. Maka saya harus mengganti parameter URL nya dengan lebar yang dinamis sesuai dari lebar post di homepage dengan penggunaan Javascript. Lebar post yang dimaksud, contohnya pada post di homepage seperti ini
Berdasarkan kasus di atas (blog ini), caranya adalah mengambil angka pixel lebar satu postnya dengan Javascript. Lebar post yang didefinisikan sebagai persen pun tetap dapat diambil sebagai angka pixel. Dan menambahkan satu parameter tambahan pada bp_thumbnail_resize() yang didefenisikan sebagai angka lebar post
<script type='text/javascript'>
var wp=document.getElementById('post').clientWidth-20;//mengambil lebar #post
document.write(bp_thumbnail_resize("<data:post.url/>","<data:post.thumbnailUrl/>",wp.toFixed()));
</script> Catatan:
'post' = Selector untuk #post
-20 = (Opsional) mendapatkan lebar dengan ukuran yang sebenarnya setelah mempunyai padding. Pada kasus blog ini, lebar post mempunyai padding kiri dan kanan 10 pixels.
wp.toFixed() = membulatkan angka jika angka mempunyai desimal. "Parameter URL blogger image untuk mendefinisikan lebar gambar, tidak bisa menggunakan nilai desimal"
Lalu parameter /s72-c/ yang dihasilkan di atribut src pada tag <img> diganti dengan .replace() .
<b:if cond='data:post.firstImageUrl'>
<script type='text/javascript'>//<![CDATA[
function bp_thumbnail_resize(post_url,image_url,image_size){
image_tag='<a href="'+post_url+'"><img src="'+image_url.replace('/s72-c/','/w'+image_size+'/').replace('default.jpg','sddefault.jpg')+'"/></a>';
return image_tag;
}
//]]>
</script>
<b:else/><!--Antisipasi jika gambar tidak ada sama sekali untuk dijadikan Thumbnail-->
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64eW57-iHwncpUp1sWoHjamDtHGqYY9B9zYTigbQC0pLvh4cLtxvDCoK-d-ij0dYHfPu-hGb-st3_42iYQ1swyvgKdy31VWUrwQ147Q22tuLnGVk7Pec0J7MqKuBYHOCtpdsVIY4Jvp4k/s1600/no-thumbnail.png'/>
</b:if>
<script type='text/javascript'>
var wp=document.getElementById('post').clientWidth-20;//mengambil lebar #post
document.write(bp_thumbnail_resize("<data:post.url/>","<data:post.thumbnailUrl/>",wp.toFixed()));
</script> Catatan:
'/w'+image_size+'/' = adalah hasil parameter image_size yang sesuai dengan wp.toFixed()
'default.jpg', 'sddefault.jpg' = mengganti default.jpg (berukuran 120x90) menjadi sddefault.jpg (berukuran 640x480) jika thumbnail merupakan hasil dari Youtube frame
Voila, saya mendapatkan lebar gambar yang sesuai dengan lebar post, walaupun kekurang beberapa desimal akibat dari pembulatan angka
Lebar gambar dengan hasil parameter /w182/ merupakan hasil bulatan lebar post 202.35 - 20.
Itulah contoh cara resize thumbnail yang tepat dengan implementasi parameter URL blogger/blogspot image. Namun cara di atas berdasarkan kasus blog ini sendiri, yaitu lebar gambar mengacu pada lebar post. Sesuaikan dengan layout halaman blog kamu sendiri. Gunakan Inspect Element untuk mengetahui acuan mana yang akan dijadikan untuk penyesuaian lebar gambar.
Bagaimana jika acuan lebarnya adalah CSS .class selector?
document.getElementsByClassName('post')[0].clientWidth;
'post' = <div class='post'>
ok makasi gannnn
ReplyDeletethank you sangat bermanfaat information
ReplyDelete