3

I'm trying to figure out how to use twig templates with views. at the moment I'm just using twig in the view itself but I'm sure I can use twig files to overwrite the styling of the view.

e.g.

<div class="editorHover">
<div class="editorInside">
        {{ field_category }}
        {{ title }}
 </div>
</div>

I'm using this in the rewrite field of the block view with one field hidden.

How can I translate this to a twig file?

enter image description here

Edit1; I'll try to explain my issue in more detail. I've been working with the page.html.twig file which overwrites the default homepage used by Drupal. I'm wondering if I can do the same with blockviews. Can I overwrite the default layout, meaning html layout, divs, classes, ID's using a Html.twig file for the view?

3 Answers 3

4

You can overwrite views-view-fields.html.twig or create your personal views-view-fields--YourViewName.html.twig and apply the div or any wrapper you want.
I advise you to activate the twig debug to follow the suggestions

2
  • Does it automatically detect the template or do you have to apply it to the view? Commented Apr 20, 2016 at 10:11
  • I think it's automatically, beacause these are standards, to make sure enable the twig debug Commented Apr 20, 2016 at 10:24
2

To create custom template for view create a file called views-view-fields--view_name--page/block.html.twig. Save this file in your theme's template directory.

In this file define your html structure and specify the fields you want to display in your view like {{ fields.field_name.content }}.

It is mandatory that the fields your specifying in template file must be added to view through admin view, otherwise it will not be displayed in custom view template. Once your template file is saved clear the cache to take effect the changes.

0

https://www.drupal.org/project/drupal/issues/2118743 causes missing file name suggestions when using views as blocks.

To style them, you have to know the pattern, and contrary to what would seem obvious, you don't need to create a template for a block, but for a view.

It is views-view--<view-name-goes-here>.html.twig in <theme>/templates/views

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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