কিভাবে ব্লগের Images ও Post Thumbnails Responsive করতে হয়?

আমরা ইতিপূর্বে Responsive Blog Design তৈরির কয়েকটি পোষ্ট শেয়ার করেছি। আজকের পোষ্টের মাধ্যমে আমাদের এ সিরিজের সকল পোষ্ট সমাপ্ত হবে। আমরা আজকের পোষ্টে শেয়ার করব কিভাবে Blog Posts Image ও Posts Thumbnail Image সহ সকল সেকশনের Image এর Resolution নষ্ট না করে Responsive করতে হয়? সাধারণত ব্লগের বেশীর ভাগ Image সাইজ বড় হওয়ার করনের ছোট মাপের ডিভাইসগুলিতে Image Adjust হয় না। ফলে পোষ্টের Image ব্রাউজারের বাহিরে অবস্থান নেয়। এতে ব্লগ পোষ্টগুলির Interface নষ্ট হয়ে যায়।

 কেন ব্লগের Images Mobile Friendly করতে হয়?

বেশীরভাগ মোবাইল বা স্মার্ট ফোন ছোট সাইজের এবং মোবাইল ইন্টারনেট Low Bandwidth এর হয়ে থাকে। এর ফলে মোবাইল ডিভাইস থেকে ভিজিট করার সময় Image লোড নিতে সময় নেওয়ার পাশাপাশি প্রচুর পরিমানে Bandwidth অযথা নষ্ট করে। যার দুটিই বিরক্তকর এবং ব্যয়বহুল। ব্লগের Image Responsive করার ফলে সকল ধরনের ছোট বড় ডিভাইসের সাইজ অনুযায়ী Image গুলি Auto Adjust হয়ে যায়। যার ফলে ব্লগের Interface ভাল হওয়ার পাশাপাশি দ্রুত লোড নিয়ে অযথা Bandwidth নষ্ট হওয়ার হাত থেকে রক্ষা করে। অধীকন্তু Responsive Image আপনার ব্লগের SEO Ranking এর ক্ষেত্রেও গুরুত্বপূর্ণ অবদান রাখবে।

অবস্থানবেধে Image Size এর পরিবর্তনঃ সাধারণ Responsive ব্লগের Image গুলি ডিভাইসের সাইজবেধে বিভিন্ন রকমের হয়ে থাকে। বিশেষ করে ব্লগের হোম পেজের Image ছোট ডিভাইসের মাঝামাঝি অবস্থান করে এবং আর্টিকের Image এর নিচে অবস্থান করে, অন্যদিকে মাঝারি মাপের ডিভাইসে হোম পেজের Image বাম পাশে থেকে আর্টিকেল Float হয়ে ডান পাশে অবস্থান নেয়। এতেকরে সকল ডিভাইস থেকে ব্লগের হোম পেজকে আকর্ষনীয় দেখা যায়। তাছাড়া ব্লগের পোষ্ট পেজের Image Responsive করার পর সকল ধরনের ডিভাইসের সাইজ অনুযায়ী Automatic ছোট বড় হতে থাকে। যার ফলে পাঠকের চাহিদা সহজে মেঠানো যায়। নিচে আমরা তিনটি Screenshot এর মাধ্যমে আপনাদের ধারনা দিচ্ছি Responsive ব্লগের Image অবস্থানবেধে কি রকম হয়?

ছোট ডিভাইসের হোম পেজ হবে নিচের চিত্রের মত-

মাঝারি মাপের ডিভাইসের হোম পেজ হবে নিচের চিত্রের মত-

ব্লগের পোষ্ট পেজের Image নিচের চিত্রেরমত সকল ডিভাইসে Auto Adjust হতে থাকবে-

 কিভাবে ব্লগের Image Responsive করবেন?

• প্রথমে ব্লগে লগইন করুন।
• তারপর Template > Edit Html এ ক্লিক করুন।
• এখন কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
• তারপর নিচের Media Queries টি ]]></b:skin> এর উপরে পেষ্ট করুন।

@media only screen and (max-width:768px) {

.headerleft a img, .headerright a img {max-width:75%!important;margin-left:0;position:absolute;height:auto;left:30px}

.post img, .post a img {max-width:95%;height:auto}

#sidebar .widget-content img, #sidebar .widget-content a img {max-width:98%;height:auto}

#footer-wrapper img, #footerbar-wrapper a img {max-width:98%;height:auto}

}

• উপরের সবগুলি সেকশনেরই Max-Width ব্যবহার করা হয়েছে। এটি Image Responsive করার জন্য খুব গুরুত্বপূর্ণ একটি মাপ। এটি সবসময় 100% এর কম রাখবেন। তাহলে প্রত্যেকটি Image মূল জায়গার চেয়ে কিছুটা ছোট হয়ে ঠিকমত অবস্থান করবে।
• নোটঃ উপরের সবুজ কালের ID ও Class গুলি আপনার ব্লগের টেমপ্লেটের সাথে হুবহু মিল থাকতে নাও পারে। কাজেই আপনার ব্লগের সঠিক ID ও Class খোঁজে নিয়ে ঐ জায়গাগুলিতে বসাতে হবে।

 কিভাবে Home Page এর Post Thumbnails Image কে Responsive করবেন?

• আবার কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
• তারপর নিচের Media Queries টি ]]></b:skin> এর নিচে পেষ্ট করুন।

<b:if cond='data:blog.pageType == "index"'>
<style>
   @media only screen and (max-width:786px) {
   .post img, .post a img {max-width:50%; height:auto; float:left; margin: 0px 10px 10px 0px}
}
   @media only screen and (max-width:480px) {
   .post img, .post a img {width:95%; float:none; height:auto; clear:both; margin-bottom:10px}
}
</style>
</b:if>

• উপরের কোডটিতে একটি Conditional Tag ব্যবহার করা হয়েছে। এটি আপনার ব্লগের Home Page এর Thumbnails Image -কে সকল ধরনের ডিভাইসের উপযোগী করে নেবে, যেটি আমরা উপরের প্রথম দুটি মোবাইল Screenshot এ দেখিয়েছি।
• সবশেষে Template Save করে নিন।

সাহায্য জিজ্ঞাসাঃ এখন আপনি ইচ্ছে করলে আমাদের ০৭ টি টিউটরিয়ালের মাধ্যমে আপনার ব্লগকে পরিপূর্ণ Responsive করে নিতে পারবেন। কারণ আমরা সবগুলি পোষ্ট বিশ্লেষণ করে ধারাবাহিকভাবে বর্ণনা করেছি। তারপরও যদি কোন পোষ্টের অংশ বুঝতে অসুবিধা হয় তাহলে আমাদের জানাতে পারেন। আমরা আপনার সমস্যা সমাধানের পরিপূর্ণ চেষ্টা করব।