Vistas: agregue un contenedor DIV alrededor de un grupo

En Drupal 7, he creado una Vista que enumera varios campos. Los campos se agrupan por otro campo (el término ID del campo). El marcado se ve así:

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

Sin embargo, necesito la marca para que se vea así:

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

Sé que puede usar views-view-unformatted.tpl.php (Style Output) para anular la vista y luego insertar un DIV para envolver el grupo.

Sin embargo, necesito que mi envoltorio DIV sea así <div id="term_ID_{number of ID}">. La identificación del número corresponderá al término que se ha utilizado para agrupar los campos. De manera predeterminada, si usa views-view-unformatted.tpl.php, no puede insertar tokens para ID de término en él.

Cualquier ayuda sería apreciada.

Necesitaba hacer lo mismo recientemente. Puede crear un archivo de plantilla:

• Encuentra la plantilla debajo /modules/views/themes/views-view-unformatted.tpl.php.
• Cópielo en su /sites/all/themes/<your-theme>carpeta y cambie el nombre a views-view-unformatted--<nodetype>.tpl.php.
• Edite el archivo agregando un divalrededor de toda la plantilla. La <h3>etiqueta es el nombre del grupo.

Así es como podría verse el archivo de plantilla modificado.

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

Pruebe el formato: lista HTML. Eso envolverá todo en una lista de elementos. Para mi propósito es perfecto (una lista de elementos de taxonomía). Espero que esto ayude.

¿Has probado la función Reescribir resultados ? Haga clic en el campo que desea editar y desplácese hacia abajo hasta que vea Resultados de reescritura . Marque la casilla Reescribir la salida de este campo y luego personalice el HTML según sea necesario. Para los tokens, puede usar los Patrones de reemplazo que se muestran en el cuadro debajo del área de entrada de texto.

Con respecto a los patrones de reemplazo , tenga en cuenta la advertencia que muestra Vistas:

Tenga en cuenta que debido al orden de representación, no puede usar los campos que vienen después de este campo; Si necesita un campo que no esté en la lista, reorganice sus campos.

Si esto no es suficiente, intente agregar un nuevo campo, Global: Texto personalizado . Esto le permitirá agregar HTML arbitrario y los patrones de reemplazo también están disponibles aquí. Puede usar dos campos de texto Global: Personalizado separados para agregar las <div>etiquetas de inicio y fin.

En estos días me encontré con el mismo problema. Y lo que necesitaba al lado del contenedor grupal era una clase css como primero / último por grupo.

Así que agregué en views-view-unformatted.tpl.php el siguiente código 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);
?>

Aquí la parte html con el contenedor y las clases:

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

El resultado será:

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

Podría ser útil - disfruta

Así que supongo que el mayor enigma es cómo generar la clase usando el valor del $ title dentro de las etiquetas h3. Probaría el módulo de transliteración y el siguiente fragmento:

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

Esto funcionó para mí cuando tuve que hacer anclas con nombre dentro de una vista.

Muy útil: necesitaba agregar algunas clases alfa / omega para un diseño basado en cuadrícula y también algunas extrañas para poder borrar ambas para cada fila. Edité la línea de:

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

a esto:

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

Lo que da la salida requerida.

No necesitas el módulo de transliteración. Drupal core tiene la función drupal_html_class para esto.

Tuve un problema similar hoy, pero necesitaba una clase específica en el contenedor html, en mi caso la vista está agrupada por términos de taxonomía, y necesitamos un estilo específico en cada término, por lo que una clase específica por término. Así es como cambiamos la vista de plantilla sin formato:

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

En la vista, la visualización del campo de término de taxonomía se establece en: "Mostrar ID de entidad". Entonces obtenemos la identificación como parte del nombre de la clase, y luego cargamos el título basado en la misma identificación.

Para cualquiera que no quiera sumergirse en el código y meterse con las plantillas, hay una manera fácil de hacerlo eliminando las clases div predeterminadas usando Fences y agregando su propio div en el prefijo y sufijo del campo usando formateador de campo simple . Si tiene varios campos, simplemente agregue el div que lo contiene en el prefijo del primer campo y el sufijo del último campo.

Por lo tanto, la estructura nativa con las áreas de prefijo y sufijo sin quitar se vería así:

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

Si fuera a agregar la clase "foo" se convertiría

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

La respuesta de chrisjlee anterior lo explica bien, excepto por el nombre del archivo de plantilla. Si desea cambiar solo una vista, el nuevo archivo debe incluir el nombre de la máquina de la vista. Puede encontrar esto en la url de la página de edición de la vista. Se explica muy bien en este comentario sobre un tema similar: https://www.drupal.org/node/1383696#comment-6729128

Necesitaba una clase alrededor de las filas usando el valor de $ title para poder representarlas en 2 columnas. Aquí está el código:

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

Me encontré con un problema similar. Quería que mis filas agrupadas se mostraran dentro de un acordeón de arranque. No pude hacerlo funcionar con el módulo Views Bootstrap .
El comentario n. ° 4 resolvió mi problema.
Así es views-view-unformatted-[my_view_name]-[my_display_name].tpl.phpcomo se ve mi

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

por supuesto, para que el acordeón funcione, también necesita editar views-view- [my_view_name] - [my_display_name] .tpl.php para tener

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

Dejé el código predeterminado del módulo entre los comentarios html.
Espero eso ayude.