<h3>1.8. इमेज — इमेज के साथ कार्य, इमेज स्टाइल्स।</h3>

Drupal न केवल टेक्स्ट पेजों के साथ बल्कि इमेज (Images) के साथ भी काम करने में सक्षम है। इसके लिए आपको Image मॉड्यूल को सक्षम (enable) करना होगा। यह मॉड्यूल आपको नोड्स (nodes) में फ़ोटो संलग्न (attach) करने और उन्हें आपकी आवश्यकता अनुसार विभिन्न आकारों (sizes) में प्रदर्शित करने की अनुमति देता है। अलग-अलग स्थानों पर ये आकार भिन्न हो सकते हैं। उदाहरण के लिए, किसी नोड के टीज़र (teaser) में हम छोटी फोटो दिखा सकते हैं और पूरे नोड (full node) में वही फोटो बड़े आकार में दिखाई दे सकती है।

पिछले पाठों में हमने Employee नामक एक कंटेंट टाइप बनाया था। अब हम इस कंटेंट टाइप में एक नया Image field जोड़ेंगे।

अब जब आप किसी कर्मचारी (Employee) को जोड़ने या संपादित करने का फ़ॉर्म खोलेंगे, तो वहाँ एक नया इमेज अपलोड फ़ील्ड दिखाई देगा:

यह छवि कर्मचारी के पेज पर प्रदर्शित होगी, लेकिन यह अपने मूल आकार (original size) में होगी और साथ में “Image” लेबल दिखाएगी। आउटपुट को कस्टमाइज़ करने के लिए, Manage display टैब में जाएँ, जो Employee कंटेंट टाइप की सेटिंग्स के अंतर्गत होता है।

इमेज फ़ील्ड को सूची में ऊपर लाएँ, उसका नाम (Label) छिपा दें, और गियर आइकन (⚙️) पर क्लिक करें ताकि आप इमेज डिस्प्ले साइज निर्धारित कर सकें। डिफ़ॉल्ट रूप से Drupal में कुछ इमेज स्टाइल्स पहले से मौजूद होती हैं — Large (480x480), Medium (220x220), और Thumbnail (100x100)।

हम “Teaser” व्यू के लिए Thumbnail और पूरे नोड (Full node) के लिए Medium चुनेंगे। साथ ही, टीज़र में दिखने वाली इमेज को कर्मचारी के पेज की लिंक बना देंगे:

अब टीज़र सूची में प्रत्येक कर्मचारी की इमेज उसके पूर्ण पेज (Full page) के लिंक के रूप में दिखाई देगी।

डिफ़ॉल्ट स्टाइल्स (Large, Medium, Thumbnail) के अतिरिक्त, आप अपनी कस्टम इमेज स्टाइल्स भी बना सकते हैं। इसके लिए जाएँ:

Configuration → Media → Image Styles

/admin/config/media/image-styles

यहाँ आप पहले से मौजूद इमेज स्टाइल्स देख सकते हैं और नई स्टाइल जोड़ने के लिए Add image style बटन पर क्लिक कर सकते हैं।

आइए एक नई स्टाइल बनाते हैं जिसका आकार 150x150 पिक्सेल होगा। इसे आसान पहचान के लिए 150x150 नाम ही दे देते हैं।

एडिट पेज पर हमें कई क्रियाएँ (actions) दिखाई देंगी जिन्हें हम इमेज प्रोसेसिंग के लिए जोड़ सकते हैं:

• Convert – फ़ोटो को किसी अन्य फॉर्मेट में बदलता है।
• Crop – इमेज को स्केल किए बिना क्रॉप करता है।
• Desaturate – इमेज को ब्लैक एंड व्हाइट बनाता है।
• Resize – अनुपात (proportions) को बनाए बिना आकार बदलता है।
• Rotate – इमेज को किसी कोण पर घुमाता है।
• Scale – अनुपात को बनाए रखते हुए आकार बदलता है।
• Scale and crop – पहले इमेज को स्केल करता है और फिर बड़ी साइड को काटता है।

आप एक से अधिक क्रियाएँ जोड़ सकते हैं। उदाहरण के लिए, पहले Scale 150x150 लागू करें और फिर Desaturate (ब्लैक एंड व्हाइट) इफेक्ट जोड़ें।

Scaling:

यह कुछ इस तरह दिखेगा:

अब वापस Manage display पेज पर जाएँ और टीज़र व्यू के लिए 150x150 इमेज स्टाइल चुनें।

अब कर्मचारी का टीज़र कुछ इस तरह दिखाई देगा:

अब आपने सीखा कि Drupal में फ़ोटो कैसे अपलोड करें और उन्हें अपनी आवश्यकता अनुसार प्रदर्शित करें। अगले पाठ में हम इसी तरह की प्रक्रिया से एक फोटो गैलरी बनाना सीखेंगे।