दृश्य - एक समूह के चारों ओर एक आवरण DIV जोड़ें

Question

Drupal 7 में, मैंने एक व्यू बनाया है जो कई क्षेत्रों को सूचीबद्ध करता है। फ़ील्ड को किसी अन्य फ़ील्ड (फ़ील्ड की शब्द आईडी) द्वारा समूहीकृत किया जाता है। मार्क अप इस तरह दिखता है:

<h3>[Term 1]</h3>
<div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
<div class="views-row views-row-2 views-row-even"> [Field Content] </div>
<div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>

<h3>[Term 2]</h3>
<div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
<div class="views-row views-row-2 views-row-even"> [Field Content] </div>
<div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>

<h3>[Term 3]</h3>
<div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
<div class="views-row views-row-2 views-row-even"> [Field Content] </div>
<div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>

हालाँकि, मुझे इस तरह दिखने के लिए चिह्न की आवश्यकता है:

<div id="term_1">
     <h3>[Term 1]</h3>
     <div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
     <div class="views-row views-row-2 views-row-even"> [Field Content] </div>
     <div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>
</div>

<div id="term_2">
     <h3>[Term 2]</h3>
     <div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
     <div class="views-row views-row-2 views-row-even"> [Field Content] </div>
     <div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>
</div>

<div id="term_3">
     <h3>[Term 3]</h3>
     <div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
     <div class="views-row views-row-2 views-row-even"> [Field Content] </div>
     <div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>
</div>

मुझे पता है कि दृश्य की सवारी करने और फिर समूह को लपेटने के लिए DIV सम्मिलित करने के लिए आप view-view-unformatted.tpl.php (स्टाइल आउटपुट) का उपयोग कर सकते हैं।

हालाँकि, मुझे अपने रैपर डीआईवी को इस तरह होने की आवश्यकता है <div id="term_ID_{number of ID}">। संख्या आईडी उस शब्द के अनुरूप होगी जिसका उपयोग खेतों को समूह बनाने के लिए किया गया है। डिफ़ॉल्ट रूप से, यदि आप व्यू-व्यू-अनफॉर्मैटेड। Tpl.php का उपयोग करते हैं, तो आप इसमें टर्म आईडी के लिए टोकन नहीं डाल सकते।

किसी भी सहायता की सराहना की जाएगी।

Answer 1

मुझे हाल ही में यही करने की जरूरत थी। आप एक टेम्पलेट फ़ाइल बना सकते हैं:

• के तहत टेम्पलेट का पता लगाएं /modules/views/themes/views-view-unformatted.tpl.php।
• इसे अपने /sites/all/themes/<your-theme>फ़ोल्डर में कॉपी करें और नाम बदलें views-view-unformatted--<nodetype>.tpl.php।
• divसंपूर्ण टेम्प्लेट को जोड़ते हुए फ़ाइल को संपादित करें । <h3>टैग समूह का नाम है।

यहाँ क्या संशोधित टेम्पलेट फ़ाइल की तरह लग सकता है।

<div class="your-class">
<?php if (!empty($title)): ?>
    <h3><?php print $title; ?></h3><!--this is the group name-->
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
  <div class="<?php print $classes_array[$id]; ?>">
    <?php print $row; ?>
</div>
<?php endforeach; ?>
</div><!--end your div-->

Comments

यह अभी भी टा मेरे लिए काम किया, muchly :)

— क्लाइव

तुमने मेरा समय बचा लिया दोस्त!

— ड्रापड्रैगन

इस उत्तर को पढ़ने वाले किसी व्यक्ति के लिए यह सोचकर कि उसकी tplफ़ाइल का नाम कैसे रखा जाए , इसका उत्तर यहां देखें drupal.stackexchange.com/questions/11468/… tldr; अपने विचार संपादित करें पृष्ठ में, उन्नत के तहत, विषय पर क्लिक करें: जानकारी

— user56reinstatemonica8

हालाँकि क्यू और ए Drupal 7 हैं, Drupal 8 के लिए भी यही काम करता है

— डंकनमो

Answer 2

प्रारूप की कोशिश करें: HTML सूची। वह पूरी चीज को आइटम-सूची में लपेट देगा। मेरे उद्देश्य के लिए यह सही है (वर्गीकरण वस्तुओं की सूची)। उम्मीद है की यह मदद करेगा।

Comments

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

— क्लेदिफिया

Answer 3

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

रिप्लेसमेंट पैटर्न के बारे में , उस चेतावनी पर ध्यान दें जो दृश्य प्रदर्शित करता है:

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

यदि यह पर्याप्त नहीं है, तो एक नया फ़ील्ड जोड़ने का प्रयास करें, ग्लोबल: कस्टम टेक्स्ट । यह आपको कुछ मनमाने HTML जोड़ने की अनुमति देगा और रिप्लेसमेंट पैटर्न यहाँ भी उपलब्ध हैं। आप प्रारंभ और समाप्ति टैग जोड़ने के लिए दो अलग ग्लोबल: कस्टम टेक्स्ट फ़ील्ड का उपयोग कर सकते हैं <div>।

Comments

हाय, मदद के लिए शुक्रिया। मैं समूहीकरण क्षेत्र को बदलने की कोशिश कर रहा हूं (पृष्ठ के अंतर्गत: शैली विकल्प> समूहन क्षेत्र Nr.1) इस समूहीकरण क्षेत्र के उत्पादन को बदलने के लिए कोई विकल्प नहीं लगता है। Global: Custom textसमूह के भीतर पंक्ति का उपयोग करना , लेकिन समूह के बाहर नहीं,

— big_smile

जब आप समूहिंग फ़ील्ड Nr.1 ​​का चयन करते हैं , तो समूह पंक्तियों और पंक्ति वर्ग के लिए उपयोग किए गए आउटपुट के विकल्प होते हैं । न तो उन में से जो आप चाहते हैं?

— पैट्रिक केनी

हाय, मदद के लिए शुक्रिया। वे विकल्प केवल पूरे समूह के विपरीत व्यक्तिगत क्षेत्रों के चारों ओर आवरण DIVs जोड़ते हैं (जो कि समूहीकरण फ़ील्ड Nr.1 ​​द्वारा बनाया गया है)।

— big_smile

@PatrickKenny क्या आप जानते हैं कि इस पद्धति का दृश्य के प्रतिपादन समय पर बुरा प्रभाव पड़ता है?

— user5950

@ user5950 मैं हर समय फिर से लिखने के परिणामों का उपयोग करता हूं लेकिन मैंने कभी भी प्रदर्शन पर ध्यान नहीं दिया है। मुझे लगता है कि रिश्तों को जोड़ने जैसे अन्य आम विचार कार्यों को रिवाइरट परिणाम से पहले प्रदर्शन में बाधा डालने की अधिक संभावना है।

— पैट्रिक केनी

Answer 4

इन दिनों मैं उसी मुद्दे पर भाग रहा था। और ग्रुप रैपर के बगल में जो मुझे चाहिए था वह था सीएसएस क्लास जैसे पहले / अंतिम प्रति समूह।

इसलिए मैंने व्यू-व्यू-अनफॉर्मैटेड। Tpl में जोड़ा। निम्न php कोड को देखें:

<?php
  #### defs
  // call a global variable every time the template is called
  global $static;
  // be aware of the key_name for the global variable to keep it 
  // unique for every display
  // I call the same view in one panel several times with 
  // different arguments 
  $key_name = $view->name . '_' . $view->current_display ;
  foreach ($view->args as $value) {
    $key_name .= '_' . $value;
  }
  // init classes array
  $group_classes = array();
  ## groups counter - store in global variable 
  if (!isset($static[$key_name]['gc'])) {
    $static[$key_name]['gc'] = 1;
  }
  else {
    $static[$key_name]['gc']++;
  }
  #### classes
  ## counter
  $group_classes[] = 'group-' . $static[$key_name]['gc'];
  ## first
  if ($static[$key_name]['gc'] == 1) {
    $group_classes[] = 'first';
  }
  ## last
  // get max row "id" per group
  foreach ($rows as $id => $row) {
    $max_id = $id;
  }
  // count results (-1 because $id starts with 0)
  $count_results = count($view->result) - 1;
  //
  if ($max_id == $count_results) {
    $group_classes[] = 'last';
  }
  ## ret
  $group_class = implode(' ', $group_classes);
?>

यहाँ html आवरण और कक्षाओं के साथ भाग:

<div class="views-group <?php print $group_class; ?>">
  <?php if (!empty($title)): ?>
    <h3><?php print $title; ?></h3>
  <?php endif; ?>
  <?php foreach ($rows as $id => $row): ?>
    <div <?php if ($classes_array[$id]) { print 'class="' . $classes_array[$id] .'"';  } ?>>
      <?php print $row; ?>
    </div>
  <?php endforeach; ?>
</div>

उत्पादन होगा:

<div class="views-group group-1 first">
  content of first group
</div>
<div class="views-group group-2">
  content of second group
</div>    
<div class="views-group group-3 last">
  content of third group
</div>

सहायक हो सकता है - आनंद लें

Answer 5

तो मुझे लगता है कि सबसे बड़ी पहेली यह है कि h3 टैग के भीतर $ शीर्षक के मूल्य का उपयोग करके वर्ग कैसे उत्पन्न किया जाए। मैं लिप्यंतरण मॉड्यूल और निम्नलिखित स्निपेट आज़माऊंगा:

<?php
  $group_class = function_exists('transliteration_get') ? transliteration_get($title) : $title;
  $group_class = trim($group_class);
  $group_class = str_replace(' ', '-', $group_class);
  $group_class = strtolower($group_class);
?>

यह मेरे लिए तब काम आया जब मुझे एक दृश्य के भीतर नामांकित एंकर बनाना पड़ा।

Answer 6

बहुत उपयोगी - मुझे ग्रिड आधारित लेआउट के लिए कुछ अल्फा / ओमेगा वर्गों में जोड़ने की आवश्यकता थी और प्रत्येक पंक्ति के लिए दोनों को स्पष्ट करने में सक्षम होने के लिए कुछ विषम भी। मैंने लाइन को इससे संपादित किया:

$group_classes[] = 'group-' . $static[$key_name]['gc'];

इसके लिए:

$group_classes[] = 'group-' . $static[$key_name]['gc'] . ($static[$key_name]['gc'] % 2 ? ' alpha even' : ' omega odd');

जो आवश्यक आउटपुट देता है।

Answer 7

आपको लिप्यंतरण मॉड्यूल की आवश्यकता नहीं है। Drupal core के पास इसके लिए drupal_html_class फ़ंक्शन है।

Answer 8

आज मेरे पास एक समान मुद्दा था, लेकिन आवरण HTML पर एक विशिष्ट वर्ग की आवश्यकता थी, मेरे मामले में दृश्य को वर्गीकरण की शर्तों द्वारा वर्गीकृत किया गया है, और हमें प्रत्येक शब्द पर एक विशिष्ट शैली की आवश्यकता है, इसलिए प्रति शब्द एक विशिष्ट वर्ग। यहां बताया गया है कि हमने कैसे अनमैटेड टेम्पलेट को बदल दिया है:

<?php if(is_numeric($title)) { $term = taxonomy_term_load($title); $title = $term->name; } ?>
<div class="term-<?php print $term->tid;?>">
<?php if (!empty($title)): ?>
    <h3><?php print $title; ?></h3><!--this is the group name-->
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
  <div class="<?php print $classes_array[$id]; ?>">
    <?php print $row; ?>
</div>
<?php endforeach; ?>
</div><!--end your div-->

दृश्य में टैक्सोनॉमी शब्द क्षेत्र का प्रदर्शन इसके लिए निर्धारित है: "इकाई आईडी दिखाएं"। इसलिए हम आईडी को कक्षा के नाम के हिस्से के रूप में प्राप्त करते हैं, और फिर उसी आईडी के आधार पर शीर्षक को लोड करते हैं।

Answer 9

किसी को भी, जो कोड में गोता लगाने और टेम्पलेट्स के बारे में गड़बड़ नहीं करना चाहता है के लिए वहाँ एक आसान तरीका यह है कि डिफ़ॉल्ट का उपयोग करके अलग-अलग वर्गों को फेंस का उपयोग करके और अपने स्वयं के डिव को उपसर्ग और प्रत्यय में जोड़कर साधारण फ़ील्ड फॉर्मेटर का उपयोग करें । यदि आपके पास कई फ़ील्ड हैं, तो पहले फ़ील्ड के उपसर्ग में, और अंतिम फ़ील्ड के प्रत्यय में युक्त div जोड़ें।

तो उपसर्ग और प्रत्यय क्षेत्रों के साथ देशी संरचना कुछ इस तरह दिखाई देगी:

<div class="field field-name-field-test field-type-text field-label-above">
 <div class="field-label">Foobar field:&nbsp;</div>
  <div class="field-items">
   *:prefix posted here*
   <div class="field-item even">Leaner markup means better front-end performance.</div>
   *:suffix posted here*
 </div>
</div>

यदि आप "फू" वर्ग जोड़ने जा रहे हैं तो यह बन जाएगा

   <div class="foo"> *:prefix posted here*
    Leaner markup means better front-end performance.
   </div> *:suffix posted here*

Answer 10

ऊपर से क्रिसलीज का उत्तर यह अच्छी तरह से बताता है कि टेम्पलेट फ़ाइल का नाम क्या है। यदि आप केवल एक दृश्य बदलना चाहते हैं, तो नई फ़ाइल में दृश्य का मशीन नाम शामिल होना चाहिए। आप इसे देखने के संपादन पृष्ठ के लिए url में पा सकते हैं। यह एक समान मुद्दे पर इस टिप्पणी में बहुत अच्छी तरह से समझाया गया है: https://www.drupal.org/node/1383696#comment/676128

मुझे $ शीर्षक के मूल्य का उपयोग करते हुए पंक्तियों के चारों ओर एक वर्ग की आवश्यकता थी ताकि मैं उन्हें 2 कॉलम में प्रस्तुत कर सकूं। यहाँ कोड है:

<?php if (!empty($title)): ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<div class="<?php print strtolower($title); ?>" > <!--added div with class-->
<?php foreach ($rows as $id => $row): ?>
  <div<?php if ($classes_array[$id]) { print ' class="' . $classes_array[$id] .'"';  } ?>>
    <?php print $row; ?>
  </div>
<?php endforeach; ?>
</div> <!--end of added div-->

Answer 11

मैं एक समान मुद्दे पर आया था। मैं अपनी समूहीकृत पंक्तियों को बूटस्ट्रैप समझौते के भीतर प्रदर्शित करना चाहता था। मैं इसे बूटस्ट्रैप मॉड्यूल के साथ काम नहीं कर सका ।
टिप्पणी # 4 ने मेरी समस्या हल कर दी।
यहाँ मेरे views-view-unformatted-[my_view_name]-[my_display_name].tpl.phpजैसा दिखता है

<?php

/**
 * @file
 * YOUR_THEME simple view template to display a list of rows.
 *
 * @ingroup views_templates
 */
?>

    <?php
    #### defs
      // call a global variable every time the template is called
      global $static;
      // be aware of the key_name for the global variable to keep it 
      // unique for every display
      // I call the same view in one panel several times with 
      // different arguments 
      $key_name = $view->name . '_' . $view->current_display ;
      foreach ($view->args as $value) {
        $key_name .= '_' . $value;
      }
      // init classes array
      $group_classes = array();
      ## groups counter - store in global variable 
      if (!isset($static[$key_name]['gc'])) {
        $static[$key_name]['gc'] = 1;
      }
      else {
        $static[$key_name]['gc']++;
      }
      #### classes
      ## counter
      $group_classes[] = 'group-' . $static[$key_name]['gc'];
      ## first
      if ($static[$key_name]['gc'] == 1) {
        $group_classes[] = 'first';
      }
      ## last
      // get max row "id" per group
      foreach ($rows as $id => $row) {
        $max_id = $id;
      }
      // count results (-1 because $id starts with 0)
      $count_results = count($view->result) - 1;
      //
      if ($max_id == $count_results) {
        $group_classes[] = 'last';
      }
      ## ret
      $group_class = implode(' ', $group_classes);
      $group_id = implode($group_classes); // helps me having a id whithout spaces for my accordions panels.
    ?>

    <div class="panel panel-default <?php print $group_class; ?>">
        <?php if (!empty($title)): ?>
          <?php if($group_id == 'group-1first'): ?>
                <!--<h3><?php //print $title; ?></h3>-->
                <div class="panel-heading" role="tab" id="heading<?php print $group_id; ?>">
                    <h3 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php print $group_id; ?>" aria-expanded="true" aria-controls="collapse<?php print $group_id; ?>">
                            <?php print $title; ?>
                        </a>
                    </h3>
                </div>
                <div id="collapse<?php print $group_id; ?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading<?php print $group_id; ?>">

            <?php else: ?>
                <div class="panel-heading" role="tab" id="heading<?php print $group_id; ?>">
                    <h3 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php print $group_id; ?>" aria-expanded="false" aria-controls="collapse<?php print $group_id; ?>">
                            <?php print $title; ?>
                        </a>
                    </h3>
                </div>
                <div id="collapse<?php print $group_id; ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php print $group_id; ?>">

            <?php endif; ?>
        <?php endif; ?>                                                 

                    <div class="panel-body">
                        <?php foreach ($rows as $id => $row): ?>
                                    <div<?php if ($classes_array[$id]) { print ' class="' . $classes_array[$id] .'"';  } ?>>
                                        <?php print $row; ?>
                                    </div>
                        <?php endforeach; ?>
                    </div>
            </div>
    </div>

बेशक, काम करने के लिए समझौते के लिए, आपको भी दृश्य-दृश्य संपादित करना होगा- [my_view_name] - [my_display_name] .tpl.php क्रम में।

<?php if ($rows): ?>
    <!--<div class="view-content">-->
    <div class="view-content panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <?php print $rows; ?>
    </div>
  <?php elseif ($empty): ?>
    <div class="view-empty">
      <?php print $empty; ?>
    </div>
  <?php endif; ?>

मैंने html टिप्पणियों के बीच मॉड्यूल से डिफ़ॉल्ट कोड छोड़ा।
आशा है ये मदद करेगा।