0

I have a (drupal 8.3) view using group by that outputs html like:

<div class="view-content">
  <h3>Category 1</h3>
  <div class="view-row"></div>
  <div class="view-row"></div>
  <div class="view-row"></div>
  <h3>Category 2</h3>
  <div class="view-row"></div>
  <div class="view-row"></div>
  <div class="view-row"></div>
</div>

I would like to hook or template the group by to use a wrapper and achieve:

<div class="view-content">
  <div class="group-wrapper">
    <h3>Category 1</h3>
    <div class="view-row"></div>
    <div class="view-row"></div>
    <div class="view-row"></div>
  </div>
  <div class="group-wrapper">
    <h3>Category 2</h3>
    <div class="view-row"></div>
    <div class="view-row"></div>
    <div class="view-row"></div>
  </div>
</div>

Any ideas how I can accomplish this using Bootstrap theme?

3

You can accomplish this by customizing the views-view-unformatted.html.twig file:

  • Use Twig debugging to determine which version of this template is currently being used. Most likely, it's views-view-unformatted.html.twig in /core/modules/views/templates
  • Copy that file to your theme's templates folder.
  • Rename the template to this: views-view-unformatted--your-view--your-display.html.twig where your-view is the machine name of your view and your-display is the machine name of your view display.
  • Add this code to the template file you created:

    <div class="group-wrapper">
      {% for row in rows %}
        {%
        set row_classes = [
        default_row_class ? 'views-row',
        ]
        %}
      <div{{ row.attributes.addClass(row_classes) }}>
        {% if loop.first and title  %}
          <h3>{{ title }}</h3>
            {% endif %}
            {{ row.content }}
       </div>
      {% endfor %}
    </div>
    
  • Flush your site's caches

Please note that spaces in your machine name are repalced with dashes in the name of the template file.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.