লেখক: বেশীরভাগ লোক ব্লগের Thumbnails ও Thumbnails Image এর সাইজ ছোট-বড় করার ক্ষেত্রে CSS ব্যবহার করেন। CSS কোড ব্যবহার করে যদিও Image এর সাইজ ছোট বড় করা সম্ভব হয় কিন্তু দেখা যায় CSS কোড Thumbnail Image এর Resolution নষ্ট করে দিচ্ছে কিংবা Image এর কিছু অংশ Thumbnail এর বাহিরে পড়ে থাকছে। এতেকরে Image টি Thumbnail এর সাথে ঠিকমত Adjust না হওয়ার কারনে দেখতে বিশ্রি লাগে।
আমরা আজ যেটি শেয়ার করছি সেটিতে ছোট্ট একটি Jquery ব্যবহার করেছি। এই Jquery এর সাহায্যে Popular Post, Recent Post, Related Post Widget সহ যে কোন ধরনের Thumbnails ও Thumbnails Image এর সাইজ ছোট-বড় করতে পারবেন। এটি ব্লগের Thumbnails Image এর সাইজ ঠিক রাখার পাশাপাশি Resolution ঠিক রেখে Image-কে Thumbnail Area এর বাহিরে যাওয়া থেকে বিরত রাখবে।
কিভাবে ব্লগে যুক্ত করবেন?
- প্রথমে ব্লগে লগইন করুন।
- তারপর ব্লগার ড্যাশবোর্ডে হতে Template > Edit Html এ ক্লিক করুন।
- কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
- এখন নিচের Jquery কোডটি </head> ট্যাগের ঠিক উপরে পেষ্ট করুন।
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".item-thumbnail").find("img").each(function(b,a){a=
$(a);a.attr({src:a.attr("src").replace(/s72-c/,"w250-h150").replace(/default/,0)});a.attr("width",250);a.attr("height",150)})})
//]]>
</script>
- সবশেষে Save Template এ ক্লিক করলেই কাজ OK.
- নোটঃ উপরের কোডটিতে ব্লগের Popular Post এর জন্য সেট করে দেয়া আছে। আপনি যদি অন্য কোন Widget এর Thumbnail ব্যবহার করতে চান তাহলে হলুদ কালারের .item-thumbnail ক্লাসের জায়গায় আপনার কাঙ্খিত উইজেটটির আইডি অথবা ক্লাস বসিয়ে দিলেই হয়ে যাবে।
কাষ্টমাইজেশনঃ
- আপনার ব্লগে যদি Jquery এর কোন ভার্সন যুক্ত করা থাকে তাহলে সবুজ কালারের লাইনটি যুক্ত করার কোন প্রয়োজন নেই।
- লাল কালারের w250 সংখ্যাটি Thumbnail Width এর সাথে মিল রেখে দেবেন।
- নীল কালারের h150 সংখ্যাটি Thumbnail Height এর সাথে মিল রেখে দেবেন।
- সর্বশেষ পিংক কালারের Width ও Height আপনার ইচ্ছামত বসাতে পারেন।
