Mengubah Ukuran Thumbnail Posting Versi 72 x 72 Piksel

by Taufik Nurrohman

HTML

<div id="main-wrapper">
    <article class="post"><img src="http://4.bp.blogspot.com/-JK6dkHtMVC8/T_q7UPuiEvI/AAAAAAAADcg/bjxpVfUzsI0/s72-c/jquery-toggle-sidebar-plugin.png">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</article>
    <article class="post"><img src="http://3.bp.blogspot.com/-wS0buWjt63s/T9sAeaki2-I/AAAAAAAADYk/ed8HSU6F5NM/s72-c/mytooltip-jquery-plugin.png">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</article>
    <article class="post"><img src="http://2.bp.blogspot.com/-iPi3-fDJNik/T8zcpaLic1I/AAAAAAAADFI/CrEdd6OxnxU/s72-c/jimp-screenshot.png">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</article>
</div>

CSS

body {padding:50px;}

article {
    border:1px solid black;
    padding:10px 12px;
    margin:0 auto 10px;
    overflow:hidden;
}

article:after {
    content:".";
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}

article img {
    float:left;
    margin:0 10px 0 0;
}

JavaScript

function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
}
resizeThumb('main-wrapper', 200);