I'm trying to customize a view displayed in the homepage. Specifically, I'm trying to build slideshow with Bootstrap Carousel.

I've checked this page, but I don't understand how to find viewid or view-display-id. Instead of the viewid I've tried to use the view name, but it doesn't seem to work.
Anyhow, I've created a new folder inside the templates folder called views, in which I've created a new file with the following name: views-view-fields--homepage-carousel--block.html.twig

Here is the code:

<div class="carousel-fill" style="background-image:url({{file_url(node.field_carousel_image.entity.fileuri))}};">
    {% if ((title is not empty) or (description is not empty)) %}
       <div class="carousel-caption">
        {% if (title is not empty) %}
          <h3 class="carousel-title"> {{ title }}</h3>
        {% endif %}

        {% if (description is not empty) %}
          {{ description }}
        {% endif %}
    {% endif %}

Which naming should I use to override a view displayed only in the homepage?
Thank you!


I've managed to correct the information thanks to user No Sssweat. Now, I'm able to customize my view. Here is the file name: views-view--homepage-carousel--block-1.html.twig, where homepage-carousel is the viewid and block-1 is the view-display-id

  • node.field_carousel_image.entity.fileuri is invalid inside a views template file.
    – No Sssweat
    Apr 19 '20 at 19:19
  • How can I access this content type fields variable?
    – DamianFox
    Apr 20 '20 at 8:29
  • It's not possible to access the node object from the fields template file. However, you can solve it by doing this
    – No Sssweat
    Apr 21 '20 at 3:33

Anyhow, I've created a new folder inside the theme root called views

This might not work if it's not inside the /templates folder. You should create a /templates folder if there isn't one already and then create a /views folder inside there.

So should be mytheme/templates/views and then you put all your Views' template files here.

I don't understand how to find viewid or view-display-id

enter image description here

You can find the view name at the top left. Although if your view name were to have an empty space you would have to add a dash. Ex: If it was named "Front Page" then the view-id would be front-page

You can find the Display ID under Advanced, machine name.

Another way would be to right mouse click and inspect element with your browser

enter image description here

  • Here is the file name corrected: views-view--homepage-carousel--block-1.html.twig. Now I'm able to customize the view
    – DamianFox
    Apr 20 '20 at 11:51

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.