গ্যালারি

গ্যালারি ক্ষেত্রটি সম্পাদকদের মাস্টার অ্যাডঅনগুলির সাথে নির্মিত একটি কাস্টম উইজেটের জন্য একবারে চিত্রগুলির একটি সম্পূর্ণ সেট বাছাই করতে দেয়৷ উইজেট নির্মাতা। আপনার টেমপ্লেট সেটের উপর লুপ করে এবং প্রতি ছবিতে একটি আইটেম প্রিন্ট করে, তাই উইজেটটি ছবির সংখ্যার সাথে বৃদ্ধি বা সঙ্কুচিত হয়। ফটো গ্রিড, পোর্টফোলিও দেয়াল, লোগো সারি এবং ইমেজ স্লাইডারের জন্য এটি ব্যবহার করুন।

গ্যালারি একটি প্রো ক্ষেত্র। বিনামূল্যের প্লাগইনটিতে একটি সীমিত উইজেট বিল্ডার রয়েছে এবং ক্ষেত্রগুলির সম্পূর্ণ সেট সহ আসে৷ মাস্টার অ্যাডনস প্রো.

গ্যালারি ক্ষেত্র কি করে #

• এটি এলিমেন্টরে আপনার উইজেটের প্যানেলে একটি গ্যালারি বক্স যোগ করে। সম্পাদকরা মিডিয়া লাইব্রেরি থেকে একযোগে বেশ কয়েকটি ছবি বেছে নেন।
• চিত্রগুলি একটি তালিকা হিসাবে সংরক্ষণ করা হয়, সম্পাদক তাদের সাজানো ক্রমে। প্রতিটি ইমেজ একটি আছে id এবং ক url.
• আপনার টেমপ্লেট একটি দিয়ে তালিকা প্রিন্ট করে {% for %} লুপ।
• লেআউট আপনার CSS পর্যন্ত। লুপ আইটেমগুলি প্রিন্ট করে এবং একটি গ্রিড বা ফ্লেক্স কন্টেইনার সেগুলিকে সাজায়।

আপনি যদি এখনও একটি উইজেট তৈরি না করে থাকেন তবে পড়ুন উইজেট নির্মাতা ওভারভিউ প্রথম।

আপনি শুরু করার আগে #

• এলিমেন্টর ইনস্টল এবং সক্রিয় সহ ওয়ার্ডপ্রেস।
• Elementor এবং Master Addons Pro এর জন্য মাস্টার অ্যাডঅন, উভয়ই সক্রিয়। দ্য ইনস্টলেশন গাইড সেটআপ কভার করে।
• আপনার মিডিয়া লাইব্রেরিতে কিছু ছবি।
• উইজেট বিল্ডারে একটি উইজেট খোলা। এই গাইডের উদাহরণ হল একটি "ফটো গ্রিড" উইজেট যার নাম একটি গ্যালারি ক্ষেত্র photos.

কিভাবে একটি গ্যালারি ক্ষেত্র যোগ করতে হয় #

1. যাও মাস্টার অ্যাডঅন > উইজেট নির্মাতা এবং আপনার উইজেট খুলুন।
2. উপর বিষয়বস্তু ট্যাব, একটি বিভাগ যোগ করুন, উদাহরণস্বরূপ “গ্যালারী”।
3. টাইপ করা gallery বাম দিকে ফিল্ড সার্চ বক্সে।
4. টেনে আনুন গ্যালারি বিভাগে। এর সেটিংস বাম সাইডবারে খোলে।

গ্যালারি ক্ষেত্রের বিকল্পগুলি ব্যাখ্যা করা হয়েছে #

• লেবেল এলিমেন্টরের গ্যালারি বক্সের উপরের লেখাটি, উদাহরণস্বরূপ “Photos”।
• নাম ক্ষেত্রের অনন্য আইডি এবং আপনি লুপ ওভার তালিকা, উদাহরণস্বরূপ photos. অক্ষর, সংখ্যা এবং আন্ডারস্কোর শুধুমাত্র।
• বর্ণনা elementor এ নিয়ন্ত্রণে উপস্থিত হয়।
• ডিফল্ট ছবি একটি আছে ছবি যোগ করুন একটি স্থানধারক স্লট যোগ করে এমন বোতাম। এটি সরানোর জন্য একটি ক্রসের জন্য একটি স্লটের উপর ঘোরান এবং সেই স্লটের জন্য একটি বাস্তব চিত্র চয়ন করতে একটি পেন্সিল।

আমাদের পরীক্ষায়, ডিফল্ট ইমেজের অধীনে সেট করা ছবিগুলি এলিমেন্টরের কাছে পাস করা হয়নি। উইজেটের একটি নতুন অনুলিপি পরিবর্তে একটি একক স্থানধারক দিয়ে শুরু হয়েছে, যা লুপ দুটি খালি আইটেম হিসাবে পড়ে। নীচের টেমপ্লেটটি সেগুলি এড়িয়ে যায়, তাই একটি পৃষ্ঠায় উইজেটটি ড্রপ করার পরে সম্পাদকদের তাদের নিজস্ব ছবি যুক্ত করার পরিকল্পনা করুন৷।

সাধারণ সেটিংস অন্যান্য ক্ষেত্রের মতো কাজ করে।

আপনার টেমপ্লেটের ছবিগুলির উপর লুপ করুন #

একটি গ্যালারি একটি তালিকা, তাই {{ photos }} নিজস্ব প্রিন্টে কিছুই দরকারী নয়। এটির উপর লুপ করুন এবং লুপের ভিতরে প্রতিটি চিত্র মুদ্রণ করুন:

{% if photos %}
<div class="photo-grid">
  {% for img in photos %}
    {% if img.url %}
      <figure class="photo-cell">
        <img src="{{ img.url }}" alt="">
      </figure>
    {% endif %}
  {% endfor %}
</div>
{% endif %}

• photos মাঠের নাম। img লুপে বর্তমান চিত্রের জন্য আপনি বেছে নেওয়া একটি নাম।
• {{ img.url }} ইমেজ ফাইল URL এবং {{ img.id }} এটি এর মিডিয়া লাইব্রেরি আইডি।
• বাইরের {% if photos %} গ্যালারি খালি থাকলে পুরো গ্রিড এড়িয়ে যায়।
• ভেতরের {% if img.url %} URL ছাড়া যেকোনো আইটেম এড়িয়ে যায়, যেমন স্থানধারক একটি নতুন উইজেট দিয়ে শুরু হয়।

CSS ট্যাবে আইটেমগুলি সাজান। এই গ্রিড তিনটি সমান কলাম তৈরি করে এবং প্রতিটি ফটোকে একই আকারে ক্রপ করে:

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.photo-cell { margin: 0; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

ক্লিক করুন সেটিংস সংরক্ষণ করুন আপনার কাজ শেষ হলে।

এলিমেন্টরে গ্যালারি নিয়ন্ত্রণ ব্যবহার করুন #

একটি পৃষ্ঠায় উইজেট যোগ করুন, অথবা পৃষ্ঠাটি ইতিমধ্যে খোলা থাকলে সম্পাদকটি পুনরায় লোড করুন৷ গ্যালারি বক্স দেখায় কতগুলি ছবি নির্বাচন করা হয়েছে এবং প্রতিটির একটি থাম্বনেইল। ট্র্যাশ আইকন পুরো সেট পরিষ্কার করে।

ওয়ার্ডপ্রেস গ্যালারি উইন্ডো খুলতে থাম্বনেইলে ক্লিক করুন। তাদের ক্রম পরিবর্তন করতে ছবি টেনে আনুন, ক্লিক করুন বিপরীত ক্রম এটি উল্টাতে, ব্যবহার করুন গ্যালারিতে যোগ করুন আরও ছবি বাছাই করতে, এবং এটি সরাতে একটি চিত্রের ক্রস ক্লিক করুন। ক্লিক করুন গ্যালারি ঢোকান সেট সংরক্ষণ করতে। গ্রিড একই ক্রমে আপডেট হয়।

সাধারণ ব্যবহারের ক্ষেত্রে #

• ফটো এবং পোর্টফোলিও গ্রিড।
• ক্লায়েন্ট বা অংশীদারদের জন্য লোগো দেয়াল।
• ইমেজ স্লাইডার, লুপ প্রিন্টিং সহ প্রতি ইমেজ একটি স্লাইড।
• আগে এবং পরে বা পণ্য ইমেজ একটি কার্ডের ভিতরে সেট।

গ্যালারি ক্ষেত্রের সাথে কাজ করার জন্য টিপস #

• সর্বদা মার্কআপ মোড়ানো {% if img.url %} লুপের ভিতরে, তাই একটি নতুন উইজেট খালি ইমেজ বক্স দেখায় না।
• ব্যবহার aspect-ratio এবং object-fit: cover তাই বিভিন্ন আকারের ছবি লাইন আপ।
• CSS কলাম নির্ধারণ করতে দিন। একটি গ্রিড টেমপ্লেট পরিবর্তন ছাড়াই যেকোন সংখ্যক ছবি মোড়ানো।
• একটি যোগ করুন alt বৈশিষ্ট্য। আপনি যদি অন্য ক্ষেত্র থেকে একটি ক্যাপশন বা alt পাঠ্য মুদ্রণ করতে চান তবে লুপটি আপনাকে চিত্র আইডি দেয়।
• একটি ছবির জন্য, ব্যবহার করুন মিডিয়া ক্ষেত্র। যে চিত্রগুলির জন্য প্রত্যেকের নিজস্ব পাঠ্য বা লিঙ্ক প্রয়োজন, ব্যবহার করুন৷ রিপিটার ক্ষেত্র.

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #

মোড়ানো #

গ্যালারি ক্ষেত্র যোগ করুন, এটি দিয়ে লুপ করুন {% for %}, সঙ্গে খালি আইটেম এড়িয়ে যান {% if img.url %}, এবং একটি CSS গ্রিড লেআউট পরিচালনা করতে দিন। সম্পাদকরা তারপর Elementor থেকে ছবি যোগ, অপসারণ এবং পুনরায় সাজান। দেখা টুইগ সিনট্যাক্স গাইড লুপ এবং চেক সম্পর্কে আরো জন্য, এবং মূল্য প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।