गैलरी

द गैलरी फ़ील्ड एक संपादक को अपने विजेट को एक चाल में छवियों का एक पूरा सेट सौंपने देता है: मीडिया लाइब्रेरी खोलें, दस फ़ोटो चुनें, किया गया मास्टर एडॉन्स के अंदर विजेट बिल्डर, यह पोर्टफोलियो ग्रिड, फोटो दीवारों और हिंडोला के लिए क्षेत्र है, कहीं भी छवि गणना विजेट लेखक के बजाय साइट के मालिक की है।

गैलरी फ़ील्ड समर्थन करता है शर्तों हर नियंत्रण की तरह, और इसकी छवियां इसके माध्यम से प्रस्तुत होती हैं ट्विग-सिंटैक्स टेम्पलेट इंजन, वही इंजन जो शक्ति प्रदान करता है {% for %} छोरों और {% if %} आपके टेम्पलेट में चेक दोनों गाइड सेटअप और सीमाओं को कवर करते हैं।

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

गैलरी फ़ील्ड क्या करती है #

• बहु-चयन मोड में वर्डप्रेस मीडिया लाइब्रेरी खोलता है एलिमेंट पैनल से।
• छवियों की एक क्रमबद्ध सरणी संग्रहीत करता है, प्रत्येक अपना ले जा रहा है id और url.
• के माध्यम से अपने टेम्पलेट फ़ीड करता है {% for %} लूप, प्रति छवि एक पुनरावृत्ति।
• आपके सीएसएस पर लेआउट छोड़ देता है: लूप आइटम प्रिंट करता है, ग्रिड उन्हें लपेटता है।
• एक डिफ़ॉल्ट छवि सेट और गतिशील मूल्यों का समर्थन करता है, इसलिए विजेट पहले से भरा हुआ जहाज कर सकता है।

यदि आप विजेट बनाने में नए हैं, तो शुरुआत करें विजेट बिल्डर अवलोकन पहले।

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

• वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
• विजेट बिल्डर संपादक में एक कस्टम विजेट खुला हमारा उदाहरण एक फोटोग्राफी पोर्टफोलियो विजेट है जो ३-कॉलम ग्रिड, प्रति गैलरी छवि एक सेल प्रस्तुत करता है।

गैलरी फ़ील्ड कैसे जोड़ें #

को खोजें गैलरी विजेट बिल्डर संपादक के बाईं ओर पैनल में फ़ील्ड, अन्य मीडिया फ़ील्ड के साथ समूहीकृत।

इसे नीचे एक अनुभाग में खींचें सामग्री टैब एक बार जब यह भूमि, बाईं ओर क्षेत्र के विकल्प खुले।

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

• लेबलः एलिमेंटर में नियंत्रण के ऊपर दिखाया गया पाठ, उदाहरण के लिए “Portfolio Images”।
• नाम: क्षेत्र, अक्षरों, संख्याओं और केवल अंडरस्कोर के लिए विशिष्ट पहचानकर्ता आपका लूप इस नाम को संदर्भित करता है, उदाहरण के लिए portfolio_gallery.
• डिफ़ॉल्टः छवियों का एक प्रारंभिक सेट, इसलिए ग्रिड के पास विजेट गिराए जाने के क्षण को दिखाने के लिए कुछ है।
• गतिशील: छवि सेट को हाथ से चुने गए चयन के बजाय गतिशील स्रोत से आने देता है।
• विवरण, लेबल दिखाएँ, विभाजकः मानक प्रदर्शन सेटिंग्स, साथ ही फ़ील्ड दिखाने की शर्तें केवल तभी जब किसी अन्य नियंत्रण का एक निश्चित मान हो।

गैलरी को लूप से अपने HTML से कनेक्ट करें #

गैलरी में कोई एकल-मूल्य टोकन नहीं है इसका मूल्य मीडिया आइटम की एक सरणी है, इसलिए टेम्पलेट प्रति-छवि मार्कअप को एक में लपेटता है {% 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 }} फ़ाइल यूआरएल के लिए, {{ img.id }} अटैचमेंट आईडी के लिए।
• ब्लॉक गैलरी के क्रम में प्रति छवि एक बार प्रिंट करता है।

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

{% if portfolio_gallery %}
<div class="portfolio-grid"> ... </div>
{% endif %}

नंगे तक पहुँचने के लिए बाहर देखो {{ portfolio_gallery }} आदत से बाहर एक मीडिया क्षेत्र पर जो शॉर्टकट एक यूआरएल प्रिंट करता है; यहां मान छवियों की एक सूची है, और केवल लूप उन पर मिलता है यदि आपका ग्रिड खाली हो जाता है जबकि पैनल स्पष्ट रूप से फ़ोटो रखता है, तो गायब है {% for %} लगभग हमेशा ही ऐसा होता है।

लेआउट सीएसएस टैब में रहता है। एक ग्रिड कंटेनर जैसे grid-template-columns: repeat(3, 1fr) लूप चाहे कितनी भी कोशिकाएँ उत्पन्न कर ले, लपेटता है, इसलिए बारह तस्वीरें टेम्पलेट या संपादक के बिना इसके बारे में सोचे बिना चार पंक्तियाँ बनाती हैं।

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

एलिमेंटर में एक पृष्ठ पर अपना कस्टम विजेट जोड़ें, संपादक को फिर से लोड करना यदि पृष्ठ पहले से ही खुला था गैलरी फ़ील्ड आपके लेबल के तहत एक ऐड-इमेज बॉक्स के रूप में प्रस्तुत करता है, एक बार मौजूद होने के बाद वर्तमान सेट के थंबनेल के साथ।

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

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

• पोर्टफोलियो और फोटोग्राफी ग्रिड, प्रति छवि एक सेल, सीएसएस ग्रिड पंक्तियों को संभाल रहा है।
• लाइटबॉक्स संग्रह जहां प्रत्येक लूप आइटम लाइटबॉक्स स्क्रिप्ट के लिए अपने पूर्ण आकार के यूआरएल को लिंक करता है।
• छवि हिंडोला, लूप स्लाइड प्रिंट करता है और विजेट का जेएस टैब स्लाइडर चलाता है।
• ग्राहक लोगो दीवारों विजेट को छुए बिना साइट स्वामी द्वारा बनाए रखा जाता है।
• पहले और बाद में या परियोजना दीर्घाओं यह प्रत्येक तैयार कार्य के साथ बढ़ता है।

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

• लूप कनेक्शन है। गैलरी का कोई उपयोगी प्रत्यक्ष प्रिंट नहीं है; केवल {% for %}…{% endfor %} छवियों तक पहुँचता है।
• उपयोग {{ img.url }} लूप के अंदर। प्रत्येक आइटम एक मीडिया सरणी है, और डॉट नोटेशन यूआरएल और आईडी चुनता है।
• सीएसएस को लेआउट का मालिक होने दें। निश्चित स्तंभों वाला एक ग्रिड किसी भी छवि गणना को अवशोषित करता है; टेम्प्लेट एक एकल आकृति ब्लॉक रहता है।
• जब खाली मतलब अदृश्य हो तो रैपर की रखवाली करें। {% if portfolio_gallery %} खाली कंटेनर को रेंडर करने से एक खाली विजेट रखता है।
• एक डिफ़ॉल्ट सेट शिप करें। यहां तक कि तीन प्लेसहोल्डर तस्वीरें विजेट को पहली बूंद पर सुपाठ्य बनाती हैं।
• पैनल में पुन: व्यवस्थित करें, टेम्पलेट नहीं। लूप गैलरी क्रम का अनुसरण करता है, इसलिए थंबनेल खींचें और पृष्ठ स्वयं को पुनर्व्यवस्थित करता है।

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

लपेटकर #

विजेट बिल्डर गैलरी फ़ील्ड एक विजेट को एक कंटेनर में बदल देता है जिसे साइट मालिक भरता है: लाइब्रेरी में बहु-चयन, ए {% for %} टेम्पलेट में लूप, और सीएसएस तय करना कि सेट कैसे बहता है एकल-छवि स्लॉट के लिए, इसके भाई-बहन मीडिया क्षेत्र समान डॉट-नोटेशन नियमों के साथ नायकों, अवतारों और लोगो को शामिल करता है बाकी का अन्वेषण करें मास्टर ऐडऑन विजेट और एक्सटेंशन, और देखें मूल्य निर्धारण पृष्ठ प्रत्येक योजना में क्या शामिल है।