I'm trying to customize a View in Drupal 8 where I display a Bootstrap Carousel.
What I've managed to do so far was the right template name, by specifying the viewid and view-display-id.
The view name is homepage-carousel and the view display id is block 1, therefore the template name views-view--homepage-carousel-block-1.html.twig or views-view--homepage-carousel.html.twig.

Now I need to show the content of the fields of a specific Content Type. I've tried with {{ fields.title }}, but it doesn't work. I've also tried to change the template name in views-view-fields--homepage-carousel-block-1.html.twig, but the system doesn't recognize it, so it displays the default view.

Here is the code:

<div class="carousel-fill" style="background-image:url({{file_url(field_carousel_image.entity.fileuri)}});">
       <div class="carousel-caption">
          <h3 class="carousel-title">{{ fields.title }}</h3>

          {{ fields.field_carousel_subtitle }}

How can I show the fields from this kind of view template?

I've tried to rename the template as suggested JeremyM4n, I've flushed all the cache, but it still doesn't work. The view is displayed as default, namely how it is set up in the /admin/structure/views/view/ section.

I haven't mentioned it yet, so I specify it here: the format of this view is Bootstrap Carousel


I managed to find a solution by by overriding the views-bootstrap-carousel.html.twig template in view_bootstrap module. In my case, the name of the template is the following: views-bootstrap-carousel--homepage-carousel--block-1.html.twig

Here is the code:

<div id="{{ id }}" class="carousel {{ effect }}"
    data-interval="{{ interval }}"
    {% if ride %} data-ride="carousel" {% endif %}
    data-pause="{% if pause %}hover{% else %}false{% endif %}">

  {# Show indicators if set in view. #}
  {%  if indicators %}
  <ol class="carousel-indicators">
      {% for key, row in rows %}
          {% set indicator_classes = [loop.first ? 'active'] %}
          <li class="{{ indicator_classes|join(' ') }}" data-target="#{{ id }}" data-slide-to="{{ key }}"></li>
      {% endfor %}
  {% endif %}

  {# Carousel body. #}
  <div class="carousel-inner">
    {% for row in rows %}
      {% set row_classes = ['item', loop.first ? 'active'] %}
      <div class="{{ row_classes|join(' ') }}">
        <div class="carousel-fill">
          {{ row.image }}
          {% if row.title or row.description %}
            {%  if use_caption %}
            <div class="carousel-caption d-none d-md-block">
            {% endif %}
              {% if row.title %}
                  <h3 class="carousel-title">{{ row.title }}</h3>
              {% endif %}
              {% if row.description %}
                  <p>{{ row.description }}</p>
              {% endif %}
              <a class="btn btn-glass" href={{ row.field_carousel_button_url }}>{{ row.field_carousel_button_text }}</a>
            {%  if use_caption %}
            {% endif %}
          {% endif %}
    {% endfor %}
  {# Controls #}
  {% if navigation %}
    <a class="carousel-control-prev" href="#{{ id }}" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">{{ 'Previous'|t }}</span>
    <a class="carousel-control-next" href="#{{ id }}" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">{{ 'Next'|t }}</span>
  {% endif %}
  • No, I've tried to use that kind of template, but it seems it is not recognized. – DamianFox May 2 '20 at 8:39
  • See the answer below, you're missing a second dash - before block as you need to have two of them. – No Sssweat May 2 '20 at 20:32

The template name needs double dashes between each section views-view--homepage-carousel--block-1.html.twig.

At the views-view level all of your data is in rows. You would need to loop through your rows and then get the fields. But it's much easier to just override the main structure you need to in views-view, and then use views-view-fields--homepage-carousel--block-1.html.twig to change the structure of the actual fields, in which case they are available under fields like your example code.

  • Should I create views-view.html.twig first and then views-view-fields--homepage-carousel--block-1.html.twig in the same folder? – DamianFox May 3 '20 at 13:08
  • views-view.html.twig would override all views, but as a troubleshooting method I would test the simplest change first. First verify your theme is working ( where you're placing the templates), then make a simple, visible change, like adding a <h2>Test</h2> to the views-view template and see if it works. Also you mentioned the format is bootstrap carousel, so it probably has it's own template in that module that you may need to override. – JeremyM4n May 3 '20 at 18:14
  • Hey. Thank you for your answer. I was able to access those fields by overriding the views-bootstrap-carousel.html.twig template in view_bootstrap module. In my case, the name of the template is the following: views-bootstrap-carousel--homepage-carousel--block-1.html.twig – DamianFox May 6 '20 at 13:49

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