Drupal पर फोटो गैलरी और फोटो एलबम

फोटो एलबम और फोटो गैलरी किसी भी वेबसाइट की शोभा बढ़ा सकते हैं — चाहे वह एक व्यक्तिगत ब्लॉग हो या किसी कंपनी की साइट। सुंदर तस्वीरें ही वो कारण हैं जो लोगों को Facebook, Instagram और अन्य सोशल नेटवर्क्स पर लंबे समय तक रोकती हैं। इसलिए आइए हम अपने Drupal साइट पर एक सुंदर फोटो गैलरी जोड़ें।

मैं सुझाव देता हूँ कि हम Colorbox इफ़ेक्ट का उपयोग करके एक सरल गैलरी बनाएं। Colorbox एक jQuery प्लगइन है जो Thickbox और Lightbox का आधुनिक विकल्प है। इसकी सबसे बड़ी विशेषता यह है कि यह स्वचालित रूप से तस्वीरों को स्क्रीन के आकार के अनुसार समायोजित कर देता है — जो आज के विविध स्क्रीन आकारों और रिज़ॉल्यूशनों वाले युग में बहुत उपयोगी है।

आइए शुरू करें। मैं दिखाऊँगा कि Drupal 7 में फोटो गैलरी कैसे बनाई जाती है (यह प्रक्रिया Drupal 6 में भी लगभग समान है)।

हमें निम्नलिखित मॉड्यूल्स की आवश्यकता होगी:

• Colorbox — http://drupal.org/project/colorbox
• Libraries API — http://drupal.org/project/libraries
• Views — http://drupal.org/project/views
• Fields API — (Drupal 7 में कोर में शामिल है; Drupal 6 के लिए यह CCK मॉड्यूल के रूप में उपलब्ध है)
• Imagecache — http://drupal.org/project/imagecache
• File — (Drupal 7 में कोर में शामिल है; Drupal 6 के लिए Filefield मॉड्यूल आवश्यक है)
• Image — (Drupal 7 में कोर का हिस्सा; Drupal 6 में Imagefield मॉड्यूल आवश्यक है)

Drupal 6 के लिए jQuery Update मॉड्यूल भी आवश्यक होगा ताकि jQuery को संस्करण 1.3.2 तक अपडेट किया जा सके।

इन सभी मॉड्यूल्स को डाउनलोड करें और इंस्टॉल करें।

अब हमें Colorbox स्वयं डाउनलोड करना होगा। इसे निम्नलिखित साइट से डाउनलोड किया जा सकता है:

http://colorpowered.com/colorbox/

डाउनलोड किए गए Colorbox आर्काइव को अनज़िप करें और उसकी फ़ोल्डर को sites/all/libraries डायरेक्टरी में कॉपी करें। यदि libraries फ़ोल्डर मौजूद नहीं है, तो उसे बनाएं और फिर Colorbox की फ़ाइलें वहाँ पेस्ट करें।

अब आपकी libraries फ़ोल्डर में colorbox मौजूद होना चाहिए:

आप देख सकते हैं कि हमने Colorbox को उदाहरणों सहित कॉपी किया है — ताकि आवश्यकता पड़ने पर इसके काम करने का तरीका देखा जा सके।

यदि सब कुछ सही ढंग से किया गया है, तो “Status Report” में यह दिखना चाहिए कि Colorbox सफलतापूर्वक установлен है:

बहुत बढ़िया! हमने सभी मॉड्यूल्स को सेटअप कर लिया है। अब हम गैलरी बनाना शुरू कर सकते हैं।

फोटो एलबम बनाना

हम अपनी गैलरी को एलबम्स के रूप में बनाएंगे। सबसे पहले एक नया कंटेंट टाइप “फोटो एलबम” बनाएं:

/admin/structure/types/add

फ़ॉर्म में आवश्यक फ़ील्ड्स भरें:

अब अपने नए कंटेंट टाइप के फ़ील्ड्स को संपादित करने के लिए इस पृष्ठ पर जाएँ:

/admin/structure/types

एक नया फ़ील्ड जोड़ें जिसका नाम “फोटोग्राफ़ी” हो। डेटा प्रकार के रूप में “Image” चुनें।

फ़ील्ड सेटिंग्स में “Unlimited uploads” चुनें (या अगर आप चाहें तो एक एलबम में तस्वीरों की संख्या सीमित कर सकते हैं, उदाहरण के लिए 10)।

फ़ील्ड सहेजें — अब आपका “फोटो एलबम” कंटेंट टाइप तैयार है। यदि आप यह नियंत्रित करना चाहते हैं कि कौन उपयोगकर्ता एलबम बना सकते हैं, तो “Permissions” पेज से ऐसा कर सकते हैं:

/admin/people/permissions

अब एक नया फोटो एलबम नोड बनाएं:

/node/add

एलबम का नाम और विवरण दर्ज करें और तस्वीरें जोड़ें:

अब नोड सहेजें।

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

ImageCache आपको तस्वीरों को काटने (crop), आकार बदलने (resize), या रंग सुधारने की अनुमति देता है — जैसे कि हमने अपने एलबम के लिए अपलोड की हैं। जब यह मॉड्यूल सक्षम होगा, तो “Image Styles” (या “Presets”) की सेटिंग उपलब्ध होगी। “Preset” का अर्थ है — पहले से परिभाषित इमेज प्रोसेसिंग, जैसे 100×100 पिक्सल की कटिंग।

साइट की कॉन्फ़िगरेशन पेज पर जाएँ और “Image Styles” अनुभाग खोलें:

admin/config

अब “Add Style” पर क्लिक करें और नया स्टाइल बनाएं। उदाहरण के लिए, यदि हम 150×150 पिक्सल की इमेज चाहते हैं, तो नाम दें crop150x150। फिर “Crop” इफ़ेक्ट जोड़ें:

चौड़ाई और ऊँचाई (Width & Height) के मान 150, 150 सेट करें और सहेजें। अब यह “crop150x150” स्टाइल आपकी नोड डिस्प्ले सेटिंग में उपलब्ध होगा।

अब कंटेंट टाइप्स की सूची में जाएँ:

/admin/structure/types

और “Manage Display” विकल्प खोलें:

अब अपने फोटो फ़ील्ड का डिस्प्ले टाइप “Colorbox” चुनें:

फिर Colorbox सेटिंग्स को इस प्रकार समायोजित करें:

“Node Image Style” के रूप में crop150x150 चुनें — अर्थात हमने जो प्रीसेट बनाया था।

सेटिंग्स सहेजें।

अब तस्वीरें Colorbox प्रभाव के साथ प्रदर्शित होंगी और 150×150 पिक्सल के रूप में दिखाई देंगी। लेकिन इसे थोड़ा बेहतर बनाने के लिए कुछ CSS जोड़ना होगा:

.field-name-field-photos .field-item {
  float: left;  
  margin-bottom: 15px;  
  margin-right: 15px;
}

आप अपनी आवश्यकताओं के अनुसार CSS को समायोजित कर सकते हैं (आपके फोटो फ़ील्ड का क्लास अलग हो सकता है, इसलिए margins में बदलाव आवश्यक हो सकता है)।

और यह रहा हमारा परिणाम — Drupal में बना एक सुंदर फोटो एलबम: