Drupal overwrite view default markup

Question

I am new in Drupal 8 and trying to build a custom theme. Overwriting a theme works well for paragraphs, blocks etc. but not for views. I need your help to tell me how to override the markup of a view. I already created a the .twig file in the custom folder and tested it. It works.

That's what I have inside:

{% for row in rows %}
  <div{{ row.attributes.addClass(row_classes) }}>
    {{ row.content }}
  </div>
{% endfor %}

The {{ row.content }} gives me every element I need in the default Drupal view markup. I want to costumize the HTML. such as:

<h1 class="headline">
    {row.title}
</h1>
<p class="text">
    {row.text}
</p>
<img src="{row.image}" />

I didn't find a way to get the values such as the title from the row. I tried things like row.{field_name} or row.content.{field_name} but nothing works yet. Is there anyway to access these fields by machine name?

Razeem Ahmad Razeem Ahmad · Accepted Answer · 2020-01-18T10:28:08

The easy way to display the contents would be to set the views to content list with a view mode. For e.g: If you want to display a node content type article with display mode teaser then you will get the node--article--teaser.html.twig getting rendered. Then you can modify the the twig file in required format.

<h1 class="headline">
  {{ node.title.value }}
</h1>
<p class="text">
  {{ node.body.value }}
</p>
<img src="{{ node.field_image.entity.uri.value }}" />

Drupal overwrite view default markup

1 Answers