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

अपनी थीम में इमेज स्टाइल शामिल करने की प्रक्रिया लगभग उसी तरह है, जैसे मॉड्यूल में डिफ़ॉल्ट कॉन्फ़िगरेशन शामिल करने की प्रक

कई डेवलपर्स हेडर / फुटर (ऊपरी / निचले कॉलम) का कोड अलग फ़ाइल में रखना पसंद करते हैं और उस फ़ाइल को page.html.twig में कॉल करते हैं।

प्रक्रिया

मान लीजिए, आपने अपनी थीम की फ़ोल्डर में हेडर के लिए निम्न फ़ाइल बनाई है:

THEME_NAME/templates/includes/header.html.twig

और अब आप इस फ़ाइल को यहाँ शामिल करना चाहते हैं:

कई Twig टेम्पलेट्स में एक या एक से अधिक Attribute ऑब्जेक्ट्स होंगे, जिन्हें वेरिएबल्स के रूप में पास किया जाता है। Attribute ऑब्जेक्ट का कार्य HTML विशेषताओं (attributes) के एक सेट को स्टोर करना है, जिससे डेवलपर को इन डेटा के साथ इंटरैक्ट करने के लिए उपयोगी मेथड मिलते हैं और आसानी से attributes को प्रिंट किया जा सकता है। उदाहरण के लिए, attribute.addClass('myclass') एक क्लास जोड़ना आसान बना देता है, बिना स्ट्रिंग्स को सही तरीके से जोड़ने की चिंता किए।

आमतौर पर टेम्पलेट में attributes कुछ इस तरह दिखने चाहिए:

Drupal 7 की तरह ही, आप प्री-प्रोसेसिंग (पूर्व-प्रसंस्करण) फ़ंक्शनों की मदद से किसी विशेष HTML आउटपुट को प्रभावित कर सकते हैं। उदाहरण के लिए, यदि आप मेन्यू में एक क्लास जोड़ना चाहते हैं और इसे PHP स्तर पर करना पसंद करते हैं, तो आप ऐसा कर सकते हैं। यह थीम से संबंधित मार्कअप को बदलने का एक अच्छा तरीका है, लेकिन यदि आप ऐसा मार्कअप बनाना चाहते हैं जो थीम पर निर्भर न हो, तो बेहतर होगा कि आप एक कस्टम मॉड्यूल लिखें।

(नोट: इस दस्तावेज़ में “mytheme” आपकी थीम का मशीन नाम है; उदाहरण के लिए, “bartik” एक थीम का मशीन नाम है।)

प्री-प्रोसेसिंग फ़ंक्शनों के साथ काम करने के लिए:

Drupal 8 में breakpoints को एडिट करने के लिए कोई यूज़र इंटरफ़ेस नहीं है। चूँकि breakpoints कॉन्फ़िगरेशन फ़ाइलों में परिभाषित होते हैं, contrib में भी यूज़र इंटरफ़ेस प्रदान करना संभव नहीं है।

Drupal प्रशासन अनुभाग में, प्रत्येक थीम की अपनी सेटिंग्स पेज होती है, जो admin/Appeance/Settings/themeName पर उपलब्ध है। इस पेज में एक फ़ॉर्म होता है जिसमें मानक सेटिंग्स होती हैं, जैसे «लोगो इमेज सेटिंग्स» और «फ़ेविकॉन सेटिंग्स»।

यह Drupal 8 में कुछ सबसे उल्लेखनीय परिवर्तनों की सूची है, जो थीमिंग को प्रभावित करते हैं।

मुख्य क्लासेस में बदलाव

सरल किए गए सहायक क्लास नाम "element-x"

Drupal 7 ने कई नए क्लासेस पेश किए: element-hidden, element-invisible और element-focusable। उनके नामों से यह समझना कठिन था कि ये क्लासेस वास्तव में क्या करते थे, इसलिए क्लास नाम बदल दिए गए। नए नाम क्लासेस को बेहतर समझने में मदद करेंगे और HTML 5 Boilerplate, जो कि एक लोकप्रिय HTML 5 फ्रेमवर्क है, के अनुरूप होंगे। यहाँ रूपांतरण और उपयोग की तालिका दी गई है:

यह दस्तावेज़ Drupal 8 के लिए Twig रूपांतरण प्रक्रिया के अधिकांश हिस्से के दौरान उपयोग किया गया था और आपके लिए भी उपयोगी हो सकता है जब आप अपनी स्वयं की थीम और मॉड्यूल को Drupal 8 में Twig टेम्पलेट इंजन का उपयोग करने के लिए अपडेट करते हैं।

नोट: अब Twig से संबंधित सभी काम Drupal कोर इश्यू क्यू में किया जाता है। केवल Twig रूपांतरण सैंडबॉक्स का उपयोग पहले से रूपांतरित टेम्पलेट्स और फंक्शंस खोजने के लिए करें।

मुख्य योगदानकर्ताओं के लिए चरण:

ऑटोमेशन टूल्स का उपयोग थीम बनाने के कार्य को सरल बनाता है। यहाँ हम कस्टम थीम के लिए ऑटोमेशन टूल बनाने हेतु gulp js का उपयोग करेंगे।

Gulp 3.x और Node 10.x या नीचे के साथ काम करना

कदम:

1. Node.js इंस्टॉल करना
nodejs.org से NodeJS का नवीनतम संस्करण डाउनलोड और इंस्टॉल करें। इंस्टॉलेशन प्रक्रिया आपके ऑपरेटिंग सिस्टम के आधार पर भिन्न हो सकती है।

2. Gulp इंस्टॉल करें

npm install gulp-cli -g

3. gulpfile.js सेटअप करें
कस्टम थीम डायरेक्टरी पर जाएँ।