Viste: consente di aggiungere un DIV wrapper a un gruppo

In Drupal 7, ho creato una vista che elenca diversi campi. I campi sono raggruppati in un altro campo (il termine ID del campo). Il mark up è simile al seguente:

<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>

Tuttavia, ho bisogno del mark up per assomigliare a questo:

<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>

So che puoi usare views-view-unformatted.tpl.php (Output stile) per andare oltre la vista e quindi inserire un DIV per avvolgere il gruppo.

Tuttavia, ho bisogno che il mio wrapper DIV sia così <div id="term_ID_{number of ID}">. L'ID numero corrisponderà al termine che è stato utilizzato per raggruppare i campi. Per impostazione predefinita, se usi views-view-unformatted.tpl.php, non puoi inserire token per gli ID termine in esso.

Qualsiasi aiuto sarebbe apprezzato.

Ho dovuto fare la stessa cosa di recente. È possibile creare un file modello:

• Trova il modello sotto /modules/views/themes/views-view-unformatted.tpl.php.
• Copialo nella tua /sites/all/themes/<your-theme>cartella e rinominalo in views-view-unformatted--<nodetype>.tpl.php.
• Modifica il file aggiungendo un divintorno all'intero modello. Il <h3>tag è il nome del gruppo.

Ecco come potrebbe apparire il file modello modificato.

<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-->

Prova il formato: elenco HTML. Ciò avvolgerà il tutto in un elenco di articoli. Per il mio scopo è perfetto (un elenco di elementi di tassonomia). Spero che sia di aiuto.

Hai provato la funzione di riscrittura dei risultati ? Fai clic sul campo che desideri modificare e scorri verso il basso fino a visualizzare Riscrivi risultati . Seleziona la casella per Riscrivi l'output di questo campo, quindi personalizza l'HTML come necessario. Per i token, è possibile utilizzare i motivi di sostituzione mostrati nella casella sotto l'area di inserimento del testo.

Per quanto riguarda i motivi di sostituzione , notare l'avviso che viene visualizzato Views:

Si noti che a causa dell'ordine di rendering, non è possibile utilizzare i campi che seguono questo campo; se hai bisogno di un campo non elencato qui, riorganizza i campi.

Se ciò non bastasse, prova ad aggiungere un nuovo campo, Globale: testo personalizzato . Ciò ti consentirà di aggiungere un po 'di HTML arbitrario e i pattern di sostituzione sono disponibili anche qui. È possibile utilizzare due campi di testo Global: Custom separati per aggiungere i <div>tag di inizio e fine.

In questi giorni ho riscontrato lo stesso problema. E quello di cui avevo bisogno accanto al wrapper di gruppo era una classe CSS come first / last per group.

Quindi ho aggiunto in views-view-unformatted.tpl.php il seguente codice 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);
?>

Ecco la parte html con il wrapper e le classi:

<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>

L'output sarà:

<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>

Potrebbe essere utile - divertiti

Quindi immagino che il più grande indovinello sia come generare la classe usando il valore del titolo $ all'interno dei tag h3. Proverei il modulo di traslitterazione e il frammento seguente:

<?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);
?>

Questo ha funzionato per me quando ho dovuto creare ancore nominate in una vista.

Molto utile: avevo bisogno di aggiungere alcune classi alpha / omega per un layout a griglia e anche qualche dispari anche per essere in grado di cancellare entrambi per ogni riga. Ho modificato la riga da:

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

a questa:

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

Che dà l'output richiesto.

Non è necessario il modulo di traslitterazione. Drupal core ha la funzione drupal_html_class per questo.

Ho avuto un problema simile oggi, ma avevo bisogno di una classe specifica sul wrapper html, nel mio caso la vista è raggruppata per termini di tassonomia e abbiamo bisogno di uno stile specifico per ogni termine, quindi una classe specifica per termine. Ecco come abbiamo modificato il modello di visualizzazione non formattato:

<?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-->

Nella vista la visualizzazione del campo del termine tassonomia è impostata su: "Mostra ID entità". Quindi otteniamo l'id come parte del nome della classe, quindi cariciamo il titolo in base allo stesso id.

Per chiunque non voglia immergersi nel codice e pasticciare con i template c'è un modo semplice per farlo rimuovendo le classi div predefinite usando Fences e aggiungendo il proprio div nel prefisso e suffisso del campo usando Simple field formatter . Se hai più campi, aggiungi semplicemente il div contenente nel prefisso del primo campo e il suffisso nell'ultimo campo.

Quindi la struttura nativa con il prefisso e le aree del suffisso non spogliate sarebbe simile a:

<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>

Se avessi intenzione di aggiungere la classe "pippo", diventerebbe

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

La risposta di chrisjlee sopra lo spiega bene, tranne per come nominare il file modello. Se si desidera modificare solo una vista, il nuovo file deve includere il nome macchina della vista. Puoi trovarlo nell'URL della pagina di modifica della vista. È spiegato molto bene in questo commento su un problema simile: https://www.drupal.org/node/1383696#comment-6729128

Avevo bisogno di una classe attorno alle righe usando il valore di $ title in modo da poterle renderizzare in 2 colonne. Ecco il codice:

<?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-->

Mi sono imbattuto in un problema simile. Volevo che le mie file raggruppate fossero visualizzate all'interno di una fisarmonica bootstrap. Non riuscivo a farlo funzionare con il modulo Views Bootstrap .
Il commento n. 4 ha risolto il mio problema.
Ecco views-view-unformatted-[my_view_name]-[my_display_name].tpl.phpcome appare il mio

<?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>

ovviamente, per far funzionare la fisarmonica, devi anche modificare views-view- [my_view_name] - [my_display_name] .tpl.php per avere

<?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; ?>

Ho lasciato il codice predefinito dal modulo tra i commenti HTML.
Spero che sia d'aiuto.