Views की थीमिंग: view.tpl.php टेम्पलेट्स (फ़ील्ड्स, पंक्तियाँ, ब्लॉक, पेज) को संपादित करना। jQuery-प्लगइन EasySlider को जोड़ना

इस लेख में हम Drupal के लिए क्वेरी कंस्ट्रक्टर मॉड्यूल Views (http://drupal.org/project/views) को समझेंगे। Views आपको विभिन्न प्रकार की सामग्रियों (content types), टिप्पणियों (comments), टैक्सोनॉमी टर्म्स (terms), उपयोगकर्ताओं की जानकारी और डेटाबेस से अन्य डेटा को प्रदर्शित करने की सुविधा देता है। इस मॉड्यूल का एक ग्राफिकल इंटरफ़ेस भी है, जिससे आप माउस की मदद से आसानी से डेटाबेस क्वेरी बना सकते हैं।

ध्यान दें!!! यदि आप तुरंत अगले एक घंटे में easySlider का उपयोग करना चाहते हैं, तो मैं दृढ़ता से सलाह दूँगा कि इसके लिए तैयार मॉड्यूल का उपयोग करें। यह लेख मुख्य रूप से Views मॉड्यूल के टेम्पलेट्स और उनकी थीमिंग (theming) को समझने के लिए है। easySlider के स्वरूप (appearance) को बाद में समायोजित करने के लिए आपको CSS संपादित करनी होगी।

जब हम आवश्यक फ़ील्ड्स को प्रदर्शित कर लेते हैं, तो हमें उन्हें अपनी आवश्यकता के अनुसार व्यवस्थित करना होता है। इसके लिए Views मॉड्यूल में आउटपुट टेम्पलेट्स की प्रणाली है। डिफ़ॉल्ट रूप से ये फाइलें थीम की “theme” डायरेक्टरी में होती हैं।

अब हम Views द्वारा प्रदर्शित डेटा के लिए jQuery प्लगइन EasySlider को जोड़ेंगे। हालांकि Views के साथ एकीकृत (integrated) EasySlider मॉड्यूल पहले से मौजूद है — http://drupal.org/project/easySlider — लेकिन यह लेख आपको Views टेम्पलेट्स के साथ काम करना सिखाएगा।

इसके लिए हमें निम्नलिखित मॉड्यूल स्थापित करने होंगे: Views, CCK, Imagecache और easySlider प्लगइन को डाउनलोड करना होगा। आप इसे यहाँ या किसी अन्य स्रोत से डाउनलोड कर सकते हैं। प्लगइन को Drupal थीम में जोड़ने की प्रक्रिया नीचे बताई गई है।

चरण 1. एक नया कंटेंट टाइप बनाएँ।

इस कंटेंट टाइप में एक इमेज अपलोड फ़ील्ड जोड़ें और सहेजें। आप चाहें तो इस फ़ील्ड की स्थिति को ऊपर खींच सकते हैं।

फ़ील्ड सेटिंग्स में, अपलोड की जाने वाली छवियों की संख्या “अनलिमिटेड” रखें और प्रत्येक छवि के लिए “विवरण (description)” सक्षम करें।

चरण 2. इस कंटेंट टाइप (जैसे “बैनर”) की एक नोड बनाएँ और कुछ छवियाँ अपलोड करें।

चरण 3. अब उन छवियों के लिए एक Imagecache प्रीसेट बनाएँ। उदाहरण के लिए, 200x200 पिक्सेल का।

प्रोसेसिंग इफेक्ट “Scale and crop” जोड़ें (आपके अपने आयाम भिन्न हो सकते हैं)।

चरण 4. अब Views मॉड्यूल के माध्यम से इस छवि फ़ील्ड को एक सूची (list) के रूप में ब्लॉक में प्रदर्शित करें:

एक नया View बनाएँ।

“फ़ील्ड” के रूप में “इमेज” जोड़ें।

सेटिंग्स में — ग्रुपिंग हटाएँ, फ़ील्ड शीर्षक हटाएँ, और Imagecache प्रीसेट का चयन करें।

फ़िल्टर:

• सामग्री प्रकाशित = हाँ
• सामग्री प्रकार = बैनर

Basic settings:

Style: HTML List

“Block display” जोड़ें।

अब Preview में बैनर की छवियाँ दिखाई देनी चाहिए।

चरण 5. ब्लॉक को किसी क्षेत्र (region) में जोड़ें और परिणाम देखें।

अभी यह स्लाइडर जैसा नहीं दिखता। अब EasySlider स्थापित करें।

चरण 6. easySlider को अनज़िप करें। प्लगइन की फ़ोल्डर में 2.html जैसी डेमो फाइलें होती हैं। CSS को अपनी थीम की style.css में कॉपी करें और पлагिन की images फ़ोल्डर की छवियों को थीम की images फ़ोल्डर में डालें।

चरण 7. js फ़ोल्डर में मौजूद easySlider1.5.js को अपनी थीम की js डायरेक्टरी में कॉपी करें और थीम की .info फ़ाइल में इस js को कनेक्ट करें।

कैश साफ़ करें — और अब easySlider स्क्रिप्ट जुड़ जाएगी।

अब देखें कि आपके ब्लॉक का HTML कैसे बना है (Firebug, Chrome DOM Inspector आदि से)। Views द्वारा उत्पन्न अतिरिक्त div टैग्स स्लाइडर को बाधित कर रहे हैं, इसलिए हमें टेम्पलेट्स के माध्यम से उन्हें हटाना होगा।

चरण 8. Views में जाकर “Theme: information” पर क्लिक करें। वहाँ आपको उन टेम्पलेट्स की सूची मिलेगी जिन्हें आप ओवरराइड कर सकते हैं।

मुख्य टेम्पलेट्स views/theme में स्थित होते हैं। उदाहरण के लिए, हम views-view-fields--view-banner.tpl.php नामक फ़ाइल बनाएंगे।

views-view-fields.tpl.php की सामग्री देखें — इसमें foreach लूप है जो प्रत्येक फ़ील्ड को प्रदर्शित करता है। हम अनावश्यक separator, label, और wrapper divs को हटा देंगे, और संशोधित फ़ाइल अपनी थीम में सेव करेंगे।

अब आउटपुट साफ हो गया है, और HTML स्लाइडर संरचना (ul > li > img) के करीब है। आगे हम views-view--view-banner.tpl.php बनाकर शेष divs (<div class="view-content"> आदि) हटा देंगे।

इसी तरह views-view-list--view-banner.tpl.php बनाकर <div class="item-list"> ब्लॉक को भी हटाएँ।

अब block.tpl.php टेम्पलेट को संशोधित करें ताकि केवल आवश्यक ब्लॉक संरचना बचे और बैनर ब्लॉक को id="slider" मिल जाए।

अब पेज को रीफ़्रेश करें — HTML स्ट्रक्चर कुछ इस प्रकार होगा:

<div id="slider">
  <ul>
    <li><img src="..." /></li>
    ...
  </ul>
</div>

अंत में, EasySlider को सक्रिय करने के लिए थोड़ा JavaScript जोड़ें — इसे आप page.tpl.php या js/custom.js में रख सकते हैं।

अब EasySlider काम करेगा, लेकिन आपको अभी भी CSS को समायोजित करना होगा ताकि प्रदर्शन सही हो।

हालांकि किसी तैयार मॉड्यूल का उपयोग करना आसान है, लेकिन यदि ऐसा मॉड्यूल उपलब्ध नहीं है, तो आप jQuery प्लगइन को मैन्युअल रूप से जोड़कर भी Drupal में वांछित परिणाम प्राप्त कर सकते हैं।