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-wide {
    float:left;
    margin:0 10px 0 0;
    width:200px;
    height:140px;
    overflow:hidden;
}

JavaScript

jQuery.fn.resizeThumb = function(from, to) {
    return this.each(function() {
        $(this).attr({
            'src': $(this).attr('src').replace('/s' + from + '-c/', '/s' + to + '-c/'),
            'width': to,
            'height': to
        });
    });
};

$(function() {
    $('.post img').wrap('<div class="img-wide"></div>').resizeThumb(72, 200);
});