How to get each field value in views-views-unformatted--view-machine-name.html.twig?

Question

I have an twig file: views-view-unformatted--view-machine-name.html.twig

{#
/**
 * @file
 * Default theme implementation to display a view of unformatted rows.
 *
 * Available variables:
 * - title: The title of this group of rows. May be empty.
 * - rows: A list of the view's row items.
 *   - attributes: The row's HTML attributes.
 *   - content: The row's content.
 * - view: The view object.
 * - default_row_class: A flag indicating whether default classes should be
 *   used on rows.
 *
 * @see template_preprocess_views_view_unformatted()
 *
 * @ingroup themeable
 */
#}
{% if title %}
  <h3>{{ title }}</h3>
{% endif %}
{% for row in rows %}
  {%
    set row_classes = [
      default_row_class ? 'views-row',
    ]
  %}
  <div{{ row.attributes.addClass(row_classes) }}>
    {{ row.content }}
  </div>
{% endfor %}

I want to have Title and body field to be in 1 line separated by comma like:

title, body

How can I get value of 'title' or 'body' or any other field in this view while debugging?

I used kint(title) and kint(body) but it's not working. I also made debug = TRUE; in services file.

But can't figure out the way of having fields value in unformatted html twig.

Answer 1

As you can see in views-view-unformatted.html.twig, it says what also the commented code you've shown says, there is no fields variable. Therefore, this template is not used for fields.

Available variables:

• title: The title of this group of rows. May be empty.
• rows: A list of the view's row items.
  • attributes: The row's HTML attributes.
  • content: The row's content.
• view: The view object.
• default_row_class: A flag indicating whether default classes should be used on rows.

If you want to use fields in a view template, use views-view-fields--[view-name]--[machine-name].html.twig. There, you can print your fields like this:

<span>{{ fields.title.content }},</span><span>{{ fields.body.content }}</span>

Answer 2

I have found a Way using Kint, You can get field values in views-view--unformatted.html.twig

if you want a specific field

To get text fields value

{{row.content['#row']._entity.field machine name[0].value}}

To get image fields src

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

To get image alt,title,width,height

{{row.content['#row']._entity.field machine name[0].alt/title/width/height}}

Note : replace field machine name with your fields machine name

If you Want to loop through multiple field

{% for i in range(0, 10) %}
  {{ row.content['#row']._entity.body[i].value }}
{% endfor %}

If you Want raw value

{% for i in range(0, 10) %}
  {{ row.content['#row']._entity.body[i].value|raw }}
{% endfor %}

Answer 3

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 %}

Answer 4

You need to create three files to override the views using twig files.
1. views-view--foobar.html.twig
2. views-view-unformatted--foobar.html.twig
3. views-view-fields--foobar.html.twig

Purpose of all three files is described below:
1: Default theme implementation for main view template.
2: Default theme implementation to display a view of unformatted rows.
3: Default view template to display all the fields in a row.

You should use "views-view-fields--foobar.html.twig" to output each of your field on views.

Below is a sample:

<li>
<p>{{ fields.title.content }}</p> // Title field
<p>{{ fields.body.content }}</p> // Body field
<span>{{ fields.created.content }}</span> // Node authored date field
<a href="{{ fields.path.content }}" class="readmore"> read more </a> // Link to actual page
</li>

Answer 5

Below is the sample code to access field values in views-view-unformatted.html.twig file -

{% 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 %}

Answer 6

You can simply add your field value like this

{% for key, item in rows %}
  {{ view.style_plugin.getField(key, 'field_name') }}
{% endfor %}

Answer 7

From my experience, there's no easy way to twig in views-views-unformatted--view-.html.twig a value from fields not part of the entity structure.

Very to print a text (plain) field. So painfull to print a flag_field, entity_reference and so on.

Having to achieve this without going through the whole view core code, I had to build this hack:

1. add a fake plain text field entity
2. hook the view field value in a custom module:
3. twig (finally) the desired value in template

More details here https://drupal.stackexchange.com/a/288316/13760