Media Object Layout

Bulma ফ্রেমওয়ার্কে Media Object Layout একটি অত্যন্ত জনপ্রিয় এবং শক্তিশালী লেআউট সিস্টেম, যা মূলত কনটেন্টের একক আইটেম বা উপাদানকে সজ্জিত করতে ব্যবহৃত হয়। এটি খুব সহজে আপনি ছবি, টেক্সট, এবং অন্যান্য উপাদানগুলোকে একসাথে সাজাতে পারেন।

Media Object একটি কনটেন্ট ব্লক বা কার্ডের মধ্যে আলাদা আলাদা উপাদান (যেমন ছবি, টেক্সট বা লিংক) রাখার জন্য ব্যবহৃত হয়। এটি মূলত image এবং text বা অন্যান্য কন্টেন্টের সন্নিবেশ ঘটাতে ব্যবহৃত হয়।

১. Media Object Layout এর মূল বৈশিষ্ট্য

• Responsive: Bulma এর Media Object সিস্টেম স্বয়ংক্রিয়ভাবে রেসপনসিভ হয়। অর্থাৎ, এটি মোবাইল থেকে ডেস্কটপে সুন্দরভাবে মানিয়ে নেবে।
• Image + Text Layout: এটি ছবির সাথে টেক্সট বা অন্যান্য কনটেন্ট একত্রে সন্নিবেশ করতে ব্যবহৃত হয়। সাধারণত ব্যবহারকারীর ছবি বা আইকন এবং তার সাথে একটি বর্ণনামূলক টেক্সট থাকে।
• Flexbox ব্যবহার: Media Object ডিজাইন তৈরিতে Flexbox ব্যবহার করা হয়, যা লেআউটের সন্নিবেশকে আরও সহজ ও কার্যকরী করে তোলে।

২. Media Object Layout এর সাধারণ ব্যবহার

Bulma ফ্রেমওয়ার্কে Media Object তৈরি করতে আপনি সহজে media, media-left, media-content এবং অন্যান্য ক্লাস ব্যবহার করতে পারেন।

উদাহরণ: Media Object

<div class="media">
  <div class="media-left">
    <figure class="image is-48x48">
      <img src="https://via.placeholder.com/48" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-4">John Doe</p>
    <p class="subtitle is-6">Software Developer</p>
  </div>
</div>

এখানে:

• media ক্লাসটি মূল কনটেইনার।
• media-left ক্লাসটি ছবির জন্য নির্ধারিত কলাম।
• media-content ক্লাসটি টেক্সট কনটেন্টের জন্য ব্যবহৃত।
• image এবং figure ট্যাগ ছবি প্রদর্শনের জন্য ব্যবহার করা হয়েছে।

৩. Media Object Layout এর কাস্টমাইজেশন

আপনি Media Object এর মধ্যে বিভিন্ন সাইজের ছবি, বিভিন্ন টেক্সট স্টাইল, এবং অন্যান্য কনটেন্ট কাস্টমাইজ করতে পারেন।

উদাহরণ: কাস্টম মিডিয়া অবজেক্ট

<div class="media">
  <div class="media-left">
    <figure class="image is-128x128">
      <img src="https://via.placeholder.com/128" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-3">Jane Smith</p>
    <p class="subtitle is-5">UX/UI Designer</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque urna eu augue cursus, in euismod lorem dictum.</p>
  </div>
</div>

এখানে:

• is-128x128 ক্লাসটি ছবির সাইজ কাস্টমাইজ করেছে।
• title এবং subtitle এর আকার পরিবর্তন করা হয়েছে।

৪. Multiple Media Objects

আপনি একাধিক Media Object তৈরি করতে পারেন, যেমন একটি কন্টেন্ট লিস্ট যেখানে একাধিক মিডিয়া অবজেক্ট থাকবে।

উদাহরণ: একাধিক Media Object

<div class="media">
  <div class="media-left">
    <figure class="image is-48x48">
      <img src="https://via.placeholder.com/48" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-4">John Doe</p>
    <p class="subtitle is-6">Software Engineer</p>
  </div>
</div>

<div class="media">
  <div class="media-left">
    <figure class="image is-48x48">
      <img src="https://via.placeholder.com/48" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-4">Emma Stone</p>
    <p class="subtitle is-6">Graphic Designer</p>
  </div>
</div>

এখানে দুটি আলাদা Media Object তৈরি করা হয়েছে, যেখানে প্রথমটি জন ডো এবং দ্বিতীয়টি এমা স্টোনের জন্য।

৫. Media Object এর সাথে অন্যান্য Bulma উপাদান ব্যবহার

আপনি Media Object এর সাথে অন্যান্য Bulma উপাদান যেমন Buttons, Icons, Notifications ইত্যাদি ব্যবহার করতে পারেন। এটি আরও ভিজ্যুয়ালি আকর্ষণীয় এবং কার্যকরী করে তোলে।

উদাহরণ: Media Object with Button

<div class="media">
  <div class="media-left">
    <figure class="image is-48x48">
      <img src="https://via.placeholder.com/48" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-4">Alex Green</p>
    <p class="subtitle is-6">Product Manager</p>
    <button class="button is-primary">Follow</button>
  </div>
</div>

এখানে:

• Follow বাটনটি Media Object এর টেক্সট কনটেন্টের পাশে রাখা হয়েছে, যা সাইটের ইন্টারঅ্যাকটিভ ফিচার হিসেবে কাজ করবে।

৬. Media Object Layout এর সাথে Flexbox কাস্টমাইজেশন

Bulma এর Media Object মূলত Flexbox এর উপর ভিত্তি করে কাজ করে, তাই আপনি এটি আরও কাস্টমাইজ করতে পারেন, যেমন উপাদানগুলোর অবস্থান, অ্যালাইনমেন্ট ইত্যাদি।

উদাহরণ: Media Object with Flexbox

<div class="media is-align-items-center">
  <div class="media-left">
    <figure class="image is-48x48">
      <img src="https://via.placeholder.com/48" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-4">Robert Brown</p>
    <p class="subtitle is-6">Web Developer</p>
  </div>
</div>

এখানে:

• is-align-items-center ক্লাসটি Flexbox এর মাধ্যমে মিডিয়া অবজেক্টের উপাদানগুলোকে সেন্টারে অ্যালাইন করেছে।

সারাংশ

Bulma এর Media Object Layout একটি শক্তিশালী উপাদান, যা ছবি এবং টেক্সটকে একত্রে সুন্দরভাবে সাজাতে ব্যবহৃত হয়। এটি বিভিন্ন সাইজ এবং কন্টেন্টের সঙ্গে কাজ করতে সক্ষম এবং Bulma এর Flexbox ভিত্তিক সিস্টেমের মাধ্যমে রেসপনসিভ ডিজাইন তৈরি করতে সাহায্য করে। আপনি Media Object এর মধ্যে ইমেজ, টেক্সট, বাটন বা অন্যান্য উপাদান যোগ করতে পারেন, যা আপনার ওয়েবসাইটে একটি পরিচ্ছন্ন এবং আকর্ষণীয় লেআউট তৈরি করতে সাহায্য করবে।