मीडिया

मीडिया फ़ील्ड मास्टर ऐडऑन के साथ निर्मित कस्टम विजेट में एक छवि पिकर जोड़ता है विजेट बिल्डरसंपादकों मीडिया लाइब्रेरी से एक छवि चुनें या एलिमेंटर में एक नया अपलोड करें, और आपका टेम्पलेट अपने यूआरएल, आईडी या ऑल्ट टेक्स्ट को प्रिंट करता है प्रोफ़ाइल फ़ोटो, लोगो, हीरो छवियों, उत्पाद शॉट्स और किसी अन्य एकल छवि स्लॉट के लिए इसका उपयोग करें।

मीडिया उन क्षेत्रों में से एक है जिसे आप मुफ्त संस्करण के विजेट बिल्डर में उपयोग कर सकते हैं मुफ्त प्लगइन में एक सीमित विजेट बिल्डर शामिल है, और फ़ील्ड का पूरा सेट आता है मास्टर एडॉन्स प्रो.

मीडिया क्षेत्र क्या करता है #

• यह आपके विजेट के पैनल में एलिमेंटर का इमेज बॉक्स जोड़ता है, जिसमें इमेज चुनें बटन होता है।
• छवि चुनें वर्डप्रेस मीडिया विंडो खोलता है, जहां संपादक एक फ़ाइल अपलोड करते हैं, मीडिया लाइब्रेरी से एक चुनते हैं या यूआरएल से एक डालते हैं।
• फ़ील्ड छवि को संग्रहीत करता है url, id और alt टेक्स्ट, और आपका टेम्प्लेट जो भी आवश्यक हो उसे प्रिंट करता है।
• यह HTML टैब और CSS टैब में काम करता है, उदाहरण के लिए पृष्ठभूमि छवि के रूप में।

यदि आपने अभी तक विजेट नहीं बनाया है, तो पढ़ें विजेट बिल्डर अवलोकन पहले।

इससे पहले कि आप शुरू करें #

• एलिमेंटर स्थापित और सक्रिय के साथ वर्डप्रेस।
• एलिमेंटर के लिए मास्टर ऐडऑन स्थापित और सक्रिय हैं। द स्थापना गाइड सेटअप को कवर करता है।
• विजेट बिल्डर में एक विजेट खुला इस गाइड में उदाहरण एक मीडिया क्षेत्र के साथ एक “प्रोफ़ाइल कार्ड” विजेट है जिसका नाम है profile_photo और नाम के लिए एक टेक्स्ट फ़ील्ड।

मीडिया फ़ील्ड कैसे जोड़ें #

1. को जा मास्टर ऐडऑन > विजेट बिल्डर और अपना विजेट खोलें।
2. पर सामग्री टैब, एक अनुभाग जोड़ें, उदाहरण के लिए “प्रोफ़ाइल”।
3. प्रकार media बाईं ओर फ़ील्ड खोज बॉक्स में।
4. खींचना मीडिया अनुभाग में इसकी सेटिंग्स बाएं साइडबार में खुलती हैं।

मीडिया फ़ील्ड विकल्पों की व्याख्या की गई #

• लेबल एलिमेंटर में छवि बॉक्स के ऊपर का पाठ है, उदाहरण के लिए “प्रोफ़ाइल Photo”।
• नाम क्या फ़ील्ड की विशिष्ट आईडी और उसके टोकन की शुरुआत है, इसलिए profile_photo देता है {{ profile_photo.url }}। केवल अक्षर, संख्याएँ और अंडरस्कोर।
• विवरण एलिमेंटर में छवि बॉक्स के नीचे दिखाई देता है।
• मीडिया प्रकार सूची छवि (डिफ़ॉल्ट), वीडियो, ऑडियो, पीडीएफ, एसवीजी, स्प्रेडशीट, दस्तावेज़, प्रस्तुति और पुरालेख हमारे परीक्षणों में यह सेटिंग एलिमेंट तक नहीं पहुंची वीडियो पर सेट एक फ़ील्ड अभी भी एक सामान्य छवि पिकर के रूप में दिखाई देती है, इसलिए मीडिया फ़ील्ड को एक छवि फ़ील्ड के रूप में देखें।

कोई डिफ़ॉल्ट छवि सेटिंग नहीं है, इसलिए विजेट की एक नई प्रतिलिपि कोई छवि के साथ शुरू होती है जब तक कि एक संपादक एक नहीं चुनता सामान्य सेटिंग्स आगे काम करती हैं क्योंकि वे अन्य क्षेत्रों पर करते हैं।

छवि को अपने टेम्पलेट में प्रिंट करें #

फ़ील्ड में कई मान होते हैं, और आप प्रत्येक को एक बिंदु के साथ प्रिंट करते हैंः

• {{ profile_photo.url }} छवि फ़ाइल यूआरएल है। {{ profile_photo }} अपने आप पर एक ही यूआरएल प्रिंट करता है।
• {{ profile_photo.id }} छवि की मीडिया लाइब्रेरी आईडी है।
• {{ profile_photo.alt }} क्या वह वैकल्पिक पाठ है जो छवि मीडिया लाइब्रेरी में तब था जब संपादक ने उसे चुना था।

लपेटें <img> चेक में टैग करें, इसलिए फ़ील्ड खाली होने पर कुछ भी प्रिंट नहीं होता हैः

{% if profile_photo.url %}
  <img class="profile-photo" src="{{ profile_photo.url }}" alt="{{ profile_photo.alt }}">
{% endif %}

टोकन सीएसएस टैब में भी काम करता है, उदाहरण के लिए पृष्ठभूमि छवि के लिएः

.profile-card {
  background-image: url('{{ profile_photo }}');
}

यदि आपकी छवि शैलियाँ लागू नहीं होती हैं, तो चयनकर्ता को अधिक विशिष्ट बनाएं विजेट के अंदर छवियों के लिए एलिमेंटर के अपने नियम हैं, और हमारे परीक्षणों में .profile-photo अकेले उनके खिलाफ नहीं जीते, जबकि .profile-card .profile-photo किया।

क्लिक करें सेटिंग्स सहेजें जब आपका काम पूरा हो जाए।

एलिमेंटर में मीडिया नियंत्रण का उपयोग करें #

विजेट को किसी पृष्ठ पर जोड़ें, या यदि पृष्ठ पहले से ही खुला था तो संपादक को पुनः लोड करें छवि बॉक्स वर्तमान छवि दिखाता है उस पर होवर करें और क्लिक करें छवि चुनें इसे बदलने के लिए, या इसे साफ़ करने के लिए ट्रैश आइकन का उपयोग करें।

मीडिया सम्मिलित करें विंडो खुलती है के तहत एक फ़ाइल अपलोड करें फ़ाइलें अपलोडू ी के तहत एक उठाओ मीडिया लाइब्रेरी, या उपयोग करें यूआरएल से डालें। दाईं ओर का विवरण पैनल छवि का Alt टेक्स्ट दिखाता है, जो कि है {{ profile_photo.alt }} प्रिंट करता है क्लिक करने से पहले इसे वहां भरें चयन करें.

सामान्य उपयोग के मामले #

• प्रोफ़ाइल फ़ोटो और टीम के सदस्य कार्ड।
• हेडर, पाद लेख और क्लाइंट सूचियों में लोगो।
• हीरो और बैनर छवियाँ, एक के रूप में <img> टैग या एक सीएसएस पृष्ठभूमि।
• कार्ड के अंदर उत्पाद या फीचर छवियां।

मीडिया क्षेत्र के साथ काम करने के लिए युक्तियाँ #

• हमेशा पहरा दें <img> साथ टैग {% if profile_photo.url %} तो एक खाली क्षेत्र एक टूटी हुई छवि नहीं छोड़ता है।
• प्रिंट {{ profile_photo.alt }} alt विशेषता में, और छवि चुनने से पहले मीडिया लाइब्रेरी में alt टेक्स्ट जोड़ें।
• उपयोग object-fit: cover एक निश्चित चौड़ाई और ऊंचाई के साथ जब विभिन्न आकृतियों की छवियों को पंक्तिबद्ध करने की आवश्यकता होती है।
• छवि नियम दो वर्ग दें, जैसे .profile-card .profile-photo, इसलिए एलिमेंटर की अपनी छवि शैलियाँ उन्हें ओवरराइड नहीं करती हैं।
• कई छवियों के लिए, का उपयोग करें गैलरी फ़ील्ड। आइकन या एसवीजी प्रतीकों के लिए, का उपयोग करें प्रतीक क्षेत्र.

अक्सर पूछे जाने वाले प्रश्न #

लपेटकर #

मीडिया फ़ील्ड जोड़ें, प्रिंट करें {{ field_name.url }} और {{ field_name.alt }} अंदर ए {% if %} जांचें, और अपनी छवि शैलियों को एक विशिष्ट चयनकर्ता दें संपादकों फिर एलिमेंट से सीधे छवियों को चुनें या अपलोड करें छवि के साथ जाने के लिए एक लिंक के लिए, एक जोड़ें यूआरएल फील्ड, और जाँच करें मूल्य निर्धारण प्रत्येक योजना में क्या शामिल है।