15

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.

16

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>
  • view_name with underscore kept, while machine-name with underscore transformed into comma – Matoeil Mar 5 '18 at 15:16
  • 1
    views-view-fields.html.twig can be copied from the /core/modules/views/templates folder and then renamed as above. For a given View with a machine_name of foobar, then the new name can be views-view-fields--foobar.html.twig. More info on naming conventions is available here: drupal.org/docs/8/theming/twig/twig-template-naming-conventions – bkudrle Aug 17 at 1:58
10

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

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 %}
  • How to use Image Field. When I Use field_image , there is no output. The Image URL is not displaying or rendering! – Harish ST Jul 30 '18 at 9:20
4

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

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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