6.9 Drupal में Views थीमिंग। थंबनेल्स के साथ Owl Carousel स्लाइडशो बनाना।

17/10/2025, by Ivan

अक्सर ऐसा होता है कि Views का डिफ़ॉल्ट टेम्पलेट हमें उपयुक्त नहीं लगता, इसलिए हम Views के टेम्पलेट्स को ओवरराइड (override) कर सकते हैं। दुर्भाग्यवश, Views में आवश्यक टेम्पलेट को खोजने के लिए कोई UI नहीं है, लेकिन हम पैटर्न्स का उपयोग करके टेम्पलेट्स को पुनर्परिभाषित (redefine) कर सकते हैं।

पैटर्न्स के बारे में अधिक जानकारी इस लेख में पढ़ें:

6.6. Drupal में टेम्पलेट्स के साथ काम करना। Drupal के कोर में कौन-कौन से टेम्पलेट्स हैं।

विशेष रूप से, हमें यह भाग रुचिकर है:

नीचे वे संभावित टेम्पलेट नाम दिए गए हैं जिन्हें ओवरराइड किया जा सकता है।

View Name - foobar (मशीन नाम)
Display format - unformatted (unformatted list, संभावित विकल्प जोड़ें)
Display Style - fields
Display Name — page

views-view--foobar--page.html.twig
views-view--page.html.twig
views-view--foobar.html.twig
views-view.html.twig

views-view-unformatted--foobar--page.html.twig
views-view-unformatted--page.html.twig
views-view-unformatted--foobar.html.twig
views-view-unformatted.html.twig

views-view-fields--foobar--page.html.twig
views-view-fields--page.html.twig
views-view-fields--foobar.html.twig
views-view-fields.html.twig

Owl Carousel 1.x प्लगइन में गैलरी के लिए थंबनेल्स प्रदर्शित करने की सुविधा नहीं है। इसलिए हम Owl Carousel 2.x संस्करण का उपयोग करेंगे, जिसमें थंबनेल्स का समर्थन है। यदि आप टेम्पलेट पुनर्परिभाषा (redefinition), CSS या Javascript कोड लिखना नहीं चाहते, तो आप सरलता से निम्नलिखित मॉड्यूल इंस्टॉल कर सकते हैं:

https://www.drupal.org/project/views_slideshow

या फिर Flex Slider मॉड्यूल:

https://www.drupal.org/project/flexslider

इन मॉड्यूल्स की मदद से आप बिना CSS या jQuery का ज्ञान रखे आसानी से स्लाइडशो कॉन्फ़िगर कर सकते हैं।

हम यहाँ Views टेम्पलेट्स को ओवरराइड करने और jQuery लाइब्रेरीज़ को जोड़ने का अभ्यास करेंगे।

शुरू करने के लिए, Owl Carousel 2.x लाइब्रेरी डाउनलोड करें और इसे अपनी थीम में शामिल करें:

https://github.com/OwlCarousel2/OwlCarousel2

संभव है कि आपने Owl Carousel 1.x संस्करण पाया हो:

https://github.com/OwlFonk/OwlCarousel

यह संस्करण हमारे लिए उपयुक्त नहीं है क्योंकि यह थंबनेल्स को सपोर्ट नहीं करता, इसके लिए आपको अतिरिक्त कोड लिखना पड़ेगा।

owl-carousel फ़ोल्डर (जहाँ owl.carousel.min.js फ़ाइल होती है) को अपनी थीम की डायरेक्टरी में कॉपी करें। अब हम carousel के css और js फ़ाइलों को शामिल करेंगे। इसके लिए अपनी थीम की .libraries.yml फ़ाइल में निम्नलिखित पंक्तियाँ जोड़ें:

global-styling:
  version: 1.x
  css:
    theme:
      owl-carousel/owl.carousel.css: {}
      owl-carousel/owl.theme.css: {}    
      owl-carousel/owl.transitions.css: {}
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
    owl-carousel/owl.carousel.min.js: {}
  dependencies:
    - core/jquery

मैंने js फ़ाइलों को /js, css फ़ोल्डर से /css फ़ोल्डर में नहीं स्थानांतरित किया, लेकिन आप ऐसा कर सकते हैं — बस यह याद रखें कि css फ़ाइलों में चित्रों के पथ (paths) को सही करें, जो संभवतः आपने images फ़ोल्डर में रखे होंगे।

परिवर्तनों को लागू करने के लिए कैश साफ़ करना आवश्यक है।

अब हम एक Gallery कंटेंट टाइप बनाएँगे और उसमें एक image field जोड़ेंगे।

इसके बाद एक नई View बनाएँ, जहाँ हम नए कंटेंट टाइप से केवल इमेज फ़ील्ड प्रदर्शित करेंगे।

एक्स्ट्रा ब्लॉक टाइप्स (EBT) - नया लेआउट बिल्डर अनुभव❗

❗एक्स्ट्रा पैराग्राफ टाइप्स (EPT) - नया पैराग्राफ्स अनुभव

6.9 Drupal में Views थीमिंग। थंबनेल्स के साथ Owl Carousel स्लाइडशो बनाना।

Menu