দ্য গ্যালারি ক্ষেত্র একজন সম্পাদককে আপনার উইজেটকে এক চালে ছবির একটি সম্পূর্ণ সেট দিতে দিন: মিডিয়া লাইব্রেরি খুলুন, দশটি ফটো নির্বাচন করুন, সম্পন্ন হয়েছে। মাস্টার অ্যাডঅনগুলির ভিতরে উইজেট নির্মাতা, এটি পোর্টফোলিও গ্রিড, ফটো ওয়াল এবং ক্যারোসেলের ক্ষেত্র, যেখানে ছবির সংখ্যা উইজেট লেখকের পরিবর্তে সাইটের মালিকের।
গ্যালারি ক্ষেত্র সমর্থন করে শর্তাবলী প্রতিটি নিয়ন্ত্রণ মত, এবং এর ইমেজ মাধ্যমে রেন্ডার টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন, একই ইঞ্জিন যা শক্তি দেয় {% for %} লুপস এবং {% if %} আপনার টেমপ্লেট জুড়ে চেক। উভয় গাইড সেটআপ এবং সীমাবদ্ধতা কভার করে।
যেহেতু মানটি চিত্রগুলির একটি অ্যারে, আপনার HTML এর সাথে সংযোগটি একটি লুপ, একটি টোকেন নয়৷ ক {% for %} ব্লক প্রতি ফটোতে একবার আপনার ইমেজ মার্কআপ প্রিন্ট করে, গ্যালারি যে ক্রমে সেগুলি ধরে রাখে। দশটি ফটো দশটি আইটেম রেন্ডার করে। প্যানেল থেকে আরও দুটি যোগ করুন এবং আরও দুটি আইটেম উপস্থিত হবে, কোন টেমপ্লেট পরিবর্তন হবে না।
গ্যালারি ক্ষেত্র কি করে #
- মাল্টি-সিলেক্ট মোডে ওয়ার্ডপ্রেস মিডিয়া লাইব্রেরি খোলে এলিমেন্টর প্যানেল থেকে।
- ইমেজ একটি আদেশ অ্যারে সংরক্ষণ করে, প্রতিটি তার বহন
idএবংurl. - একটি মাধ্যমে আপনার টেমপ্লেট ফিড
{% for %}লুপ, প্রতি ছবিতে একটি পুনরাবৃত্তি। - আপনার CSS এ লেআউট ছেড়ে দেয়: লুপ আইটেম প্রিন্ট করে, গ্রিড তাদের মোড়ানো।
- একটি ডিফল্ট ইমেজ সেট এবং গতিশীল মান সমর্থন করে, তাই উইজেট আগে থেকে ভরা জাহাজ করতে পারেন।
আপনি যদি উইজেট তৈরিতে নতুন হন তবে শুরু করুন উইজেট নির্মাতা ওভারভিউ প্রথম।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল একটি ফটোগ্রাফি পোর্টফোলিও উইজেট যা একটি 3-কলামের গ্রিড রেন্ডার করে, প্রতি গ্যালারি ইমেজে একটি সেল।
কিভাবে একটি গ্যালারি ক্ষেত্র যোগ করতে হয় #
খুঁজে গ্যালারি উইজেট বিল্ডার সম্পাদকের বাম দিকের প্যানেলে ক্ষেত্র, অন্যান্য মিডিয়া ক্ষেত্রগুলির সাথে গোষ্ঠীবদ্ধ৷।
এর অধীনে একটি বিভাগে এটি টেনে আনুন বিষয়বস্তু ট্যাব। একবার এটি অবতরণ করলে, মাঠের বিকল্পগুলি বাম দিকে খোলে।
গ্যালারি ক্ষেত্রের বিকল্পগুলি ব্যাখ্যা করা হয়েছে #
- লেবেল: এলিমেন্টরে নিয়ন্ত্রণের উপরে দেখানো পাঠ্য, উদাহরণস্বরূপ “Portfolio Images”।
- নাম: শুধুমাত্র ক্ষেত্র, অক্ষর, সংখ্যা এবং আন্ডারস্কোরগুলির জন্য অনন্য শনাক্তকারী৷ আপনার লুপ এই নাম বোঝায়, উদাহরণস্বরূপ
portfolio_gallery. - ডিফল্ট: চিত্রগুলির একটি প্রারম্ভিক সেট, তাই উইজেটটি ড্রপ হওয়ার মুহূর্তটি দেখানোর জন্য গ্রিডে কিছু রয়েছে৷।
- গতিশীল: ইমেজ সেটটি হাতে বাছাই করা নির্বাচনের পরিবর্তে একটি গতিশীল উত্স থেকে আসতে দেয়৷।
- বর্ণনা, লেবেল দেখান, বিভাজক: স্ট্যান্ডার্ড ডিসপ্লে সেটিংস, প্লাস ফিল্ড দেখানোর শর্ত শুধুমাত্র যখন অন্য নিয়ন্ত্রণের একটি নির্দিষ্ট মান থাকে।
একটি লুপ দিয়ে আপনার HTML এর সাথে গ্যালারি সংযুক্ত করুন৷ #
গ্যালারিতে কোনো একক-মানের টোকেন নেই। এর মান হল মিডিয়া আইটেমগুলির একটি অ্যারে, তাই টেমপ্লেটটি প্রতি-ইমেজ মার্কআপকে a-তে মোড়ানো {% for %} ব্লক, একই আকৃতি একটি রিপিটার ব্যবহার করে:
<div class="portfolio-grid">
{% for img in portfolio_gallery %}
<figure class="portfolio-cell">
<img src="{{ img.url }}">
</figure>
{% endfor %}
</div>portfolio_galleryমাঠের নাম।imgআপনি উদ্ভাবিত একটি লুপ পরিবর্তনশীল; এটা কিছু কল।- প্রতিটি আইটেম ডট নোটেশন দ্বারা তার বৈশিষ্ট্য প্রকাশ করে:
{{ img.url }}ফাইল URL এর জন্য,{{ img.id }}সংযুক্তি আইডির জন্য। - গ্যালারির ক্রমানুসারে প্রতি ছবিতে একবার ব্লক প্রিন্ট করে।
একটি খালি গ্যালারি শূন্য বার লুপ করে, যা সাধারণত আপনি চান আচরণ। যদিও র্যাপার ডিভ এখনও রেন্ডার করে, এবং প্যাডিং বা সীমানা সহ একটি খালি পাত্র পৃষ্ঠায় একটি রহস্যময় ধূসর বাক্স হিসাবে দেখায়। যখন একটি খালি গ্যালারি পিছনে কিছুই ছেড়ে না, পুরো ব্লক পাহারা:
{% if portfolio_gallery %}
<div class="portfolio-grid"> ... </div>
{% endif %}একটি খালি জন্য পৌঁছানোর জন্য সতর্ক থাকুন {{ portfolio_gallery }} অভ্যাসের বাইরে। একটি মিডিয়া ক্ষেত্রে যে শর্টকাট একটি URL প্রিন্ট করে; এখানে মান হল চিত্রগুলির একটি তালিকা, এবং শুধুমাত্র লুপটি সেগুলি পায়৷ যদি আপনার গ্রিড খালি রেন্ডার করে যখন প্যানেলে স্পষ্টভাবে ফটো ধারণ করে, অনুপস্থিত {% for %} প্রায় সবসময় কেন।
লেআউট CSS ট্যাবে থাকে। একটি গ্রিড ধারক যেমন grid-template-columns: repeat(3, 1fr) লুপ যত কক্ষ তৈরি করে তা মোড়ানো হয়, তাই বারোটি ফটো টেমপ্লেট বা সম্পাদকের চিন্তা না করেই চারটি সারি তৈরি করে।
এলিমেন্টরে গ্যালারি নিয়ন্ত্রণ ব্যবহার করুন #
এলিমেন্টরের একটি পৃষ্ঠায় আপনার কাস্টম উইজেট যোগ করুন, পৃষ্ঠাটি ইতিমধ্যে খোলা থাকলে সম্পাদকটি পুনরায় লোড করুন। গ্যালারি ক্ষেত্রটি আপনার লেবেলের অধীনে একটি অ্যাড-ইমেজ বক্স হিসাবে রেন্ডার করে, বর্তমান সেটের থাম্বনেইলগুলি একবার বিদ্যমান থাকলে।
এটিতে ক্লিক করুন এবং মিডিয়া লাইব্রেরি মাল্টি-সিলেক্ট মোডে খোলে। সেটটি বেছে নিন, নিশ্চিত করুন এবং গ্রিডটি প্রিভিউতে পূরণ করে। গ্যালারি পুনরায় খোলার ফলে সম্পাদককে ছবি যোগ, অপসারণ এবং পুনরায় সাজাতে দেয় এবং পৃষ্ঠাটি পরবর্তী রেন্ডারে নতুন ক্রম অনুসরণ করে।
সাধারণ ব্যবহারের ক্ষেত্রে #
- পোর্টফোলিও এবং ফটোগ্রাফি গ্রিড, প্রতি ছবিতে একটি সেল, CSS গ্রিড সারিগুলি পরিচালনা করে।
- লাইটবক্স সংগ্রহ যেখানে প্রতিটি লুপ আইটেম একটি লাইটবক্স স্ক্রিপ্টের জন্য তার পূর্ণ-আকারের URL লিঙ্ক করে।
- ইমেজ carousels, লুপ প্রিন্ট স্লাইড এবং উইজেটের JS ট্যাব স্লাইডার চালায়।
- ক্লায়েন্ট লোগো দেয়াল উইজেট স্পর্শ না করে সাইটের মালিক দ্বারা রক্ষণাবেক্ষণ করা হয়।
- আগে এবং পরে বা প্রকল্প গ্যালারী যে প্রতিটি সমাপ্ত কাজ সঙ্গে বৃদ্ধি।
গ্যালারি ক্ষেত্রের সাথে কাজ করার জন্য টিপস #
- লুপ হল সংযোগ। একটি গ্যালারির কোন দরকারী সরাসরি মুদ্রণ নেই; কেবল
{% for %}…{% endfor %}ইমেজ পৌঁছায়। - ব্যবহার
{{ img.url }}লুপের ভিতরে। প্রতিটি আইটেম একটি মিডিয়া অ্যারে, এবং ডট নোটেশন URL এবং ID বাছাই করে। - CSS লেআউটের মালিক হতে দিন। স্থির কলাম সহ একটি গ্রিড যেকোনো চিত্র গণনা শোষণ করে; টেমপ্লেট একটি একক চিত্র ব্লক থাকে।
- খালি মানে অদৃশ্য হলে মোড়কটি পাহারা দিন।
{% if portfolio_gallery %}একটি খালি ধারক রেন্ডার করা থেকে একটি অপূর্ণ উইজেট রাখে। - একটি ডিফল্ট সেট পাঠান। এমনকি তিনটি স্থানধারক ফটো প্রথম ড্রপে উইজেটটিকে পাঠযোগ্য করে তোলে।
- প্যানেলে পুনরায় সাজান, টেমপ্লেট নয়। লুপটি গ্যালারির ক্রম অনুসরণ করে, তাই থাম্বনেইলগুলি টেনে আনুন এবং পৃষ্ঠাটি নিজেকে পুনরায় সাজান৷।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডনস উইজেট বিল্ডারে গ্যালারি ক্ষেত্র কী?
গ্যালারি ক্ষেত্রটি একটি কাস্টম এলিমেন্টর উইজেটে একটি মাল্টি-ইমেজ মিডিয়া লাইব্রেরি পিকার যোগ করে। নির্বাচনটি চিত্রগুলির একটি অর্ডারকৃত অ্যারে হিসাবে সংরক্ষণ করা হয়, প্রতিটি তার সাথে id এবং url, এবং আপনার টেমপ্লেট একটি দিয়ে তাদের প্রিন্ট করে {% for %} লুপ, প্রতি ছবিতে একটি পুনরাবৃত্তি।
আমি কিভাবে আমার HTML এ গ্যালারী ছবি প্রদর্শন করব?
প্রতি-ইমেজ মার্কআপ একটি লুপে মোড়ানো: {% for img in portfolio_gallery %}<img src="{{ img.url }}">{% endfor %}কোথায় portfolio_gallery ক্ষেত্রের নাম। ব্লক গ্যালারি ক্রমে প্রতি ইমেজ একবার রেন্ডার করে।
কেন আমার গ্যালারি কিছুই মুদ্রণ করে না?
প্রথমে একটি বেয়ার টোকেন পরীক্ষা করুন। {{ portfolio_gallery }} একটি চিত্র তালিকা মুদ্রণ করে না; মান হল আইটেমগুলির একটি অ্যারে এবং শুধুমাত্র একটি {% for %} লুপ এটা পড়ে। লুপের ভিতরে, আপনি ব্যবহার নিশ্চিত করুন {{ img.url }} লুপ ভেরিয়েবলের পরিবর্তে একা যদি URL আপনার স্পষ্টভাবে প্রয়োজন হয়।
কিভাবে গ্রিড আরো ছবি পরিচালনা করে?
এটি উইজেট সিএসএসের কাজ। সঙ্গে একটি ধারক, বলুন, repeat(3, 1fr) কলামগুলি চতুর্থ চিত্রটিকে স্বয়ংক্রিয়ভাবে একটি নতুন সারিতে মোড়ানো হয়। লুপ শুধু কোষ আউটপুট; স্টাইলশীট সিদ্ধান্ত নেয় কিভাবে তারা প্রবাহিত হয়।
সম্পাদকরা কি ছবিগুলিকে পুনরায় সাজাতে পারেন?
হ্যাঁ। এলিমেন্টর প্যানেলে গ্যালারিটি পুনরায় খোলার ফলে ছবিগুলিকে একটি নতুন ক্রমে যোগ করা, অপসারণ করা এবং টেনে আনার অনুমতি দেওয়া হয় এবং লুপটি ঠিক সেই ক্রমে রেন্ডার করে৷।
আমার কি ইমেজ সাব-ফিল্ড সহ গ্যালারি বা রিপিটার ব্যবহার করা উচিত?
গ্যালারি যখন আইটেমগুলি ছবি এবং অন্য কিছু নয়, এটি একটি পিকার এবং একটি লুপ। যখন প্রতিটি চিত্রের সঙ্গী, একটি ক্যাপশন ক্ষেত্র, একটি লিঙ্ক, একটি বিভাগ ট্যাগের প্রয়োজন হয় তখন একটি রিপিটারের জন্য পৌঁছান, যেহেতু প্রতিটি রিপিটার সারি ছবির পাশাপাশি সেই অতিরিক্ত উপ-ক্ষেত্রগুলি বহন করতে পারে৷।
মোড়ানো #
উইজেট বিল্ডার গ্যালারি ক্ষেত্রটি একটি উইজেটকে একটি পাত্রে পরিণত করে যা সাইটের মালিক পূরণ করেন: লাইব্রেরিতে বহু-নির্বাচন, ক {% for %} টেমপ্লেটে লুপ করুন, এবং সেট কীভাবে প্রবাহিত হয় তা নির্ধারণ করে CSS। একক-ইমেজ স্লটের জন্য, এর ভাইবোন মিডিয়া ক্ষেত্র একই ডট-নোটেশন নিয়ম সহ নায়ক, অবতার এবং লোগো কভার করে। বাকি অন্বেষণ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।
