How to add link around each rows in views?

Question

I have article' views with fields like this:

<div class="row">
 <div class="views-row">
   <div class="views-field views-field-field-image">Content Image</div>
   <div class="views-field views-field-field-date">Content Date</div>
   <div class="views-field views-field-title">Content Title</div>
   <div class="views-field views-field-view-node">Link to content</div>
 </div>
</div>

I can access to article by my link but I want to render clickable all of row to link .

This is my views-view-unformatted.html.twig file:

{% if title %}
  <h3>{{ title }}</h3>
{% endif %}

{% for row in rows %}
 {%
   set row_classes = [
    default_row_class ? 'views-row',
  ]
 %}
<div class="row">
  <div{{ row.attributes.addClass(row_classes) }}>
   {{ row.content }}
  </div>
</div>
{% endfor %}

and I think I want this:

{% if title %}
  <h3>{{ title }}</h3>
{% endif %}

{% for row in rows %}
 {%
   set row_classes = [
    default_row_class ? 'views-row',
  ]
 %}
<div class="row">

 <a href="path to node"

  <div{{ row.attributes.addClass(row_classes) }}>
   {{ row.content }}
  </div>
</div>

</a>
{% endfor %}

But I don't know how it's possible. Any known workarounds?

Answer 1

Sounds like it would be easier to create a View Mode for this. Add a View Mode under Admin > Structure > Display Modes, arrange the fields and configure their formatters. Then if you need to, create a node--node_type_name--view_mode_name.html.twig template to get the markup you want.

Back in the view, change the output to rendered entity, and select your new View Mode. This reduces complexity when it comes to displaying views that are basic entity fields, because that all happens in the View Mode configuration now instead of dealing with views fields and overwriting and theming.

In your new node view mode twig template, wrap your fields and use the appropriate twig function to wire it up:

https://www.drupal.org/docs/8/theming/twig/functions-in-twig-templates

So, something like:

<article id="node-{{ node.id }}" class="{{ attributes.class }}"{{ attributes }}>
  <a href="{{ path('entity.node.canonical', {'node': node.id}) }}">

    // all node content fields + markup here
    {{ content|without('comment', 'links') }}
  </a>
</article>

Also note that your twig file name for the unformatted view will (I believe) affect all views using the unformatted display. You likely don't want that.