गैलरी ब्लॉक का उपयोग करें।

प्रतिलिपि

प्रस्तावना

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

गैलरी ब्लॉक जोड़ना और उसका उपयोग करना।

इसकी सबसे अच्छी बात यह है कि आप अपने कंप्यूटर से तस्वीरों के समूह को सीधे ड्रैग एंड ड्रॉप कर सकते हैं, और वे अपने-आप गैलरी ब्लॉक में जुड़ जाएँगी। या फिर आप ‘फॉरवर्ड स्लैश गैलरी’ (/gallery) टाइप करके ब्लॉक को इन्सर्ट कर सकते हैं। एक बार ब्लॉक जुड़ जाने पर, आप अपने कंप्यूटर या मीडिया लाइब्रेरी से कोई तस्वीर अपलोड कर सकते हैं। एक ज़रूरी बात का ध्यान रखें: तस्वीरों में हमेशा ऑल्ट टेक्स्ट जोड़ें। ऑल्ट टेक्स्ट (Alt Text / वैकल्पिक पाठ) किसी तस्वीर का संक्षिप्त विवरण होता है जो स्क्रीन रीडर का उपयोग करने वाले लोगों को यह समझने में मदद करता है कि तस्वीर में क्या है, और यह सर्च इंजनों को तस्वीर को बेहतर ढंग से खोजने और रैंक करने में भी मदद करता है। तो, अब हम अपनी मीडिया लाइब्रेरी से ५ तस्वीरें चुनेंगे और फिर एक नई गैलरी बनाएँगे। तस्वीरें इन्सर्ट होने पर, हम पैरेंट ब्लॉक को सिलेक्ट करेंगे, और जब हम सेटिंग्स में जाएँगे, तो हम देखेंगे कि हम कॉलम की संख्या बदल सकते हैं। उसके नीचे, आपको अपनी तस्वीरों का रिज़ॉल्यूशन अपडेट करने का विकल्प मिलेगा। इस मामले में, हम इसे फुल साइज़ पर अपडेट करेंगे। ध्यान देने वाली एक और बात यह है कि’क्रॉप इमेजेज़ टू फिट’ (Crop images to fit) का विकल्प डिफ़ॉल्ट रूप से चालू रहता है। यह विकल्प तब उपयोगी होता है जब आपके पास अलग-अलग आकार और साइज़ की तस्वीरें हों। इन्हें क्रॉप करने से गैलरी की प्रत्येक पंक्ति की तस्वीरें एक ही आकार की हो जाएँगी। आप इस विकल्प को चालू और बंद करके देख सकते हैं कि आपको कौन-सा तरीका ज़्यादा पसंद है।

स्टाइल्स

जब हम स्टाइल्स पर जाएँगे, तो हम गैलरी ब्लॉक का बैकग्राउंड कलर अपडेट कर सकते हैं, और डाइमेंशन्स के नीचे, हम इमेज ब्लॉक्स के बीच की ब्लॉक स्पेसिंग को बदल सकते हैं। हम विभिन्न ब्लॉक्स के बीच हॉरिजॉन्टल स्पेसिंग के साथ-साथ वर्टिकल स्पेसिंग भी जोड़ सकते हैं। जब आप ३ वर्टिकल डॉट्स पर क्लिक करेंगे, तो आप पैडिंग और मार्जिन जोड़ पाएँगे। डाइमेंशन्स के नीचे, आप अपने गैलरी ब्लॉक में एक बॉर्डर या रेडियस भी जोड़ सकते हैं। अब जब हमने कुछ विकल्प देख लिए हैं, तो चलिए कुछ बदलाव करते हैं। सबसे पहले, हम सेटिंग्स पर वापस जाएँगे और फिर कॉलम की संख्या बदलकर ५ कर देंगे। फिर हम स्टाइल्स पर वापस जाकर वर्टिकल ब्लॉक स्पेसिंग को ० कर सकते हैं। इसके बाद, ब्लॉक का अलाइनमेंट बदलकर पूर्ण चौड़ाई (Full Width) कर दें। यहाँ यह बताना भी ज़रूरी है कि गैलरी ब्लॉक रिस्पॉन्सिव होता है।

लाइटबॉक्स

आगे, हम देखेंगे कि आप अपनी वर्डप्रेस साइट पर एक लाइटबॉक्स कैसे जोड़ सकते हैं। लाइटबॉक्स एक शानदार फ़ीचर है जो तस्वीरों, वीडियो या गैलरी को उसी पेज पर एक सुंदर ओवरले में खोलने की सुविधा देता है, जैसा कि आप इन उदाहरणों में देख सकते हैं। चलिए एक ऐसा उदाहरण देखते हैं जहाँ लाइटबॉक्स नहीं जोड़ा गया है। जब आप किसी तस्वीर पर क्लिक करते हैं, तो कुछ नहीं होता। लाइटबॉक्स जोड़ने के लिए हमें साइट एडिटर पर जाना होगा। तो, हम सबसे ऊपर ‘एडिट साइट’ पर क्लिक करेंगे, फिर स्टाइल्स पर जाएँगे और स्टाइल बुक खोलने के लिए आँख वाले आइकन पर क्लिक करेंगे। मीडिया पर जाकर इमेज ब्लॉक को चुनें। फिर, साइडबार में, सेटिंग्स के नीचे, हम ‘क्लिक करने पर एक्सपैंड करें'(Expand on click) विकल्प को चालू कर सकते हैं। सेव करने के बाद, हम इसे फ्रंट एंड(Front End) पर देख सकते हैं। अब, जब आप किसी तस्वीर पर क्लिक करते हैं, तो यह एक ओवरले के रूप में खुलती है।

पैटर्न को कस्टमाइज़ करना।

अगले उदाहरण में, हम कॉलम की संख्या बदलकर २ करेंगे, और फिर गैलरी ब्लॉक के अंदर के सभी इमेज ब्लॉक्स को एक साथ सिलेक्ट करेंगे। इसके बाद, हम एक ही बार में हर एक इमेज ब्लॉक का रेडियस(Radius) बदल सकते हैं। चलिए एक और उदाहरण देखते हैं। इस बार, हम गैलरी ब्लॉक का बैकग्राउंड कलर बदलकर काला करेंगे, गैलरी ब्लॉक के अंदर की तस्वीरों के चारों ओर कुछ पैडिंग या स्पेस जोड़ेंगे, और फिर हम सभी तस्वीरों को एक साथ सिलेक्ट करके एक क्लिक में १० पिक्सल(px) का सफ़ेद बॉर्डर जोड़ेंगे।

उदाहरण

अंत में, चलिए कुछ और उपलब्ध विकल्पों पर नज़र डालते हैं। सबसे पहले, आप अपने गैलरी ब्लॉक में एक लिंक और साथ ही एक कैप्शन भी जोड़ सकते हैं। जब आप गैलरी ब्लॉक के अंदर किसी इमेज ब्लॉक को सिलेक्ट करते हैं, तो आप ब्लॉक को किसी नई जगह पर ले जाने के लिए छोटे एरो या मूवर्स का उपयोग कर सकते हैं। किसी तस्वीर को सिलेक्ट करने पर, आप अपनी मीडिया लाइब्रेरी या कंप्यूटर से एक नई तस्वीर चुनने के लिए ब्लॉक टूलबार में ‘रिप्लेस’ पर क्लिक कर सकते हैं। और जब आप गैलरी ब्लॉक को सिलेक्ट करते हैं, तो आप अपनी गैलरी में और तस्वीरें जोड़ने के लिए ब्लॉक टूलबार में ‘ऐड’ पर क्लिक कर सकते हैं। जब आप ३ वर्टिकल डॉट्स(तीन वर्टिकल डॉट्स / Three vertical dots) पर क्लिक करते हैं, तो आप देखेंगे कि वहाँ ब्लॉक को रीनेम करने और साथ ही एक पैटर्न बनाने का भी विकल्प होता है।

निष्कर्ष

गैलरी ब्लॉक का उपयोग करके आकर्षक डिज़ाइन बनाने के लिए शुभकामनाएँ।

प्रैक्टिकल

आपने जो कुछ सीखा है, उसे परखने के लिए वर्डप्रेस प्लेग्राउंड का उपयोग करें।

स्टेप १(Step 1): स्टाइल बुक में लाइटबॉक्स फंक्शनैलिटी को इनेबल करें।

स्टेप २(Step 2): हाथी की इन ५ मुफ़्त इमेज को डाउनलोड करें: https://unsplash.com/s/photos/elephants?license=free

स्टेप ३(Step 3): गैलरी ब्लॉक और ५ इमेज जोड़ें। अपने अर्जित ज्ञान का उपयोग करके निम्नलिखित तीन उदाहरणों को फिर से बनाएँ।

उदाहरण १

• तीन कॉलम
• अलाइनमेंट: कोई नहीं

उदाहरण २ (स्क्रीनशॉट)

• एक कॉलम
• अलाइनमेंट: विस्तृत चौड़ाई (Wide Width)
• ब्लॉक स्पेसिंग: ०

उदाहरण ३ (यह स्क्रीनशॉट मोबाइल व्यू का है।)

• दो कॉलम
• अलाइनमेंट: फुल विड्थ
• वर्टिकल और हॉरिजॉन्टल पैडिंग: XS
• वर्टिकल और हॉरिजॉन्टल ब्लॉक स्पेसिंग: XS
• प्रत्येक इमेज ब्लॉक को ५० पिक्सल का रेडियस दिया गया है।