Cara Resize Featured Image/Thumbnail Tanpa JavaScript atau jQuery


Bagaimana cara resize featured image/thumbnail tanpa menggunakan javascript dan jquery? untuk merubah ukuran thumbnail pada postingan homepage sebenar nya juga bisa tanpa menggunakan javascript dan jquery

contoh nya seperti dibawah ini

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,t){for(var g=document.getElementById(e),m=g.getElementsByTagName("img"),r=0;r<m.length;r++)m[r].src=m[r].src.replace(/\/s72\-c/,"/s"+t),m[r].width=t,m[r].height=t}resizeThumb("Blog1",750);
//]]>
</script>
</b:if>

biasa nya orang tidak suka menggunakan nya,karena javascript,dapat memberatkan blog nya

tapi,bagi pengguna featured thumbnail pada template nya,dihalaman depan maupun postingan nya cara ini sangat cocok untuk diterapkan,karena kita bisa menentukan sendiri ukuran thumbnail nya,jika biasa nya menerapkan featured thumbnail atau featured image seperti ini

<b:if cond='data:post.firstImageUrl'>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
</b:if>

untuk resize ukuran image,bisa menggunakan seperti dibawah ini

<b:if cond='data:post.firstImageUrl'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 700)'/>
</b:if>

angka 700 adalah resolusi dari gambar (resolusi maksimal adalah 1600) silahkan rubah sesuai dengan kebutuhan,merubah resolusi gambar akan secara otomatis merubah ukuran nya pula,ukuran (width/height) akan menyesuaikan

Selain ukuran width dan heignt, resolusi juga akan menentukan tingkat kualitas gambar/image, dan saling berhubungan satu sama lain. Walaupun resolusi tinggi, namun ukuran lebar dan tinggi dari gambar itu juga kecil, maka gambar itu pun tetap akan terlihat blur saat dibuat jadi featured image/thumbnail, begitupun sebaliknya.

sekian tutorial kali ini

Artikel RACT Design Lainnya :

0 comments:

Post a Comment

Scroll to top