द मीडिया क्षेत्र वर्डप्रेस मीडिया लाइब्रेरी के लिए एक कस्टम विजेट जोड़ता है क्षेत्र में ड्रॉप करें, और एलिमेंटर में विजेट को संपादित करने वाले किसी भी व्यक्ति को परिचित छवि चयनकर्ता मिलता है: क्लिक करें, चुनें या अपलोड करें, किया गया मास्टर एडॉन्स के अंदर विजेट बिल्डर, यह नायक छवियों, अवतारों, लोगो और विजेट के लिए आवश्यक हर दूसरे एकल-छवि स्लॉट के पीछे का क्षेत्र है।
प्रत्येक विजेट बिल्डर फ़ील्ड की तरह, मीडिया समर्थन करता है शर्तों पैनल दृश्यता के लिए। इसका टोकन इसके माध्यम से प्रस्तुत होता है ट्विग-सिंटैक्स टेम्पलेट इंजन, जो फ़ाइल यूआरएल को स्वचालित रूप से प्रिंट करता है, इसलिए <img src="{{ photo }}"> बस काम करता है दोनों गाइड विवरण को कवर करते हैं।
टेक्स्ट फ़ील्ड के विपरीत, मीडिया फ़ील्ड का मान एक स्ट्रिंग नहीं है यह फ़ाइल ले जाने वाली एक सरणी है url, id, altऔर अधिक, और आपका टेम्पलेट डॉट नोटेशन के साथ प्रत्येक टुकड़े तक पहुंचता है एक दोस्ताना शॉर्टकट है: फ़ील्ड को प्रिंट करना सीधे आपको यूआरएल देता है और एक दिन से निर्माण के लायक एक आदत, एक के साथ मार्कअप की रक्षा करना {% if %} इसलिए एक खाली मैदान पीछे कोई टूटी हुई छवि नहीं छोड़ता है।
मीडिया क्षेत्र क्या करता है #
- वर्डप्रेस मीडिया लाइब्रेरी खोलता है एलिमेंटर पैनल से, मौजूदा फ़ाइलों को अपलोड करें या चुनें।
- चयन को एक सरणी के रूप में संग्रहीत करता है साथ
url,id, औरaltइसकी चाबियों के बीच। - यूआरएल को सीधे टोकन पर प्रिंट करता है:
{{ hero_image }}फ़ाइल यूआरएल को शॉर्टकट के रूप में आउटपुट करता है। - डॉट नोटेशन द्वारा प्रत्येक संपत्ति को उजागर करता है:
{{ hero_image.url }},{{ hero_image.id }},{{ hero_image.alt }}. - मीडिया प्रकार द्वारा पुस्तकालय फ़िल्टर कर सकते हैं, छवि, वीडियो, या ऑडियो, और गतिशील मूल्यों का समर्थन करता है।
यदि आप विजेट बनाने में नए हैं, तो शुरुआत करें विजेट बिल्डर अवलोकन पहले।
इससे पहले कि आप शुरू करें #
- वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
- एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
- विजेट बिल्डर संपादक में एक कस्टम विजेट खुला हमारा उदाहरण एक रेस्तरां हीरो विजेट है जिसका नाम एकल मीडिया फ़ील्ड है
hero_imageवह बैनर भर देता है।
मीडिया फ़ील्ड कैसे जोड़ें #
विजेट बिल्डर संपादक में, खोजें मीडिया बाईं ओर पैनल में फ़ील्ड, अन्य मीडिया फ़ील्ड के साथ समूहीकृत।
इसे नीचे एक अनुभाग में खींचें सामग्री टैब; एक छवि सामग्री है, यहां तक कि जब यह सीएसएस पृष्ठभूमि के रूप में समाप्त हो जाती है एक बार जब यह भूमि, बाईं ओर क्षेत्र के विकल्प खुलते हैं।
मीडिया फ़ील्ड विकल्पों की व्याख्या की गई #
- लेबलः एलिमेंटर में चयनकर्ता के ऊपर दिखाया गया पाठ, उदाहरण के लिए “हीरो इमेज”।
- नाम: उदाहरण के लिए, केवल फ़ील्ड, अक्षरों, संख्याओं और अंडरस्कोर के लिए विशिष्ट पहचानकर्ता
hero_image. - डिफ़ॉल्टः यूआरएल और आईडी जोड़ी के रूप में एक प्रारंभिक फ़ाइल, इसलिए विजेट पहले से ही समाप्त दिखने वाले पृष्ठ पर चला जाता है।
- मीडिया प्रकारः लाइब्रेरी जो प्रदान करती है, छवि, वीडियो या ऑडियो को फ़िल्टर करती है, संपादकों को एमपी3 को आईएमजी टैग में वायर करने से रोकती है।
- गतिशील: मान को एक निश्चित पिक के बजाय एक गतिशील स्रोत से आने देता है।
- विवरण, लेबल दिखाएँ, विभाजकः मानक प्रदर्शन सेटिंग्स, साथ ही फ़ील्ड दिखाने की शर्तें केवल तभी जब किसी अन्य नियंत्रण का एक निश्चित मान हो।
मीडिया फ़ील्ड को अपने टेम्पलेट से कनेक्ट करें #
मान एक सरणी है, और टेम्पलेट नियम उस से पालन करते हैं प्रत्यक्ष टोकन सबसे आम आवश्यकता के लिए एक शॉर्टकट हैः
<img src="{{ hero_image }}">किसी सरणी मान को प्रिंट करना सीधे उसका आउटपुट देता है 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 %}सीएसएस टैब में भी क्षेत्र काम करता है एक पृष्ठभूमि स्लॉट एक पंक्ति हैः
.hero-banner {
background-image: url('{{ hero_image }}');
}अछूता से गुजरने वाले ऑल्ट टेक्स्ट के लिए देखें। {{ hero_image.alt }} मीडिया लाइब्रेरी जो कुछ भी रखती है उसे प्रिंट करती है, और लाइब्रेरी खाली ऑल्ट फ़ील्ड के साथ छवियों से भरी होती है गार्ड विशेषता को मौजूद रखता है लेकिन यह पाठ का आविष्कार नहीं कर सकता है ग्राहकों के लिए बनाए गए विजेट एक नोट के लायक हैं जो संपादकों को लाइब्रेरी में ऑल्ट टेक्स्ट भरने के लिए कहते हैं।
एलिमेंटर में मीडिया नियंत्रण का उपयोग करें #
एलिमेंटर में एक पृष्ठ पर अपना कस्टम विजेट जोड़ें, संपादक को फिर से लोड करना यदि पृष्ठ पहले से ही खुला था मीडिया फ़ील्ड आपके लेबल के तहत एलिमेंटर के मानक छवि चयनकर्ता बॉक्स के रूप में प्रस्तुत करता है।
बॉक्स पर क्लिक करें और वर्डप्रेस मीडिया लाइब्रेरी खुलती है, आपके द्वारा सेट किए गए मीडिया प्रकार के लिए फ़िल्टर किया जाता है एक फ़ाइल चुनें या अपलोड करें, पुष्टि करें, और पूर्वावलोकन अपडेट करें पल चयन भूमि।
बाद में छवि को स्वैप करना एक ही क्लिक है इसे हटाने से मान खाली हो जाता है, जो बिल्कुल आपके मामले में है {% if %} गार्ड कवर।
सामान्य उपयोग के मामले #
- हीरो और बैनर छवियाँ, आईएमजी टैग या सीएसएस पृष्ठभूमि के रूप में।
- अवतार और हेडशॉट्स प्रशंसापत्र और टीम विजेट में।
- लोगो हेडर, फूटर और क्लाइंट-स्ट्रिप विजेट में।
- कार्ड थंबनेल जहां प्रत्येक विजेट उदाहरण में एक छवि होती है।
- सजावटी अनुभाग पृष्ठभूमि तय करना
background-imageसीएसएस टैब में।
मीडिया क्षेत्र के साथ काम करने के लिए युक्तियाँ #
- से हमेशा पहरा देते हैं
{% if hero_image.url %}. एक अनसेट फ़ील्ड अन्यथा एक खाली एसआरसी और एक टूटी-छवि आइकन प्रस्तुत करता है। - ऑल्ट प्रिंट करें।
alt="{{ hero_image.alt }}"कुछ भी खर्च नहीं होता है और लाइब्रेरी के ऑल्ट टेक्स्ट को आपके मार्कअप में ले जाता है। - सीएसएस पृष्ठभूमि के लिए प्रत्यक्ष टोकन का उपयोग करें।
url('{{ hero_image }}')सीएसएस टैब को पठनीय रखता है। - एक डिफ़ॉल्ट छवि सेट करें। एक विजेट जो वास्तविक फोटो के साथ पृष्ठ पर गिरता है वह स्वयं बिक जाता है; एक ग्रे प्लेसहोल्डर ऐसा नहीं करता।
- मीडिया प्रकार के साथ फ़िल्टर करें। यदि स्लॉट एक छवि है, तो ऐसा कहें, और लाइब्रेरी वीडियो की पेशकश नहीं करेगी।
- याद रखें शॉर्टकट केवल यूआरएल है। यूआरएल के अलावा किसी भी संपत्ति को डॉट नोटेशन की आवश्यकता होती है; के लिए कोई शॉर्टकट नहीं है
idयाalt.
अक्सर पूछे जाने वाले प्रश्न #
मास्टर एडॉन्स विजेट बिल्डर में मीडिया फ़ील्ड क्या है?
मीडिया फ़ील्ड एक कस्टम एलिमेंटर विजेट में एक वर्डप्रेस मीडिया लाइब्रेरी पिकर जोड़ता है। चयनित फ़ाइल को एक सरणी के रूप में संग्रहीत किया जाता है url, id, और alt कुंजियाँ, जिन्हें आपका टेम्पलेट प्रिंट करता है {{ field_name }} यूआरएल के लिए या {{ field_name.prop }} एक विशिष्ट संपत्ति के लिए।
{{हीरो_इमेज}} अपने आप क्या प्रिंट करता है?
फ़ाइल यूआरएल। किसी सरणी मान को प्रिंट करने से सीधे उसका आउटपुट मिलता है url कुंजी जब कोई मौजूद है, तो <img src="{{ hero_image }}"> शॉर्टकट के रूप में काम करता है किसी भी अन्य चीज़ के लिए, डॉट नोटेशन का उपयोग करेंः {{ hero_image.id }}, {{ hero_image.alt }}.
जब कुछ भी नहीं चुना जाता है तो मैं टूटी हुई छवि को कैसे रोकूं?
एक गार्ड में मार्कअप लपेटेंः {% if hero_image.url %}...{% endif %}। एक अनसेट मीडिया फ़ील्ड अन्यथा खाली विशेषताओं को प्रस्तुत करता है, और एक खाली src विशेषता अधिकांश ब्राउज़रों में एक टूटी हुई छवि के रूप में प्रदर्शित होती है।
क्या मैं मीडिया फ़ील्ड को सीएसएस पृष्ठभूमि के रूप में उपयोग कर सकता हूँ?
हाँ। सीएसएस टैब में, लिखें background-image: url('{{ hero_image }}'); तत्व है कि तस्वीर ले जाना चाहिए पर टोकन फ़ाइल यूआरएल के लिए बस के रूप में यह एचटीएमएल में करता है वहाँ हल।
क्या फ़ील्ड वीडियो या ऑडियो स्वीकार कर सकती है?
मीडिया प्रकार विकल्प लाइब्रेरी को छवि, वीडियो या ऑडियो में फ़िल्टर करता है इसे आपके टेम्पलेट की अपेक्षा से मेल खाने के लिए सेट करें, इसलिए एक आईएमजी-टैग स्लॉट केवल कभी भी छवि फ़ाइलों को प्राप्त करता है।
मीडिया और गैलरी में क्या अंतर है?
मीडिया के पास एक फ़ाइल है; गैलरी छवियों का एक क्रमबद्ध सेट रखता है जिसे आपका टेम्पलेट प्रिंट करता है {% for %} पाश। एक हीरो फोटो एक मीडिया फ़ील्ड है; पोर्टफोलियो ग्रिड एक गैलरी है।
लपेटकर #
विजेट बिल्डर मीडिया फ़ील्ड एकल-छवि वर्कहॉर्स है पैनल में एक लाइब्रेरी पिकर, टेम्पलेट में एक यूआरएल शॉर्टकट, डॉट नोटेशन के लिए id और alt, और एक {% if %} अपने विजेट और टूटी-छवि आइकन के बीच खड़े गार्ड जब एक छवि कई हो जाती है, तो ऊपर जाएं गैलरी फ़ील्ड और इसका लूप बाकी का अन्वेषण करें मास्टर ऐडऑन विजेट और एक्सटेंशन, और देखें मूल्य निर्धारण पृष्ठ प्रत्येक योजना में क्या शामिल है।
