Memperbesar/Mengubah Ukuran Thumbnail Posting
Pertanyaan Al-Firouz: Tentang bagaimana cara memperbesar thumbnail pada posting auto read-more tanpa JavaScript dengan jQuery:
Pertama-tama, Saya tidak akan memberikan metode mengubah ukuran thumbnail Picasa dengan jQuery terlebih dahulu karena ada cara sederhana yang bisa dilakukan dengan mudah menggunakan JavaScript mentah. Pada intinya, kita hanya mencoba mengubah ukuran thumbnail kecil dari path-nya seperti yang pernah Saya ulas dengan cukup jelas di artikel Optimasi Thumbnail pada Posting Auto Read-More dan Widget Blogger, yaitu dengan cara mengubah ukuran standar thumbnail 72 × 72 piksel s72-c
menjadi ukuran yang lain, misalnya s200-c
.
Metode 1: Menggunakan JavaScript Murni
Salin kode ini dan letakkan di atas tag </body>
:
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script>
//<![CDATA[
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);
//]]>
</script>
</b:if>
</b:if>
Fungsi dieksekusi pada bagian ini:
resizeThumb('main-wrapper', 200);
main-wrapper
adalah ID kolom posting, dan 200
adalah ukuran thumbnail baru. Kode di atas akan mengubah ukuran thumbnail dari 72 × 72 piksel menjadi 200 × 200 piksel.
Ganti juga ukuran width
dan height
thumbnail posting dalam kode CSS ini:
.post-thumbnail {
width:72px;
height:72px;
float:left;
margin:0 10px 0 0;
}
… menjadi berukuran sama dengan ukuran pembesaran thumbnail. Menyesuaikan contoh di atas, maka ukuran lebar dan tinggi thumbnail harus diubah menjadi 200px
.
Simpan semua perubahan dan lihat hasilnya.
Metode 2: Menggunakan jQuery
Pada intinya cara kerjanya sama, hanya metodenya saja yang berbeda. Salin kode ini dan letakkan di atas kode </head>
atau </body>
:
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script>
//<![CDATA[
function resizeThumb(el, from, to) {
$(el).each(function() {
$(this).attr({
'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
'width': to, 'height': to
});
});
}
$(function() {
resizeThumb('.post-thumbnail', '72', '200'); // Ubah ukuran thumbnail dari 72 menjadi 200
});
//]]>
</script>
</b:if>
</b:if>
Di sini Saya menggunakan selektor $('.post-thumbnail')
untuk menargetkan thumbnail posting secara langsung. Anda bisa saja mengubah selektornya menjadi $('#main-wrapper img')
atau $('.post img:first')
atau bahkan yang lainnya jika template Anda memiliki struktur elemen yang unik. Pada intinya, targetkan gambarnya! Alasan Saya tidak menggunakan nama kelas thumbnail pada versi manipulasi JavaScript adalah karena Saya tidak ingin mengambil resiko mengingat document.getElementsByClassName
tidak didukung oleh beberapa peramban tua - When can I use getElementsByClassName?
Thumbnail Lain?
Bukan hanya thumbnail pada posting saja yang bisa diubah ukurannya, tapi juga thumbnail-thumbnail pada widget lain, misalnya pada widget Posting Populer yang caranya juga pernah dituliskan oleh MS-Potilas di artikelnya (Kebetulan Saya mendapatkan ide JavaScript mentahnya dari sana). Di sini Saya hanya mengonversi kodenya menjadi plugin. Asalkan thumbnail tersebut diunggah pada direktori Picasa, maka kita bisa menemukan ciri khususnya dalam path lokasi gambar seperti s72-c
, s200
, s1600
dan lain sebagainya. Dari kunci itulah kita bisa mengubah ukuran-ukuran gambar menggunakan JavaScript dengan cara mengganti besarannya. berikut ini adalah contoh sederhana bagaimana cara memperbesar thumbnail pada widget Posting Populer:
Versi JavaScript
<script>
//<![CDATA[
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;
}
}
// Mengubah ukuran thumbnail widget Posting Populer
resizeThumb('PopularPosts1', 200);
//]]>
</script>
Versi jQuery
<script>
//<![CDATA[
function resizeThumb(el, from, to) {
$(el).each(function() {
$(this).attr({
'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
'width': to, 'height': to
});
});
}
// Mengubah ukuran thumbnail widget Posting Populer
$(function() {
resizeThumb('#PopularPosts1 img', '72', '200');
});
//]]>
</script>
Tag kondisional bisa dilepaskan jika tujuan kita adalah untuk mengubah ukuran thumbnail widget, karena umumnya widget muncul pada semua tipe halaman.
Catatan Tambahan: Saya melihat beberapa pembaca yang mendeklarasikan fungsi resizeThumb()
berkali-kali pada tempat yang berbeda. Padahal fungsi ini cukup dinyatakan satu kali saja (Saya sarankan untuk meletakkannya di area <head>
):
function resizeThumb(parentID, size) { ... }
Setelah itu Anda bisa menggunakan fungsi tersebut sebanyak yang Anda mau pada elemen mana saja:
resizeThumb('Blog1', 300);
resizeThumb('PopularPosts1', 200);
resizeThumb('Widget1', 50);
...
68 Comments:
Wakakakakakkakk Ujung2nya ya tetep pake JS kode blogger masih secret :D
terus menjadi yang terdepan pak
mengenai auto read more.. saya masih ada yang belum paham terutama saat di source atau ctrl+U . semua artikel code masih terbuka dan bahkan saat loading pun masih berpengaruh berat pada blog, pertanyaanya..
cara agar readmore itu benar2 memotong seluruhnya sampai source code. gimana..??
kata lain seperti snippet pada wordpress...
atau source yang saya ambil dari blog DTE ini seperti pada gambar.
https://lh6.googleusercontent.com/-01X-N894P3Y/UALG8U8ulUI/AAAAAAAABvc/EWzlFkX6U6o/s650/sc.jpg
@Denddy Gustiana Terkait: Posting Auto Read-More Tanpa JavaScript
@Taufik Nurrohman Tes-tes, Ternyata kegantengan Al firouz terbukti juga dari Group FB sampai di Blog tutorial..
Kalau udah baca artikel bang taufik pusing saya untuk memahaminya dan Perlu waktu benggong dulu sejenak liat kode-kode-nya dan memahami-nya tapi kagak paham-paham..
Nasib-nasib heheeee
alhamdulillah berhasil diterapkan solusi yg sangat manjur :-bd \o/
sebenarnya saya sudah membaca pada posting http://hompimpaalaihumgambreng.blogspot.com/2012/04/optimasi-thumbnail-pada-auto-read-more.html. Tapi penerapannya nggak mudeng hehehe :D
terima kasih banyak bang :)
kalo cuman merubah ukuran thumbnail mah gak usah pake script, CSS jg bisa kok!
Bukan cuma ukurannya saja yang diubah, tapi juga resolusinya :W
Mas mau tanya nih,,,kok ukuran gambar di homepage ku masih kena scaled image ya,,,padahal di image properties resolusi udah benar ke ukuran 200, tapi malah kena scaled jadi 60x50,,,padahal thumbnail udah tak pakai'in class post-thumbnail..tapi tetep gitu aja,,,gak ada perubahan.
Di atas sudah Saya tuliskan, ganti juga ukuran pada kode CSS-nya:
.post-thumbnail {
width:200px;
height:200px;
float:left;
margin:0px 10px 0px 0px;
}
:-bd waw infonya bagus banget, hampir semua masalah dapat saya pecahkan di blogmu ini..
Terimakasih.
izin menetap sobat :)
http://zone-uchiha.blogspot.com/
mas`ko susah ya resolusinya malah burem di image ya :(
Cuma berlaku untuk gambar yang diunggah melalui Blogger secara langsung, selain itu tidak bisa.
betul harus upload di blogger
atau mungkin gini kali kang kasusnya,
udah liat blognya juga tampilan gambarnya pake wide jadi ya nga pas klw ngikutin script di atas, karena kodenya berakhiran -c yg artinya gambar persegi
harus di edit dikit scriptnya biar tampilan gambarnya bisa wide
versi javascript
function resizeThumb(parentID, size, size2) {
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 + "");
image[i].width = size;
image[i].height = size2;
}
}
// Mengubah ukuran thumbnail widget Posting Populer
resizeThumb('PopularPosts1', 200, 90);
resizeThumb('PopularPosts2', 200, 90);
resizeThumb('stylify_random', 176, 130);
resizeThumb('post-body', 176, 130);
versi jquery
function resizeThumb(b, a, d, c) {
$(b).each(function () {
$(this).attr({
src: $(this).attr("src").replace("/s" + a + "-c/", "/s" + d + "/"),
width: d,
height: c
})
})
}
$(function () {
resizeThumb("#stylify_random img", "72", "176", "130");
resizeThumb(".post-body img", "72", "176", "130");
resizeThumb("#PopularPosts1 img", "72", "176", "90");
resizeThumb("#PopularPosts2 img", "72", "176", "90")
});
===========
oia kang sekalian tanya
itu yang versi javascript nga bisa risize element dg atribut class ya,,id doank bisanya ??
klw yang jquery selektornya kan lebih mudah :(
makasih ya gan infonya ^^
gambar di tampilan postingan saya kan terlalu lonjong... solusinya gimana? cepet ya....
www.sanggarsenipacul.blogspot.com
Makasih gan, izin tak pakai tipsnya di blog ku
Hebat... hebat banget... keren.. cool... smuanya dah bwt agan \o/
Bisa tanya nda, gmn caranya memasang tag alt dan title pada gambar di blog yang menggunakan kode readmore otomatis. Kodenya kurang lebih seperti ini :
<script>
var thumbnail_mode = "float" ;
summary_noimg = 680;
summary_img = 670;
img_thumb_height = 175;
img_thumb_width = 200;
</script>
<script>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<div class="thumb-post"><span style="float:left; margin:5px 11px 0 0;"><img src="http://1.bp.blogspot.com/-DewXrlymD20/UO_BfieN1eI/AAAAAAAAGFA/i3twgxtU4AI/s320/gambar-defaul-artikel-blog2.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<div class="thumb-post"><span style="float:left; margin:5px 11px 0 0;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Mohon penjelasannya ya... Plissss
kalo ane mah gini gan img Alt="Read more this content" title="Read more this content" src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
summ = summary_img;
semua title dan alt nya pada semua posting jadi sama ...
kenapa ya saya udh nerapin semua dari jquery ampe javascript tetep hasilnya nihil -_-
s72-c <- link di gambarnya selalu -_- emang sih nongol di html imgnya <img scr='' width='500px' height='500px' />
nih jquery yang saya terapin
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(el, from, to) {
$(el).each(function() {
$(this).attr({
'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
'width': to, 'height': to
});
});
}
// Mengubah ukuran thumbnail widget Posting Populer
$(function() {
resizeThumb('.thumbmage img', '500', '500');
});
//]]>
</script>
Ini betul lokasi gambarnya ada di sebelah sini?
$('.thumbmage img');
Mau tanya kalau script diatas di sisipin untuk memanggil img di youtube jika kalau di posting terdapat video dari youtube gimana ya ?
var yimage='<a href="'+url+'"><img src="'+image.replace('default', '0') + '" alt="'+title+'"/></a>';
if (image.indexOf("img.youtube.com")!= -1)return yimage;
terimakasih.
Setahu Saya thumbnail YouTube tidak bisa masuk ke dalam elemen data:post.thumbnailUrl
Terimakasih banyak ... jawabnnya.. menmbah ilmu saya .. I LOVE DTE
Mau tanya lagi ne Bang .. dengan script di atas gambar akan diload aslinya baru di resize jadi jika saya cuman mengubah resize pajangnya dan saya menggunakan plugin masonry gambar tumbnail itu akan manumpuk . jadi bagaimana mengatasinya ya ... contohnya di template ini urangpoto.blogspot.com
Tentukan lebar dan tinggi gambar ke CSS juga:
<script>
resizeThumb('main-wrapper', 200);
</script>
<style>
.post-thumbnail {
width: 200px;
height: 200px;
}
</style>
bang mau tanya cara agar gambar thumbnail auto resize gimana? di blog ane gambarnya jadi ngezoom malah.. cek blog ane bang (maaf g bermaksud promo) momojustshare.blogspot[dot]com
mohon pencerahannya...
ini yang saya cari-cari pak taufik . terima kasih info nya . sangat membantu para blogger autodidact seperti saya . :)
mas saya masih belum mengerti mas mohon dengan sangat mas penjelasannya, saya sudah praktekkan di blog saya tapi gambar post yang ada di homepage masih aja ngeblur mas? tolong pencerahannya...
Mungkin karena kamu pakai templat kustom? Atau meletakkan skrip sebelum gambar-gambar termuat?
maaf mas ini link'nya 'blogdemokangfandi.blogspot.com' silahkan di cek, tolong sekali mas karena saya tidak mengerti apa" tentang ini. gambarnya masih ngeblur mas... dan resolusinya masih tetap.
Punyamu sudah punya fungsi pengubah resolusi gambar sendiri, namanya bp_thumbnail_resize. Coba cari di dalam templat. Lalu ubah nilai variabel image_size jadi 150:
function bp_thumbnail_resize(image_url, post_title) {
var image_size = 65; // ← ganti jadi `150`
var image_tag='<img src="' + image_url.replace('/s72-c/','/s' + image_size + '-c/') + '" class="postthumb" alt="' + post_title + '" title="' + post_title + '"/>';
if (image_url != "") return image_tag; else return "";
}
wah.. terimakasih banyak mas, sudah membantu saya.. semoga tuhan selalu memberikan rizky'nya pada mas taufik. hehehe....
ikut jadi followers mas...
terimakasih banyak... , mas taunya gmna ? padahal templatenya udah saya otak-atik tadi.
terimakasih banyak... , mas taunya gmna ? padahal templatenya udah saya otak-atik tadi.
sip sip. . \o/
Kalau buat thumbnailnya jadi landscape?
mantep banget gan, kebetulan saya juga baru pusying otak2x blogger . . .
http://shirostore.blogspot.com/
[ASK]
bagaimana caranya agar img bentuknya tidak tetap persegi ? semisal 200x100,
coba saya rubah kog gambarnya ngikut gepeng ? terimakaish..
\o/
terselesaikan .. thankyou DTE!
release "-c"
lucu nih agan hehehe, nanya sendiri jawab sendiri \o/
request buat thumbnail yg wide dong gan, buat diterapin diblog saya timeslib.com dong :)
kalau mau nerapin di blog saya timeslib.com biar thumbnailnya wide gmna gan , plese, help :(
gan, kalo itu ".post-body img", "72", "176", "130"); saya ganti angka 176 sama 130 nya jadi 280 sama 147, trus angka 72nya jadi brapa ya?
timeslib.com
mas saya mau tanya..
kalau di blog saya ini gimana untuk ngeresize gambar pada tampilan homepage nya ?
http://himapsikunja.blogspot.com/
Ini wide → http://jsfiddle.net/tovic/hzQN7/82
$('.post img').wrap('<div class="img-wide"></div>').resizeThumb(72, 200);
.post .img-wide {
float:left;
margin:0 10px 0 0;
width:200px;
height:140px;
overflow:hidden;
}
Pakai tag kondisional → /2011/08/tag-kondisional-tingkat-lanjut.html
Angka 72 itu bawaan, tidak perlu diganti-ganti.
mas mau nanya ini kok ngeblur ya tumbnail postingnya udah saya praktekin gak berubah sama sekali , mohon pencerahannya mas? kasih solusi www.hyundaipurwokerto.com . tolong bantu mas
Loading lama.
This comment has been removed by the author.
Kadang script gk keload, jadi gambar ngeblur gitu.. gimana cara ngatasin masalah tersebut
itu kan jika ukuran image thumbnail nya sama seperti 200 x 200
nah jika berbeda seperti punya saya 240px buat lebar dan 150px buat tinggi itu gimana gan ?? mohon penjelasannya
Biasanya karena konflik dengan skrip yang ada yang dituliskan di atasnya. Misal skrip yang terletak di sebelak atas skrip thumbnail ini rusak, itu akan membuat skrip di bawahnya menjadi gagal dieksekusi.
Sudah ada jawabannya di sini → /2012/07/memperbesar-thumbnail-posting.html?showComment=1426945222112#c6120402979896216573
keren mas tutorialnya...salam
keren artikelnya gan :D
Mas Taufik,
permisi numpang tanya,
thumbnail URL popular post di blog saya ko jadi berubah dari .../s72-c/gambarku34.jpg
jadi .../w72-h72-p-nu/gambarku34.jpg
yang saya mau tanyakan gimana cara ngubah baris script ini:
image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
supaya bisa bekerja diblog saya
terimakasih mas Taufik
Coba:
foo.replace(/\/s72\-c/, '/w' + size + '-h' + size + '-p-nu/');
Makasih gan ilmunya..
,,, artikel nya bagus sekali lengkap dan detail patut jadi contoh,, saya mau minta tolong, saya ingin ukuran tumbnail di halaman homepage saya berukuran 150x150 saja, tapi saat artikel tersebut di buka atau di baca tetap dengan ukuran asli nya bukan 150x150 sperti di homepage nya? apakah bisa? mohon bantuan nya, saya lihat saudaraahli dalam hal ini, mohon bantuanya ya,, terima kasih
Cek → /2011/08/pemahaman-tag-kondisional-tingkat.html
klo memperbesar ukuran gambar di homepage versi mobile caranya gmn gan ?
→ /2016/06/mengubah-ukuran-thumbnail-tanpa.html
Mas, cara mendapatkan tautan .jpg dari https://lh3.googleusercontent.com gimana? Yang bukan dari blogspot?
klo yg mau dirubah hanya thumbnile dari satu post aja gimana?jadi misalkan dalam homepage, ada 5 post yang ditampilkan, jadi yang 4 post, ukuran thumbnile nya biasa aja, nah yang satu paling atas, dirubah jadi full.
gimana tu gan?
Mau nyoba bantu jawab, semoga bener.
Coba kreasikan dengan kode CSS :nth-first-child.
Jika berhasil, masalah terakhirnya ada di resolusi gambar yang kemungkinan bakal pecah.
Jadi, anda bisa menggunakan script jQuery untuk merubah resolusi gambar tersebut agar 'normal' kembali.
Post a Comment
<< Home