WordPress-এ গ্যালারি এবং স্লাইডশো তৈরি করা খুবই সহজ এবং ব্যবহারকারী-বান্ধব। গুটেনবার্গ ব্লক এডিটরের মাধ্যমে আপনি সহজেই ছবি বা মিডিয়া গ্যালারি তৈরি করতে পারেন, যা আপনার সাইটের ভিজ্যুয়াল অ্যাপিল বাড়াতে সহায়তা করে। গ্যালারি এবং স্লাইডশো দুটি আলাদা ধরনের উপাদান, কিন্তু সেগুলোর মধ্যে বেশ কিছু মিল রয়েছে।
এই গাইডে, আমরা গ্যালারি এবং স্লাইডশো তৈরি করার প্রক্রিয়া আলোচনা করব।
1. গ্যালারি তৈরি করা
গুটেনবার্গ এডিটরের মাধ্যমে আপনি সহজেই গ্যালারি তৈরি করতে পারেন, যেখানে একাধিক ছবি একসঙ্গে প্রদর্শিত হয়। এটি কন্টেন্টে ভিজ্যুয়াল ইফেক্ট তৈরি করে এবং পাঠকদের জন্য আকর্ষণীয় করে তোলে।
গ্যালারি ব্লক ব্যবহার করে গ্যালারি তৈরি করা
- নতুন পোস্ট বা পেজ তৈরি করুন:
- Dashboard থেকে Posts বা Pages মেনুতে গিয়ে Add New ক্লিক করুন।
- গ্যালারি ব্লক যোগ করুন:
- গুটেনবার্গ এডিটরে, + (Plus) সাইন ক্লিক করুন এবং Gallery ব্লক নির্বাচন করুন।
- ছবি আপলোড করুন:
- Add Images বাটনে ক্লিক করুন এবং আপনার কম্পিউটার থেকে ছবিগুলি নির্বাচন করুন, অথবা আপনি মিডিয়া লাইব্রেরি থেকে ছবি নির্বাচন করতে পারেন।
- একাধিক ছবি নির্বাচন করার পর, Add to Gallery ক্লিক করুন।
- ছবি কাস্টমাইজেশন:
- আপনি ছবির সাইজ পরিবর্তন করতে পারেন, যেমন Grid Layout, Masonry Layout বা Slideshow (অথবা ক্যারাউসেল) মোড।
- ছবি নির্বাচন করার পর, আপনি ছবির আকার, মার্জিন, সীমানা ইত্যাদি কাস্টমাইজ করতে পারবেন।
- ছবি ক্রপ এবং অ্যলাইমেন্ট:
- ছবির অবস্থান (alignment) পরিবর্তন করতে আপনি ছবি ব্লকের সেটিংসে গিয়ে "Left", "Center", "Right" আলাইনমেন্ট নির্বাচন করতে পারবেন।
গ্যালারি কাস্টমাইজেশন এবং সেটিংস
- Columns: গ্যালারির ছবির কলাম সংখ্যা নির্ধারণ করতে পারবেন (যেমন 2, 3, 4 কলাম)। এটি গ্যালারি কনফিগারেশনের মধ্যে থাকবে।
- Link to: গ্যালারি ছবির জন্য লিঙ্ক সেট করতে পারেন (None, Media File, Attachment Page)।
- Image Caption: প্রতিটি ছবির জন্য ক্যাপশন যোগ করতে পারবেন, যা ছবির নিচে প্রদর্শিত হবে।
2. স্লাইডশো তৈরি করা
WordPress-এর ডিফল্ট গুটেনবার্গ ব্লক এডিটরে সরাসরি স্লাইডশো তৈরি করার জন্য কোনো বিল্ট-ইন ব্লক নেই। তবে, স্লাইডশো তৈরি করার জন্য কিছু প্লাগইন এবং কাস্টম কোড ব্যবহার করা যেতে পারে। এখানে আমরা দুটি পদ্ধতি আলোচনা করব:
প্লাগইন ব্যবহার করে স্লাইডশো তৈরি করা
স্লাইডশো তৈরি করার জন্য অনেক জনপ্রিয় প্লাগইন রয়েছে। কিছু উদাহরণ:
- MetaSlider: এটি সহজে স্লাইডশো তৈরি করার জন্য একটি জনপ্রিয় প্লাগইন।
- Smart Slider 3: এটি একটি উন্নত স্লাইডশো প্লাগইন যা বিভিন্ন কাস্টমাইজেশন অপশন প্রদান করে।
- Solis Slider: একাধিক ট্রানজিশন ইফেক্ট এবং ড্র্যাগ-এন্ড-ড্রপ ইন্টারফেসের মাধ্যমে স্লাইডশো তৈরি করতে সাহায্য করে।
MetaSlider প্লাগইন ব্যবহার করে স্লাইডশো তৈরি করা
- MetaSlider প্লাগইন ইনস্টল করুন:
- Plugins মেনুতে গিয়ে Add New ক্লিক করুন এবং সার্চ বক্সে MetaSlider লিখুন।
- প্লাগইনটি ইনস্টল এবং সক্রিয় করুন।
- নতুন স্লাইডশো তৈরি করুন:
- প্লাগইন সক্রিয় করার পর, MetaSlider মেনুতে যান এবং Create your first slider ক্লিক করুন।
- ছবির জন্য Add Slide বাটনে ক্লিক করুন এবং আপনার ছবি আপলোড করুন।
- স্লাইডশো সেটিংস কাস্টমাইজ করুন:
- স্লাইডশোর সাইজ, ট্রানজিশন ইফেক্ট, গতি, অটোমেটিক প্লে ইত্যাদি কাস্টমাইজ করুন।
- স্লাইডশোতে ক্যাপশন, লিঙ্ক, বা বাটন যোগ করতে পারেন।
- স্লাইডশো এমবেড করুন:
- স্লাইডশো তৈরি হয়ে গেলে, Save ক্লিক করুন এবং স্লাইডশো কোড কপি করে পোস্ট বা পেজে এমবেড করুন।
কোড ব্যবহার করে স্লাইডশো তৈরি করা
HTML এবং CSS ব্যবহার করে স্লাইডশো তৈরি:
- আপনি স্লাইডশো তৈরি করার জন্য কাস্টম HTML কোড এবং CSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ:
<div class="slider-container"> <div class="slide"> <img src="image1.jpg" alt="Slide 1"> </div> <div class="slide"> <img src="image2.jpg" alt="Slide 2"> </div> <div class="slide"> <img src="image3.jpg" alt="Slide 3"> </div> </div>CSS:
.slider-container { position: relative; width: 100%; max-width: 800px; margin: auto; } .slide { display: none; } .active { display: block; }এটি একটি স্লাইডার তৈরি করবে, এবং আপনি জাভাস্ক্রিপ্ট বা জেকুয়েরি ব্যবহার করে স্লাইডগুলো অটো-সুইচ করতে পারবেন।
3. গ্যালারি এবং স্লাইডশো ব্যবহারের সুবিধা
- গ্যালারি: একাধিক ছবি একটি সারিবদ্ধভাবে প্রদর্শন করার জন্য ব্যবহৃত হয়, যা সাইটের ভিজ্যুয়াল অ্যাপিল বাড়াতে সহায়তা করে।
- স্লাইডশো: ছবির একটি স্বয়ংক্রিয় স্যুইচিং সিস্টেম তৈরি করে, যা সাইটে বিভিন্ন মূড বা থিম যোগ করতে সাহায্য করে।
এইভাবে আপনি WordPress-এ গ্যালারি এবং স্লাইডশো তৈরি করতে পারেন এবং আপনার সাইটের ভিজ্যুয়াল কন্টেন্ট আরও আকর্ষণীয় করে তুলতে পারেন।
Read more
