🏢 💕 👾 कैसे करें: Drupal 7 का उपयोग करके एक सुंदर और कार्यात्मक बैनर रोटेटर कैसे बनाएं 👩🏻‍🤝‍👨🏾 👝 👩🏻‍🏫

आमतौर पर मैं कुछ कार्यक्षमता को लागू करने के लिए कुछ तैयार मॉड्यूल का उपयोग करने के विषय पर लेख नहीं लिखता हूं। मुझे सीधे मॉड्यूल बनाने, कर्नेल के साथ बातचीत करने, विभिन्न एपीआई के साथ काम करने आदि में बहुत अधिक दिलचस्पी है। "प्रोग्रामर" और वास्तु बातें।
लेकिन, इस बार, कामकाजी लोगों के कई अनुरोधों के बावजूद, मैंने अभी भी एक-एक हाउ-टू लिखने का फैसला किया है।

इसलिए, यह आलेख चर्चा करेगा कि बैनर रोटेटर को लागू करने के लिए Drupal 7 टूल और टेम्पलेट्स के एक जोड़े का उपयोग कैसे किया जाए, जैसे कि मेरे संसाधनों में से एक में बनाया गया है ( http://labridge.ru )।

अंतिम परिणाम कुछ इस तरह दिखना चाहिए:

बड़ा विचार है

मुझे लगता है कि बैनर रोटेटर्स की आवश्यकता के लिए आपको लंबे समय तक विवरण में जाने की आवश्यकता नहीं है। उनका उपयोग अक्सर साइटों के मुख्य पृष्ठों पर किया जाता है, कुछ जानकारी के लिए उपयोगकर्ता का ध्यान आकर्षित करने के लिए सेवा करते हैं, चाहे वह विशेष ऑफ़र हों, स्किड या गर्म समाचार वाले उत्पाद हों। अक्सर वे सक्रिय होते हैं और उपयोगकर्ता को अधिक विस्तृत समीक्षा के लिए कुछ लिंक का पालन करने का अवसर प्रदान करते हैं।

जब मैंने भविष्य के रोटेटर की वास्तुकला के बारे में सोचा, तो मेरे पास दो विकल्प थे:

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

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

सामान्य तौर पर, एक संक्षिप्त प्रतिबिंब के बाद, मैं दूसरे विकल्प पर बस गया।

कार्यान्वयन

चरण 1. मॉड्यूल।

यह माना जाता है कि Drupal 7 मानक के रूप में स्थापित है और फील्ड UI के सभी बुनियादी मॉड्यूल शामिल हैं।
आपको निम्न मॉड्यूल को भी डाउनलोड और इंस्टॉल करना होगा:

छवि। मानक के रूप में शामिल, आपको इसे चालू करने की आवश्यकता है।
लिंक - drupal.org/project/link
वजन - drupal.org/project/weight
दृश्य - drupal.org/project/ साक्षात्कार । इसके अलावा व्यू यूआई को सक्षम करना याद रखें।
दृश्य स्लाइड शो - drupal.org/project/views_slideshow
दृश्य स्लाइड शो: साइकिल। व्यू स्लाइड शो की डिलीवरी में शामिल, आपको बस इसे सक्षम करने की आवश्यकता है।

उपरोक्त मॉड्यूल की सभी निर्भरताओं को डाउनलोड और इंस्टॉल करना भी आवश्यक होगा, जिसके बारे में Drupal आपको सूचित करेगा।

चरण 2. बैनर के लिए एक सामग्री प्रकार बनाएं।

व्यवस्थापक / संरचना / प्रकार पृष्ठ पर बैनर के लिए, एक नई सामग्री प्रकार बनाएँ। इस प्रकार की प्रत्येक सामग्री एक अलग बैनर होगी।
अगला, फ़ील्ड प्रबंधन पृष्ठ पर जाएँ और निम्नलिखित फ़ील्ड बनाएँ:

छवि (field_image) - प्रकार का क्षेत्र "छवि"। यह हमारे बैनर की वास्तविक छवि को संग्रहीत करेगा, इसलिए इसे अनिवार्य बनाने के लिए समझ में आता है।
लिंक (फ़ील्ड_लिंक) - "लिंक" प्रकार का फ़ील्ड। बैनर के माध्यम से जाने के लिए एक लिंक स्टोर करेगा।
विवरण (field_description) - प्रकार का क्षेत्र "पाठ क्षेत्र"। यह बैनर के लिए एक छोटा एनोटेशन स्टोर करेगा, जो इसे ग्राफिकल एडिटर में बैनर पर लागू करने से बचाएगा।

ठीक है, यह भी माना जाता है कि "शीर्षक" फ़ील्ड नोड मॉड्यूल द्वारा स्वचालित रूप से जोड़ा गया था।

चरण 3. एक दृश्य बनाना।

अब एक दृश्य बनाने के लिए आगे बढ़ते हैं जो यह सब प्रदर्शित करेगा।
हम यहां व्यवस्थापक / संरचना / दृश्य जाते हैं और एक नया दृश्य जोड़ते हैं। मैंने इसे "फ्रंट रोटेटर" (फ्रंट_रोटर) कहा।

अगला:

एक ब्लॉक प्रकार प्रदर्शन जोड़ें।
स्वरूप को स्लाइड शो में बदलें।
"शो" कॉलम में, फ़ील्ड चुनें।
फ़ील्ड कॉलम में, जोड़ें: शीर्षक, विवरण, छवि, लिंक, वजन।
फ़िल्टर के रूप में हम चुनते हैं: सामग्री प्रकाशित होनी चाहिए (रोटेशन से बैनर प्रदर्शित करने में सक्षम होने के लिए), सामग्री का प्रकार - हम बैनर के लिए अपनी सामग्री का प्रकार चुनते हैं।
छँटाई के रूप में, सामग्री के वजन से छँटाई का संकेत दें।

परिणाम कुछ इस तरह होना चाहिए:

अब हम स्लाइड शो प्रारूप (प्रारूप पैनल, स्लाइड शो आइटम, सेटिंग्स लिंक) को सेट करने के लिए आगे बढ़ते हैं।

"स्लाइड शो प्रकार" के रूप में हम "साइकिल" का चयन करते हैं।
नेविगेशन तत्व रखने के लिए स्लाइडशो प्रारूप में 2 क्षेत्र हैं। औपचारिक रूप से, उन्हें "नीचे" और "शीर्ष" कहा जाता है। हालांकि, यह सिर्फ औपचारिकता है। उदाहरण के लिए, मेरा निचला क्षेत्र वास्तव में बाईं ओर स्थित है। इसलिए यह जानना और वास्तव में महत्वपूर्ण है कि केवल रोटेटर के लिए टेम्पलेट की योजना बनाते समय हम नेविगेशन तत्वों को रखने के लिए दो अलग-अलग क्षेत्रों के साथ काम कर सकते हैं और उन्हें दृश्य प्रारूप की सेटिंग्स के माध्यम से प्रबंधित कर सकते हैं।
हमारे रोटेटर के लिए, निचले क्षेत्र में बॉक्स "नेविगेटर" की जांच करें, "फ़ील्ड" को "पेजर टाइप" चुनें और "पेजर फील्ड" में "शीर्षक" फ़ील्ड को चिह्नित करें।

विटोग को कुछ इस तरह मिलना चाहिए:

चरण 4. थिमिंग।

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

विषय में दो टेम्पलेट जोड़े गए:
view-slideshow.tpl.php - रोटेटर के सामान्य दृश्य और ज़ोन के प्रदर्शन के लिए जिम्मेदार है। इसे इस प्रकार संपादित किया गया है:

<div class="skin-labridge"> <?php if (!empty($top_widget_rendered)): ?> <div class="views-slideshow-controls-top clearfix"> <?php print $top_widget_rendered; ?> </div> <?php endif; ?> <?php print $slideshow; ?> <?php if (!empty($bottom_widget_rendered)): ?> <div class="views-slideshow-controls-bottom clearfix"> <?php print $bottom_widget_rendered; ?> </div> <?php endif; ?> <div class="clearfix"></div> <div class="clear"></div> </div>

उसी समय, ऊपरी क्षेत्र को वास्तव में बाहर फेंक दिया जा सकता है। इसमें कुछ भी प्रदर्शित नहीं किया जाएगा।
इसके अलावा, यदि आप एक साइट के अंदर अलग-अलग रोटेटर बनाने की योजना बनाते हैं, तो यह प्रत्येक के लिए एक विशिष्ट नाम के साथ एक टेम्पलेट बनाने के लिए चोट नहीं पहुंचाएगा।

दूसरा टेम्प्लेट व्यू-व्यू-फील्ड्स - फ्रंट-रोटेटर.प्लेट। एफपी रोटेटर के अंदर प्रत्येक व्यक्तिगत बैनर को प्रदर्शित करने के लिए जिम्मेदार है। यह मेरे लिए इस तरह दिखता है:

 <div> <?php if(isset($fields['field_link']) && !empty($fields['field_link']->content)): ?><div class="title"><?php print $fields['field_link']->content ?></div><?php endif; ?> <?php if(isset($fields['field_description']) && !empty($fields['field_description']->content)): ?><div class="description"><?php print $fields['field_description']->content ?></div><?php endif; ?> <?php print $fields['field_image']->content ?> </div>

जैसा कि आप देख सकते हैं, प्रत्येक बैनर एक छवि, विवरण और लिंक प्रदर्शित करता है।
उसी समय, जिस क्रम में फ़ील्ड प्रदर्शित किए जाते हैं वह मेरे मामले में बड़ी भूमिका नहीं निभाता है। फ़ील्ड "विवरण" और "लिंक" के साथ "दिवस" छवि पर पूरी तरह से और "हैंग" स्थित हैं।

इसके विपरीत, उपरोक्त सभी को डिजाइन करने के लिए विषय में एक CSS फ़ाइल बनाई गई थी:

 #block-views-front-rotator-block{ background-color: rgb(40, 40, 40); width: 1000px; height: 307px; } #views_slideshow_cycle_main_front_rotator-block{ position: absolute; margin-left: 261px; } .view-front-rotator{ border: 4px solid rgb(50, 50, 50); border-left:none; background-color: rgb(40, 40, 40); } .view-front-rotator .title{ position:absolute; margin-top: 245px; margin-left: 565px; padding: 12px; background-color: #A61D31; border: 5px solid #65111d; white-space: nowrap; } .view-front-rotator .title A{ text-decoration:none; font-size:1.2em; color: white; } .views_slideshow_main{ float:right; margin-bottom: -3px; } .views-slideshow-controls-bottom{ background-color: rgb(40, 40, 40); height: 300px; position: absolute; } .views_slideshow_pager_field_item{ width: 241px; padding: 0 10px; line-height: 45px; cursor:hand; cursor:pointer; color: #FFFFFF; font-size: 1.1em; font-weight: bold; } .views_slideshow_pager_field_item.active{ background-color: #A61D31; color: white; } .view-front-rotator .description{ position:absolute; width: 705px; background-image: url('images/bt_black_70.png'); color: white; padding-left: 15px; padding-right: 15px; padding-bottom: 10px; font-family: Tahoma; font-size: 14px; } .view-front-rotator .description P:last-child{ padding-bottom: 0; margin-bottom: 0; } .view-front-rotator .description H2{ margin-bottom: 0; color: #ff3b3b; } .view-front-rotator .description P{ margin-top: 5px; }

CSS की विशेषताओं में से, मैं केवल यह नोट करता हूं कि विवरण के तहत पृष्ठभूमि rgba या इसी तरह की विधि के माध्यम से निर्दिष्ट पारदर्शी रंग नहीं है, लेकिन पीएनजी प्रारूप में एक पारभासी छवि है।
लब्बोलुआब यह है कि यह विधि सबसे क्रॉस-ब्राउज़र है और संस्करण 7 के बाद से IE द्वारा समर्थित है। IE 6 और नीचे में, विवरण के तहत पृष्ठभूमि काली होगी, जो वास्तव में डिजाइन अवधारणा में भी फिट होती है।

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

पुनश्च लेख पूर्वव्यापी शैली में लिखा गया था, अर्थात्। पहले से ही रोटेटर बनाने के बाद, मुझे याद आया कि मैंने इसे कैसे किया :)। इस संबंध में, या मेरे लिए उनके सबूत के कारण, मैं गलती से कुछ कदम छोड़ सकता था। यदि कुछ काम नहीं करता है या समझ से बाहर है, तो मैं लेख के लिए टिप्पणियों में आपके प्रश्नों की प्रतीक्षा कर रहा हूं।