দ্য মিডিয়া ক্ষেত্র ওয়ার্ডপ্রেস মিডিয়া লাইব্রেরিতে একটি কাস্টম উইজেট সংযুক্ত করে। ক্ষেত্রটি ড্রপ করুন, এবং যে কেউ এলিমেন্টরে উইজেট সম্পাদনা করে পরিচিত চিত্র চয়নকারী পায়: ক্লিক করুন, বাছাই করুন বা আপলোড করুন। মাস্টার অ্যাডঅন ভিতরে উইজেট নির্মাতা, এটি হিরো ইমেজ, অবতার, লোগো এবং অন্য প্রতিটি একক-ইমেজ স্লটের পিছনের ক্ষেত্র যা একটি উইজেটের প্রয়োজন।
প্রতিটি উইজেট বিল্ডার ক্ষেত্রের মত, মিডিয়া সমর্থন করে শর্তাবলী প্যানেল দৃশ্যমানতার জন্য। এর টোকেন এর মাধ্যমে রেন্ডার করে টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন, যা ফাইল URL স্বয়ংক্রিয়ভাবে প্রিন্ট করে, তাই <img src="{{ photo }}"> শুধু কাজ করে। উভয় গাইড বিস্তারিত কভার।
একটি পাঠ্য ক্ষেত্রের বিপরীতে, মিডিয়া ক্ষেত্রের মান একটি স্ট্রিং নয়। এটি ফাইলের বহনকারী একটি অ্যারে url, id, alt, এবং আরও, এবং আপনার টেমপ্লেট ডট নোটেশন সহ প্রতিটি অংশে পৌঁছেছে। একটি বন্ধুত্বপূর্ণ শর্টকাট আছে: ক্ষেত্রটি মুদ্রণ করা সরাসরি আপনাকে URL দেয়। এবং প্রথম দিন থেকে তৈরি করা মূল্যবান একটি অভ্যাস, একটি দিয়ে মার্কআপ রক্ষা করা {% if %} তাই একটি খালি মাঠ পিছনে কোন ভাঙা ছবি ছেড়ে।
মিডিয়া ক্ষেত্র কি করে #
- ওয়ার্ডপ্রেস মিডিয়া লাইব্রেরি খোলে এলিমেন্টর প্যানেল থেকে, বিদ্যমান ফাইলগুলি থেকে আপলোড বা বাছাই করুন।
- একটি অ্যারে হিসাবে নির্বাচন সংরক্ষণ করে সঙ্গে
url,id, এবংaltএর চাবিগুলির মধ্যে। - একটি সরাসরি টোকেনে URL প্রিন্ট করে:
{{ hero_image }}একটি শর্টকাট হিসাবে ফাইল URL আউটপুট। - ডট নোটেশন দ্বারা প্রতিটি সম্পত্তি প্রকাশ করে:
{{ hero_image.url }},{{ hero_image.id }},{{ hero_image.alt }}. - মিডিয়া টাইপ দ্বারা লাইব্রেরি ফিল্টার করতে পারেন, ছবি, ভিডিও বা অডিও, এবং গতিশীল মান সমর্থন করে।
আপনি যদি উইজেট তৈরিতে নতুন হন তবে শুরু করুন উইজেট নির্মাতা ওভারভিউ প্রথম।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- উইজেট বিল্ডার সম্পাদকে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল একটি রেস্তোরাঁর হিরো উইজেট যার নাম একটি একক মিডিয়া ক্ষেত্র
hero_imageযে ব্যানার পূরণ।
কিভাবে একটি মিডিয়া ক্ষেত্র যোগ করতে হয় #
উইজেট বিল্ডার সম্পাদকে, খুঁজুন মিডিয়া বাম দিকের প্যানেলে ক্ষেত্র, অন্যান্য মিডিয়া ক্ষেত্রগুলির সাথে গোষ্ঠীবদ্ধ৷।
এর অধীনে একটি বিভাগে এটি টেনে আনুন বিষয়বস্তু ট্যাব; একটি ছবি বিষয়বস্তু, এমনকি যখন এটি একটি CSS ব্যাকগ্রাউন্ড হিসাবে শেষ হয়। একবার এটি অবতরণ করলে, ক্ষেত্রের বিকল্পগুলি বাম দিকে খোলে।
মিডিয়া ক্ষেত্রের বিকল্পগুলি ব্যাখ্যা করা হয়েছে #
- লেবেল: এলিমেন্টরে চয়নকারীর উপরে দেখানো পাঠ্য, উদাহরণস্বরূপ “Hero Image”।
- নাম: ক্ষেত্র, অক্ষর, সংখ্যা এবং আন্ডারস্কোরগুলির জন্য অনন্য শনাক্তকারী, উদাহরণস্বরূপ
hero_image. - ডিফল্ট: একটি URL এবং ID জোড়া হিসাবে একটি প্রারম্ভিক ফাইল, তাই উইজেটটি ইতিমধ্যেই সমাপ্ত দেখায় পৃষ্ঠায় নেমে যায়৷।
- মিডিয়া প্রকার: লাইব্রেরি যা অফার করে, ছবি, ভিডিও বা অডিও ফিল্টার করে, সম্পাদকদের একটি mp3 কে একটি img ট্যাগে সংযুক্ত করা থেকে বিরত রাখে।
- গতিশীল: মান একটি নির্দিষ্ট বাছাই পরিবর্তে একটি গতিশীল উৎস থেকে আসা যাক।
- বর্ণনা, লেবেল দেখান, বিভাজক: স্ট্যান্ডার্ড ডিসপ্লে সেটিংস, প্লাস ফিল্ড দেখানোর শর্ত শুধুমাত্র যখন অন্য নিয়ন্ত্রণের একটি নির্দিষ্ট মান থাকে।
আপনার টেমপ্লেটে মিডিয়া ক্ষেত্র সংযুক্ত করুন #
মান একটি অ্যারে, এবং টেমপ্লেট নিয়ম যে থেকে অনুসরণ করে। সরাসরি টোকেন হল সবচেয়ে সাধারণ প্রয়োজনের জন্য একটি শর্টকাট:
<img src="{{ hero_image }}">একটি অ্যারে মান মুদ্রণ সরাসরি তার আউটপুট url কী, তাই এটি ফাইল URL রেন্ডার করে। স্পষ্ট ফর্ম একই কাজ করে এবং তার ভাইবোনদের পাশে আরও স্পষ্টভাবে পড়ে:
<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">
<!-- {{ hero_image.id }} holds the attachment ID -->এখন অভ্যাস যা পরিপাটি উইজেটগুলিকে ভাঙা-আইকন উইজেট থেকে আলাদা করে: খালি গার্ড। বাছাই করা কিছুই ছাড়া একটি মিডিয়া ক্ষেত্র খালি বৈশিষ্ট্য রেন্ডার করে, এবং <img src=""> একটি ভাঙা ছবি হিসাবে দেখায়। মার্কআপ মোড়ানো:
{% if hero_image.url %}
<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">
{% endif %}ক্ষেত্রটি CSS ট্যাবেও কাজ করে। একটি ব্যাকগ্রাউন্ড স্লট হল এক লাইন:
.hero-banner {
background-image: url('{{ hero_image }}');
}অস্পর্শিত মাধ্যমে পাস alt টেক্সট জন্য সতর্ক থাকুন। {{ hero_image.alt }} মিডিয়া লাইব্রেরিতে যা কিছু থাকে তা প্রিন্ট করে এবং লাইব্রেরিগুলি খালি Alt ক্ষেত্র সহ ছবিতে পূর্ণ। গার্ড অ্যাট্রিবিউটটি উপস্থিত রাখে কিন্তু এটি পাঠ্য উদ্ভাবন করতে পারে না। ক্লায়েন্টদের জন্য নির্মিত উইজেটগুলি লাইব্রেরিতে Alt টেক্সট পূরণ করতে সম্পাদকদের বলার জন্য একটি নোট প্রাপ্য।
Elementor এ মিডিয়া নিয়ন্ত্রণ ব্যবহার করুন #
এলিমেন্টরের একটি পৃষ্ঠায় আপনার কাস্টম উইজেট যোগ করুন, পৃষ্ঠাটি ইতিমধ্যে খোলা থাকলে সম্পাদকটি পুনরায় লোড করুন। মিডিয়া ক্ষেত্রটি আপনার লেবেলের অধীনে এলিমেন্টরের স্ট্যান্ডার্ড ইমেজ চয়নকারী বাক্স হিসাবে রেন্ডার করে।
বাক্সে ক্লিক করুন এবং ওয়ার্ডপ্রেস মিডিয়া লাইব্রেরি খোলে, আপনার সেট করা মিডিয়া টাইপ ফিল্টার করা হয়। একটি ফাইল বাছাই করুন বা আপলোড করুন, নিশ্চিত করুন এবং নির্বাচন শেষ হওয়ার মুহূর্তে পূর্বরূপ আপডেট করুন।
পরে ছবিটি অদলবদল করা একই ক্লিক। এটি অপসারণ মান খালি করে, যা ঠিক আপনার ক্ষেত্রে {% if %} গার্ড কভার।
সাধারণ ব্যবহারের ক্ষেত্রে #
- নায়ক এবং ব্যানার ছবি, একটি img ট্যাগ বা একটি CSS ব্যাকগ্রাউন্ড হিসাবে।
- অবতার এবং হেডশট প্রশংসাপত্র এবং দল উইজেটে।
- লোগো হেডার, ফুটার এবং ক্লায়েন্ট-স্ট্রিপ উইজেটে।
- কার্ডের থাম্বনেল যেখানে প্রতিটি উইজেট ইনস্ট্যান্সে একটি ছবি থাকে।
- আলংকারিক বিভাগের পটভূমি মাধ্যমে সেট
background-imageCSS ট্যাবে।
মিডিয়া ক্ষেত্রের সাথে কাজ করার জন্য টিপস #
- সর্বদা পাহারা দিন
{% if hero_image.url %}. একটি আনসেট ক্ষেত্র অন্যথায় একটি খালি src এবং একটি ভাঙা-ইমেজ আইকন রেন্ডার করে। - Alt প্রিন্ট করুন।
alt="{{ hero_image.alt }}"কিছুই খরচ হয় না এবং আপনার মার্কআপে লাইব্রেরির Alt টেক্সট বহন করে। - CSS ব্যাকগ্রাউন্ডের জন্য সরাসরি টোকেন ব্যবহার করুন।
url('{{ hero_image }}')CSS ট্যাব পাঠযোগ্য রাখে। - একটি ডিফল্ট চিত্র সেট করুন। একটি উইজেট যা একটি বাস্তব ফটো সহ পৃষ্ঠায় ড্রপ করে নিজেকে বিক্রি করে; একটি ধূসর স্থানধারক না।
- মিডিয়া টাইপ দিয়ে ফিল্টার করুন। যদি স্লটটি একটি চিত্র হয়, তাহলে বলুন, এবং লাইব্রেরি ভিডিও অফার করবে না।
- মনে রাখবেন শর্টকাটটি শুধুমাত্র url-এর জন্য। URL ব্যতীত অন্য কোনো সম্পত্তির জন্য ডট নোটেশন প্রয়োজন; জন্য কোন শর্টকাট আছে
idবাalt.
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডনস উইজেট বিল্ডারে মিডিয়া ক্ষেত্র কী?
মিডিয়া ক্ষেত্রটি একটি কাস্টম এলিমেন্টর উইজেটে একটি ওয়ার্ডপ্রেস মিডিয়া লাইব্রেরি পিকার যোগ করে। নির্বাচিত ফাইল একটি অ্যারে হিসাবে সংরক্ষণ করা হয় url, id, এবং alt কী, যা আপনার টেমপ্লেট প্রিন্ট করে {{ field_name }} URL এর জন্য বা {{ field_name.prop }} একটি নির্দিষ্ট সম্পত্তির জন্য।
{{hero_image }} নিজে থেকে কী মুদ্রণ করে?
ফাইল URL। একটি অ্যারে মান মুদ্রণ সরাসরি তার আউটপুট url একটি বিদ্যমান যখন কী, তাই <img src="{{ hero_image }}"> শর্টকাট হিসেবে কাজ করে। অন্য কিছুর জন্য, ডট নোটেশন ব্যবহার করুন: {{ hero_image.id }}, {{ hero_image.alt }}.
যখন কিছুই নির্বাচন করা হয় না তখন আমি কীভাবে একটি ভাঙা চিত্র বন্ধ করব?
একটি গার্ডে মার্কআপ মোড়ানো: {% if hero_image.url %}...{% endif %}। একটি আনসেট মিডিয়া ক্ষেত্র অন্যথায় খালি বৈশিষ্ট্যগুলি রেন্ডার করে এবং একটি খালি src বৈশিষ্ট্য বেশিরভাগ ব্রাউজারে একটি ভাঙা চিত্র হিসাবে প্রদর্শিত হয়৷।
আমি কি মিডিয়া ক্ষেত্রটিকে CSS ব্যাকগ্রাউন্ড হিসাবে ব্যবহার করতে পারি?
হ্যাঁ। CSS ট্যাবে লিখুন background-image: url('{{ hero_image }}'); যে উপাদানটিতে ফটো বহন করা উচিত। টোকেনটি এইচটিএমএল-এর মতোই সেখানে ফাইল ইউআরএলে সমাধান করে।
ক্ষেত্র কি ভিডিও বা অডিও গ্রহণ করতে পারে?
মিডিয়া টাইপ বিকল্পটি লাইব্রেরিটিকে চিত্র, ভিডিও বা অডিওতে ফিল্টার করে। আপনার টেমপ্লেট যা প্রত্যাশা করে তার সাথে মেলে এটি সেট করুন, তাই একটি img-ট্যাগ স্লট শুধুমাত্র ইমেজ ফাইলগুলি গ্রহণ করে।
মিডিয়া এবং গ্যালারির মধ্যে পার্থক্য কি?
মিডিয়া একটি ফাইল ধারণ করে; গ্যালারি আপনার টেমপ্লেট একটি দিয়ে প্রিন্ট করে এমন চিত্রগুলির একটি অর্ডারকৃত সেট ধারণ করে৷ {% for %} লুপ। একটি নায়কের ছবি একটি মিডিয়া ক্ষেত্র; একটি পোর্টফোলিও গ্রিড একটি গ্যালারি।
মোড়ানো #
উইজেট বিল্ডার মিডিয়া ফিল্ড হল একক-ইমেজ ওয়ার্কহরস। প্যানেলে একটি লাইব্রেরি পিকার, টেমপ্লেটে একটি URL শর্টকাট, ডট নোটেশন id এবং alt, এবং একটি {% if %} আপনার উইজেট এবং একটি ভাঙা-ইমেজ আইকনের মধ্যে দাঁড়িয়ে থাকা গার্ড৷ যখন একটি চিত্র অনেক হয়ে যায়, তখন পর্যন্ত যান গ্যালারি ক্ষেত্র এবং এর লুপ। বাকি অন্বেষণ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।
