Accessing individual fields in Drupal 8 views templates

Question

I'm having trouble doing something that I think should be relatively simple drupal 8 views.

I have a content type called Countries. I would like to display the 3 latest country nodes on my homepage in a views block. Each country is displayed with the class "views-row" on the container div. I am using views--view--unformatted--countries--block_1.tpl to template the output.

I would like to output something like the following markup:

<a class="view-row-1" href="/link/to/node">
    <img src="source-of-teaser-image.png">
    <h3>Title of node</h3>
</a>

<a class="view-row-2" href="/link/to/node">
    <img src="source-of-teaser-image.png">
    <h3>Title of node</h3>
</a>

<a class="view-row-3" href="/link/to/node">
    <img src="source-of-teaser-image.png">
    <h3>Title of node</h3>
</a>

The problem I'm having is accessing individual fields in the template. If I use a view mode, I can access individual fields. If I select "show fields" in the view, I can add a field for "view result counter" and "path", which would allow me to add the "view-row-N" class and link the a tag to the node, but I can't get access to the fields individually. I have the {{row.content}} variable, but any attempt to dig further into the variable (eg row.content.field_name) gives me nothing and calling a {{dump(row.content)}} crashes the website.

I can't output this as a view mode for 2 reasons. I don't have access to the "view result counter" or "path" fields in a view mode and, even if I had these variables, some fields would be nested inside others (The image and title are nested inside the )

I feel this should really be as simple as

<a class="view-row-{{ row.content.view_result_counter }}" href="{{ row.content.path }}">

etc but I've tried everything I can think of. Am I completely on the wrong path? Twig and I are not getting along so far...

Intervene

Answer 1

I have figured a way using kint.

Inside your views-view-unformatted.html.twig use the following code to display your individual fields:

{% for row in rows %}

{{ row.content['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ YOUR_FIELD_NAME }}'] }}

{% endfor %}

Lossa

+1 upvote on this answer and the question - this answer (and question) can help those who need markup (e.g. <script>) / js) to be output in view results rows/fields - these are filtered out for "security reasons". But several folks have sensibly argued (in my mind) that only authorised admins would be able to administer views in the first place! See drupal.org/project/views/issues/853880 drupal.org/project/views/issues/417956 and drupal.org/forum/support/post-installation/2009-10-16/… Thanks again. – Thylacine

@ibrahim-samir How can we get the URL instead of the whole style rendering using this code? In this code, i want to get the value of this field field_slack_team_link in the <a href="[link]" target=""><img src="sites/default/files/2023-08/slack.png" alt="values" class="box-image" /></a> – Snooze

@Intervene How can we get the URL instead of the whole style rendering using this code? In this code, i want to get the value of this field field_slack_team_link in the <a href="[link]" target=""><img src="sites/default/files/2023-08/slack.png" alt="values" class="box-image" /></a> – Snooze

Answer 2

Using content/view mode works in your case.

1/ In "views-view-unformatted.html.twig" you can use "loop.index" in the "for" loop to get index of the current row and add it to the "row_classes" variable.

2/In the twig template for the node you can use something like :

<a href="{{ path('entity.node.canonical', {'node': node.id}) }}">
    {{ content.field_img }}
    {{ node.getTitle()}}
</a>

3/You will probably get extra html but you can get rid of most of it by overriding relevant templates.

Xerox

Answer 3

I am not sure if it's what you expect, but you can override field template:

1. Enable Twig debugging: https://www.drupal.org/node/1903374
2. Inspect your page in browser (if site is in debug mode there are comments in html with paths to templates for each element). For example this is field template: core/themes/stable/templates/views/views-view-fields.html.twig
3. Copy required template into your theme folder
4. Add or modify markup.

You can debug template using {{ dump(variable) }} or {{ kint(variable) }}

Prude

Answer 4

In your case you should be using views-view-fields--countries--block_1.html.twig instead of views-view-unformatted--countries--block_1.html. twig file.

Views fields template will iterate on all rows of result. Your views-view-fields--countries--block_1.html.twig should contain below code -

<div>
  <a class="view-row" href="{{variable-to-print-path }}">
   <img src="{{ image-path }}">
   <h3>{{ fields.title.content</h3>
  </a>
</div>

You can check the fields array by using kint function like - {{ kint(fields) }}

Check for image path and anchor path variable from output of kint function.

If you want to do this in views-view-unformatted--countries--block_1.html. twig, then you can access the field values like below -

{% for row in rows %}
  {% set photo = file_url(row['content']['#row']._entity.field_page_photo.entity.fileuri) %}          
  <li><img src={{ photo }} class="img-responsive img-circle"></li>
{% endfor %}

Sweep

Answer 5

The solution is simple use the views fields template.

I created a new template under themes/templates folder:

views-view-fields--VIEW-NAME.html.twig

And now you can access your fields values like this:

{{ fields.field_NAME.content }}

Ress

Answer 6

If you want to access Individual fields in Views Twig Template along with Row Information, Override Views Fields Template in your custom theme :

views-view-fields--VIEW-NAME.html.twig

To get the row index in the same file, Use :

{{ row.index }}

Menam

Answer 7

To get the URL to a Media Image

{{ file_url(row.content['#row']._entity.field_media_image.entity.field_media_image.entity.uri.value) }}

Title

{{ row.content['#row']._entity.title[0].value }}

Body (truncate 140 characters, remove HTML tags)

{{ row.content['#row']._entity.body[0].value|striptags|truncate(140, true, '...')|raw|nl2br }}

Url node in views template

{{ path('entity.node.canonical', { 'node': row.content['#row']._entity.nid[0].value } ) }}

Freehanded