Overriding views fields in twig

Question

I want to override the default views-view-fields.html.twig so that I can display specific fields in a bootstrap layout, e.g.

<div class="col-sm-3">{{ fields.field_name_1 }}</div>
<div class="col-sm-6">{{ fields.field_name_2 }}</div>
<div class="col-sm-3">{{ fields.field_name_3 }}</div>

We have all this important code in that file that gets repeated for each field in the loop: -

{{ field.separator }}
{%- if field.wrapper_element -%}
  <{{ field.wrapper_element }}{{ field.wrapper_attributes }}>
{%- endif %}
{%- if field.label -%}
  {%- if field.label_element -%}
    <{{ field.label_element }}{{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</{{ field.label_element }}>
  {%- else -%}
    {{ field.label }}{{ field.label_suffix }}
  {%- endif %}
{%- endif %}
{%- if field.element_type -%}
  <{{ field.element_type }}{{ field.element_attributes }}>{{ field.content }}</{{ field.element_type }}>
{%- else -%}
  {{ field.content }}
{%- endif %}
{%- if field.wrapper_element -%}
  </{{ field.wrapper_element }}>
{%- endif %}

So I want to avoid having to repeat this over and over for each field that I manually arrange. What's the best approach here? I tried overriding the views-view-field.html.twig files but I can't seem to get to the same variables.

What's the best approach?

Thanks :-)

Answer 1

I have a similar issue! However, I am able to print specific field values in view-view-field.html.twig by using the syntax {{ view.field.[filed_name].original_value}}.
In my cause it was {{ view.field.title.original_value}}.

The issue I have is the each title is coming up 4 times! I don;t know how to fix. I also overrode views-view-fields.html.twig to add my own HTML wrapper outside the loop:

<div class="col-md-3 col-sm-3 col-xs-12">
    <div class="box box-white teaser-box">
      {% for field in fields -%}
        {{ field.separator }}
        {%- if field.wrapper_element -%}
          <{{ field.wrapper_element }}{{ field.wrapper_attributes }}>
        {%- endif %}
        {%- if field.label -%}
          {%- if field.label_element -%}
            <{{ field.label_element }}{{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</{{ field.label_element }}>
          {%- else -%}
            {{ field.label }}{{ field.label_suffix }}
          {%- endif %}
        {%- endif %}
        {%- if field.element_type -%}
          <{{ field.element_type }}{{ field.element_attributes }}>{{ field.content }}</{{ field.element_type }}>
        {%- else -%}
          {{ field.content }}
        {%- endif %}
        {%- if field.wrapper_element -%}
          </{{ field.wrapper_element }}>
        {%- endif %}
      {%- endfor %}
    </div>
</div>

which is rendering well on the page, but I cannot get rid of multiple title issue. Any suggestion would be greatly appreciated.

Here is a screenshot of how my page looks now: