6.5. Drupal में CSS के साथ काम करना। Breakpoints, Responsive सेटिंग्स Drupal थीम में

पिछले ट्यूटोरियल्स में, हमने पहले ही अपनी थीम में CSS को जोड़ लिया था। ऐसा करने के लिए, हमने drupalbook.info.yml फ़ाइल में यह निर्दिष्ट किया था:

libraries:
  - drupalbook/global-styling

इसके बाद, हमने drupalbook.libraries.yml फ़ाइल बनाई, जहाँ हमने यह निर्दिष्ट किया कि कौन सी CSS फ़ाइलें शामिल करनी हैं:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }

अब से, हम विस्तार से देखेंगे कि अपनी थीम में CSS के साथ कैसे काम किया जाए।

हमने पिछले लेख में पहले ही लिखा था कि आप प्रत्येक CSS फ़ाइल के लिए media निर्दिष्ट कर सकते हैं। उदाहरण के लिए, print.css के लिए हमने media: print दिया ताकि यह CSS केवल प्रिंट संस्करण में ही जुड़ सके। इसके अलावा media: all (डिफ़ॉल्ट) सभी डिस्प्ले मोड्स के लिए और media: screen गैर-प्रिंट मोड्स के लिए होता है।

अन्य लाइब्रेरीज़ के CSS को ओवरराइड करना

आप कोर CSS फ़ाइलों को ओवरराइड करने के लिए libraries-override का उपयोग कर सकते हैं:

libraries-override:
  # पूरी लाइब्रेरी को बदलना।
  core/drupal.collapse: mytheme/collapse
   
  # लाइब्रेरी के किसी हिस्से (जैसे CSS फ़ाइल) को बदलना।
  subtheme/library:
    css:
      theme:
        css/layout.css: css/my-layout.css
   
  # लाइब्रेरी के किसी हिस्से को हटाना।
  drupal/dialog:
    css:
      theme:
        dialog.theme.css: false
   
  # पूरी लाइब्रेरी को हटाना।
  core/modernizr: false

Drupal में Breakpoints

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

Breakpoint मॉड्यूल ब्रेकपॉइंट्स के उपयोग को मानकीकृत करता है। यह डिवाइस के रिज़ॉल्यूशन की निगरानी करता है और आवश्यक ब्रेकपॉइंट प्रदान करता है। आपको केवल आवश्यक ब्रेकपॉइंट आकारों को निर्दिष्ट करना होता है।

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

एक ब्रेकपॉइंट हेडर और media query से बना होता है। मीडिया क्वेरी ब्रेकपॉइंट को वर्णित करने का मानक तरीका है। उदाहरण के लिए, 40em चौड़ाई के ब्रेकपॉइंट के लिए आप लिखेंगे '(min-width: 40em)'। यहाँ ब्रेकपॉइंट एक साधारण मीडिया क्वेरी है, लेकिन ब्रेकपॉइंट में अतिरिक्त जानकारी भी हो सकती है।

ब्रेकपॉइंट जोड़ने के लिए आपको myTheme.breakpoints.yml फ़ाइल बनानी होगी। मेरे मामले में थीम का नाम drupalbook है, इसलिए फ़ाइल का नाम होगा drupalbook.breakpoints.yml।

इस फ़ाइल में प्रत्येक प्रविष्टि एक अलग ब्रेकपॉइंट होती है, जो मशीन नाम (unique name) और उसके पैरामीटर्स से बनी होती है:

1. label: ब्रेकपॉइंट का शीर्षक
2. mediaQuery: इस ब्रेकपॉइंट के लिए डिवाइस की स्क्रीन साइज़ तय करने के लिए पाठ
3. weight: ब्रेकपॉइंट का वज़न। जब कई ब्रेकपॉइंट्स की मीडिया क्वेरी ओवरलैप करती हैं, तब यह निर्धारित करने के लिए कि कौन-सा पहले लागू होगा।
4. multipliers: यह दर्शाता है कि कितने पिक्सेल गुणक का उपयोग किया जाएगा। उदाहरण के लिए, कुछ डिवाइस जैसे iPhone में रेटिना डिस्प्ले होते हैं जहाँ एक पिक्सेल दिखाने के लिए दो भौतिक पिक्सेल का उपयोग किया जाता है।

drupalbook.breakpoints.yml:

drupalbook.mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
drupalbook.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
drupalbook.wide:
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x

अब आपको यह फ़ाइल अपनी थीम में जोड़नी होगी, बस ध्यान रखें कि “drupalbook” की जगह आपकी थीम का नाम होगा।

Responsive Image

अब हम Responsive Image मॉड्यूल चालू करते हैं:

अब यदि आप Responsive image styles की एडिट पेज पर जाएँ:

admin/config/media/responsive-image-style

तब आप Narrow प्रीसेट के responsive एडिटिंग में जा सकते हैं:

admin/config/media/responsive-image-style/narrow

और यह निर्दिष्ट कर सकते हैं कि Narrow आकार हमारी थीम से लिए जाएँ:

स्क्रीनशॉट

अब आप responsive Narrow प्रीसेट के लिए प्रत्येक ब्रेकपॉइंट के लिए अलग-अलग प्रीसेट सेट कर सकते हैं:

स्क्रीनशॉट

अब यदि हम किसी फ़ील्ड को Narrow प्रीसेट के माध्यम से दिखाने के लिए सेट करें, तो विभिन्न स्क्रीन रिज़ॉल्यूशनों पर अलग-अलग चित्र प्रदर्शित होंगे:

स्क्रीनशॉट