Pertanyaan Al-Firouz: Tentang bagaimana cara memperbesar thumbnail pada posting auto read-more tanpa JavaScript dengan jQuery:
Pertama-tama, Saya tidak akan menunjukkan metode mengubah ukuran thumbnail Picasa dengan jQuery terlebih dahulu alasannya yaitu ada cara sederhana yang dapat dilakukan dengan gampang memakai JavaScript mentah. Pada intinya, kita hanya mencoba mengubah ukuran thumbnail kecil dari path-nya ibarat yang pernah Saya ulas dengan cukup terperinci 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, contohnya s200-c.
Metode 1: Menggunakan JavaScript Murni
Salin isyarat 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 dihukum pada bab ini:
resizeThumb('main-wrapper', 200);main-wrapper yaitu ID kolom posting, dan 200 yaitu 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 isyarat CSS ini:
.post-thumbnail { width:72px; height:72px; float:left; margin:0 10px 0 0; }… menjadi berukuran sama dengan ukuran pembesaran thumbnail. Menyesuaikan pola di atas, maka ukuran lebar dan tinggi thumbnail harus diubah menjadi 200px.
Simpan semua perubahan dan lihat hasilnya.
Metode 2: Menggunakan jQuery
Pada pada dasarnya cara kerjanya sama, hanya metodenya saja yang berbeda. Salin isyarat ini dan letakkan di atas isyarat </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 memakai selektor $('.post-thumbnail') untuk menargetkan thumbnail posting secara langsung. Anda dapat saja mengubah selektornya menjadi $('#main-wrapper img') atau $('.post img:first') atau bahkan yang lainnya bila template Anda mempunyai struktur elemen yang unik. Pada intinya, targetkan gambarnya! Alasan Saya tidak memakai nama kelas thumbnail pada versi manipulasi JavaScript yaitu alasannya yaitu Saya tidak ingin mengambil resiko mengingat document.getElementsByClassName tidak didukung oleh beberapa peramban bau tanah - When can I use getElementsByClassName?
Thumbnail Lain?
Bukan hanya thumbnail pada posting saja yang dapat diubah ukurannya, tapi juga thumbnail-thumbnail pada widget lain, contohnya pada widget Posting Populer yang caranya juga pernah dituliskan oleh MS-Potilas di artikelnya (Kebetulan Saya mendapat inspirasi JavaScript mentahnya dari sana). Di sini Saya hanya mengonversi kodenya menjadi plugin. Asalkan thumbnail tersebut diunggah pada direktori Picasa, maka kita dapat menemukan ciri khususnya dalam path lokasi gambar ibarat s72-c, s200, s1600 dan lain sebagainya. Dari kunci itulah kita dapat mengubah ukuran-ukuran gambar memakai JavaScript dengan cara mengganti besarannya. berikut ini yaitu pola 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 dapat dilepaskan bila tujuan kita yaitu untuk mengubah ukuran thumbnail widget, alasannya yaitu umumnya widget muncul pada semua tipe halaman.
Catatan Tambahan: Saya melihat beberapa pembaca yang mendeklarasikan fungsi resizeThumb() berkali-kali pada daerah yang berbeda. Padahal fungsi ini cukup dinyatakan satu kali saja (Saya sarankan untuk meletakkannya di area <head>):
function resizeThumb(parentID, size) { ... }Setelah itu Anda dapat memakai fungsi tersebut sebanyak yang Anda mau pada elemen mana saja:
resizeThumb('Blog1', 300); resizeThumb('PopularPosts1', 200); resizeThumb('Widget1', 50); ...