Ansichten - Fügen Sie einen Wrapper DIV um eine Gruppe hinzu

43

In Drupal 7 habe ich eine Ansicht erstellt, die mehrere Felder auflistet. Die Felder werden nach einem anderen Feld gruppiert (der Term-ID des Feldes). Das Markup sieht so aus:

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

Ich brauche jedoch die Markierung, um so auszusehen:

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

Ich weiß, dass Sie views-view-unformatted.tpl.php (Style Output) verwenden können, um die Ansicht zu überschreiben und dann einen DIV einzufügen, um die Gruppe zu schließen.

Allerdings muss ich meine Wrapper DIV so sein <div id="term_ID_{number of ID}">. Die Nummern-ID entspricht dem Begriff, der zum Gruppieren der Felder verwendet wurde. Wenn Sie views-view-unformatted.tpl.php verwenden, können Sie standardmäßig keine Tokens für Term-IDs einfügen.

Jede Hilfe wäre dankbar.

big_smile
quelle

Antworten:

50

Ich musste das gleiche kürzlich tun. Sie können eine Vorlagendatei erstellen:

  • Finden Sie die Vorlage unter /modules/views/themes/views-view-unformatted.tpl.php.
  • Kopieren Sie es in Ihren /sites/all/themes/<your-theme>Ordner und benennen Sie es in um views-view-unformatted--<nodetype>.tpl.php.
  • Bearbeiten Sie die Datei und fügen Sie eine divum die gesamte Vorlage. Das <h3>Tag ist der Gruppenname.

So könnte die geänderte Vorlagendatei aussehen.

<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-->
Kristy Gislason
quelle
4
Das hat auch bei mir funktioniert, ta muchly :)
Clive
Du hast mir Zeit gespart, Kumpel!
DropDragon
1
Wenn Sie diese Antwort lesen und sich fragen, wie Sie herausfinden sollen, wie Sie die tplDatei benennen sollen, lesen Sie die Antwort hier. Drupal.stackexchange.com/questions/11468/… tldr; Klicken Sie auf der Seite zum Bearbeiten Ihrer Ansicht unter Erweitert auf Thema: Informationen
user56reinstatemonica8,
Obwohl das Q und A Drupal 7 sind, funktioniert das gleiche für Drupal 8.
Duncanmoo
16

Versuchen Sie Format: HTML-Liste. Das wird das Ganze in eine Item-Liste packen. Für meinen Zweck ist es perfekt (eine Liste von Taxonomie-Elementen). Hoffe das hilft.

Dagomar
quelle
Das ist gut. Ich wollte das Gruppenfeld als Klasse zum Wrapper hinzufügen, damit ich entsprechend formatieren kann, aber dies in der Benutzeroberfläche von Views selbst nicht zu tun scheint. Was ich stattdessen getan habe, wenn es jemandem hilft, ist: Zuerst auch nach diesem Feld sortieren und dann erst den CSS-Selektor verwenden.
klidifia
11

Haben Sie die Funktion " Ergebnisse umschreiben" ausprobiert ? Klicken Sie auf das Feld, das Sie bearbeiten möchten, und scrollen Sie nach unten, bis Sie Ergebnisse neu schreiben sehen . Aktivieren Sie das Kontrollkästchen " Ausgabe dieses Felds umschreiben" und passen Sie den HTML-Code nach Bedarf an. Für die Token können Sie die Ersatzmuster verwenden , die im Feld unter dem Texteingabebereich angezeigt werden.

Beachten Sie hinsichtlich der Ersetzungsmuster die Warnung, die in Ansichten angezeigt wird:

Beachten Sie, dass Sie aufgrund der Renderreihenfolge keine Felder verwenden können, die nach diesem Feld stehen. Wenn Sie ein Feld benötigen, das hier nicht aufgeführt ist, ordnen Sie Ihre Felder neu an.

Wenn dies nicht ausreicht, fügen Sie ein neues Feld hinzu: Global: Benutzerdefinierter Text . Auf diese Weise können Sie beliebigen HTML- Code hinzufügen, und die Ersetzungsmuster sind auch hier verfügbar. Sie können zwei separate Global: Custom-Textfelder verwenden, um die <div>Start- und End-Tags hinzuzufügen .

Patrick Kenny
quelle
Hallo, danke für deine Hilfe. Ich versuche das Gruppierungsfeld zu ändern (unter Seite: Stiloptionen> Gruppierungsfeld Nr. 1) Es scheint keine Optionen zu geben, um die Ausgabe dieses Gruppierungsfelds zu ändern. Verwenden von Global: Custom textEffekten die Zeile innerhalb der Gruppe, aber nicht außerhalb der Gruppe,
big_smile
Wenn Sie Gruppierungsfeld Nr. 1 auswählen , gibt es Optionen für Gerenderte Ausgabe zum Gruppieren von Zeilen und Zeilenklassen . Keiner von denen macht was du willst?
Patrick Kenny
1
Hallo, danke für deine Hilfe. Bei diesen Optionen werden lediglich Wrapper-DIvs um die einzelnen Felder und nicht um die gesamte Gruppe (die durch Gruppierungsfeld Nr. 1 erstellt wird) hinzugefügt.
big_smile
@PatrickKenny Wissen Sie, ob diese Methode die Renderzeit der Ansicht negativ beeinflusst?
user5950
@ user5950 Ich verwende die ganze Zeit Ergebnisse zum Umschreiben, aber ich habe noch nie einen Leistungseinbruch bemerkt. Ich denke, dass andere häufige Ansichten, wie das Hinzufügen von Beziehungen, die Leistung eher beeinträchtigen, als das Umschreiben von Ergebnissen.
Patrick Kenny
5

In diesen Tagen bin ich auf dasselbe Problem gestoßen. Und was ich neben dem Gruppen-Wrapper brauchte, war eine CSS-Klasse wie first / last per group.

Also habe ich in views-view-unformatted.tpl.php den folgenden PHP-Code hinzugefügt:

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

Hier der HTML-Teil mit dem Wrapper und den Klassen:

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

Die Ausgabe wird sein:

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

Könnte hilfreich sein - genießen

andres
quelle
3

Ich denke, das größte Rätsel ist, wie die Klasse mit dem Wert von $ title in h3-Tags generiert wird. Ich würde das Transkriptionsmodul und das folgende Snippet ausprobieren:

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

Dies funktionierte für mich, als ich innerhalb einer Ansicht benannte Anker machen musste.

Artur
quelle
2

Sehr nützlich - ich musste einige Alpha / Omega-Klassen für ein gitterbasiertes Layout hinzufügen und auch einige ungerade, um beides für jede Zeile löschen zu können. Ich habe die Zeile bearbeitet von:

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

dazu:

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

Welches gibt die erforderliche Ausgabe.

Soulston
quelle
2

Sie benötigen das Transliterationsmodul nicht. Drupal Core hat dafür die Funktion drupal_html_class .

Baris Wanschers
quelle
2

Ich hatte heute ein ähnliches Problem, benötigte jedoch eine bestimmte Klasse für den HTML-Wrapper. In meinem Fall ist die Ansicht nach Taxonomiebegriffen gruppiert, und wir benötigen für jeden Begriff einen bestimmten Stil, also eine bestimmte Klasse pro Begriff. So haben wir die unformatierte Ansichtsvorlage geändert:

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

In der Ansicht ist die Anzeige des Taxonomiebegriffs auf "Entitäts-ID anzeigen" eingestellt. Also bekommen wir die ID als Teil des Klassennamens und laden dann den Titel basierend auf derselben ID.

Vegardjo
quelle
2

Für alle, die nicht in den Code eintauchen und mit Vorlagen herumspielen möchten, gibt es eine einfache Möglichkeit, indem Sie die Standard-Div-Klassen mit Fences entfernen und mit Simple Field Formatierer Ihr eigenes Div in das Präfix und Suffix des Felds einfügen . Wenn Sie mehrere Felder haben, fügen Sie einfach das enthaltende Div im Präfix des ersten Felds und im Suffix des letzten Felds hinzu.

Die native Struktur mit den nicht entfernten Präfix- und Suffixbereichen würde also ungefähr so ​​aussehen:

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

Wenn Sie die Klasse "foo" hinzufügen würden, würde es werden

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

Die Antwort von chrisjlee oben erklärt es gut, mit Ausnahme dessen, wie die Vorlagendatei benannt werden soll. Wenn Sie nur eine Ansicht ändern möchten, muss die neue Datei den Computernamen der Ansicht enthalten. Sie finden dies in der URL für die Bearbeitungsseite der Ansicht. In diesem Kommentar zu einem ähnlichen Thema wird dies sehr gut erklärt: https://www.drupal.org/node/1383696#comment-6729128

Ich brauchte eine Klasse um die Zeilen mit dem Wert von $ title, damit ich sie in 2 Spalten rendern konnte. Hier ist der Code:

<?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-->
jn2
quelle
2

Ich bin auf ein ähnliches Problem gestoßen. Ich wollte, dass meine gruppierten Zeilen in einem Bootstrap-Akkordeon angezeigt werden. Ich könnte nicht mit der Arbeit hat Ansichten Bootstrap - Modul .
Kommentar Nr. 4 hat mein Problem gelöst.
So views-view-unformatted-[my_view_name]-[my_display_name].tpl.phpsieht meine aus

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

Damit das Akkordeon funktioniert, müssen Sie natürlich auch views-view- [my_view_name] - [my_display_name] .tpl.php bearbeiten

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

Ich habe den Standardcode aus dem Modul zwischen HTML-Kommentaren belassen.
Ich hoffe es hilft.

Mars
quelle