2

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 :-)

0

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:

enter image description here

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.