गैलरी

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

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

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

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

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

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

• एलिमेंटर स्थापित और सक्रिय के साथ वर्डप्रेस।
• एलिमेंटर और मास्टर एडॉन्स प्रो के लिए मास्टर एडॉन्स, दोनों सक्रिय हैं स्थापना गाइड सेटअप को कवर करता है।
• आपकी मीडिया लाइब्रेरी में कुछ छवियाँ।
• विजेट बिल्डर में एक विजेट खुला इस गाइड में उदाहरण एक गैलरी फ़ील्ड के साथ एक “फोटो ग्रिड” विजेट है जिसका नाम है photos.

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

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

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

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

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

सामान्य सेटिंग्स अन्य क्षेत्रों की तरह ही काम करती हैं।

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

एक गैलरी एक सूची है, इसलिए {{ photos }} अपने स्वयं के प्रिंट पर कुछ भी उपयोगी नहीं है इसके ऊपर लूप करें और लूप के अंदर प्रत्येक छवि को प्रिंट करेंः

{% if photos %}
<div class="photo-grid">
  {% for img in photos %}
    {% if img.url %}
      <figure class="photo-cell">
        <img src="{{ img.url }}" alt="">
      </figure>
    {% endif %}
  {% endfor %}
</div>
{% endif %}

• photos क्षेत्र का नाम है। img एक नाम है जिसे आप लूप में वर्तमान छवि के लिए चुनते हैं।
• {{ img.url }} छवि फ़ाइल यूआरएल है और {{ img.id }} इसकी मीडिया लाइब्रेरी आईडी है।
• बाहरी {% if photos %} गैलरी खाली होने पर पूरे ग्रिड को छोड़ देता है।
• भीतरवाला {% if img.url %} यूआरएल के बिना किसी भी आइटम को छोड़ देता है, जैसे कि प्लेसहोल्डर के साथ एक नया विजेट शुरू होता है।

सीएसएस टैब में आइटम व्यवस्थित करें यह ग्रिड तीन समान कॉलम बनाता है और प्रत्येक फोटो को एक ही आकार में फसल करता हैः

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.photo-cell { margin: 0; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

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

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

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

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

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

• फोटो और पोर्टफोलियो ग्रिड।
• ग्राहकों या भागीदारों के लिए लोगो दीवारें।
• छवि स्लाइडर, लूप प्रिंटिंग के साथ प्रति छवि एक स्लाइड।
• कार्ड के अंदर पहले और बाद में या उत्पाद छवि सेट।

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

• हमेशा मार्कअप को लपेटें {% if img.url %} लूप के अंदर, इसलिए एक नया विजेट खाली छवि बॉक्स नहीं दिखाता है।
• उपयोग aspect-ratio और object-fit: cover तो विभिन्न आकारों की तस्वीरें लाइन अप करती हैं।
• सीएसएस को कॉलम तय करने दें एक ग्रिड टेम्पलेट परिवर्तन के बिना किसी भी संख्या में छवियों को लपेटता है।
• एक जोड़ें alt विशेषता लूप आपको छवि आईडी देता है यदि आपको किसी अन्य क्षेत्र से कैप्शन या ऑल्ट टेक्स्ट प्रिंट करने की आवश्यकता है।
• एक छवि के लिए, का उपयोग करें मीडिया क्षेत्र। उन छवियों के लिए जिनमें प्रत्येक को अपने स्वयं के टेक्स्ट या लिंक की आवश्यकता है, का उपयोग करें पुनरावर्तक क्षेत्र.

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

लपेटकर #

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