Twig - if and content.field

By richmaniac on 22 Feb 2016 at 18:13 UTC

I really feel stupid. I am quite new in drupal (i use drupal 8). I created a new content type with a lot of files. Also i created a new template for the content type.

Now i want to display several fields. That works:
Example: {{ content.field_shops }}

But i also want to add some html, so i wanted to check if there is something in content.field_shops and only let it be displayed if it is like that.

So i tried:
{% if content.field_shops %}{{ content.field_shops }}
{% endif %}

But it does not work ;-(

I also tried with "is empty", "ez_is_field_empty" and so on.

Do you have any idea how to check if a field contains data and only display it when it has any content.

Comments

This also does not work:

richmaniac commented 22 February 2016 at 19:01

This also does not work:
{% if content.field_land is not empty %}Land: {{ content.field_land }}
{% endif %}

It will always be shown ... anyway if it is filled or not ;-(

\,,/

Jeff Burnz commented 22 February 2016 at 23:11

Coule of ways...

Generally I'd say you have to render the field to know if it's empty.

  {% set field_image = content.field_image|render %}
  {% if field_image %}
    <div class="field-image-wrapper">{{ field_image }}</div>
  {% endif %}

  {% if content.field_image|render is not empty %}
    <div class="field-image-wrapper">{{ content.field_image }}</div>
  {% endif %}

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Thanx for your answer. Are

richmaniac commented 22 February 2016 at 23:35

Thanx for your answer. Are you really shure? Isn`t it an object? Don't you think the data is in the object bevore rendering?
Also ... you gave me an example for an image field ... is it the same with a text field?

\"/

Jeff Burnz commented 23 February 2016 at 03:07

Yes, see this issue https://www.drupal.org/node/953034 only 195 comments to read through :)

The bottom line is, yes you can check for emptiness if you know what to check for - I am giving you a generic answer that should always work and does no harm to your site.

All fields are the same, pretty much.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

{% if content.field_name

Rewted commented 24 February 2017 at 19:49

  {% if content.field_name|render is not empty %}
    <div class="field-image-wrapper">{{ content.field_name }} Foo</div>
  {% endif %}

Any idea why the Foo text would display on another line under the name in this example?

Yes, because something in

Jeff Burnz commented 24 February 2017 at 21:31

Yes, because something in content.field_name is a block level element, it likely has a div wrapper or an inline element like a span that is set to display: block etc.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

<div class="field__label"

Rewted commented 24 February 2017 at 23:55

<div class="field__label">Lable</div>
<div class="field__item">5</div>
<div>
Foo
</div>

So you think it has to do with the CSS?

Is this is a serious question

Jeff Burnz commented 25 February 2017 at 00:50

Is this is a serious question or are you trying to be funny? Sorry I can't tell.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Serious. :\

Rewted commented 25 February 2017 at 01:17

Twig code:

{% if content.field_name|render is not empty %}
    <div>{{ content.field_name }} Foo</div>
  {% endif %}

Page source result:

<div class="field__label">Lable</div>
<div class="field__item">5</div>
<div>
Foo
</div>

HTML:

Lable: Value
Foo

OK, sorry, I'm a bit lame

Jeff Burnz commented 25 February 2017 at 01:59

OK, sorry, I'm a bit lame when it comes to humour etc, developer Aspergers ect...

This comes from the field template:

<div class="field__label">Lable</div>
<div class="field__item">5</div>

You can do one of two (or three) things here:

Try setting the Label to "inline" in the Manage Display tab for the content type, it will depend on you theme to some extent if this will work for you.
Copy the field template to your theme, create a suggestion for this field and remove or override the markup (e.g. use span tags instead of div.
Use CSS to display the div elements on one line (use display: inline; or floats, flex etc, display: inline is easiest).

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Thanks for taking the time to

Rewted commented 25 February 2017 at 02:15

Thanks for taking the time to explain, I appreciate your time, but also slowly learning. With your suggestion of modifying the CSS, the issue isn't with the label or field value, it's the additional text.

What I expect (one line):

Label Value Foo

What I get (two lines):

Label Value
Foo

Try this and see what happens

Jeff Burnz commented 25 February 2017 at 02:45

Try this and see what happens - I can't know for sure without seeing your site if this will work in your theme (I'd HAVE to see the site to know for sure what all the other CSS is doing etc):

{% if content.field_name|render is not empty %}
    <div>{{ content.field_name }}<div class="field__item">Foo</div></div>
  {% endif %}

I.e. it should create, according to your earlier posts:

<div class="field__label">Lable</div>
<div class="field__item">5</div>
<div class="field__item">Foo</div>

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Twig:

Rewted commented 25 February 2017 at 02:56

Twig:

{% if content.field_class1|render is not empty %}
    <div>{{ content.field_class1 }}<div class="field__item">Foo</div></div>
  {% endif %}

Page Source:

    <div>
  <div data-quickedit-field-id="node/14086/field_class1/und/full" class="field field--name-field-class1 field--type-list-integer field--label-inline quickedit-field">
    <div class="field__label">Class</div>
              <div class="field__item">5</div>
          </div>
<div class="field__item">Foo</div></div>

Display:
Class 5
Foo

You can try:

Jeff Burnz commented 25 February 2017 at 03:12

You can try:

.field--name-field-class1.field--label-inline {display: inline-block}

Like I said before, this is all guesswork because I can't see your site, this is my last post, sorry, I am busy and without seeing your site this is just punching in the dark.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Didn't work, wish I should

Rewted commented 25 February 2017 at 03:27

Didn't work, all 3 are on separate lines now. Wish I should show you but my sandbox doesn't touch the Internet. Thank you for your time.

Try a field template ...

mmjvb commented 26 February 2017 at 09:19

and move the <div class="field__item">Foo</div> in there.

I've noticed that <div class=

Rewted commented 26 February 2017 at 17:31

I've noticed that <div class="field__item">Foo</div> is outside of the div too, but that's rendered automatically, I've not idea why. Jeff was able to suggest some additional CSS to get everything on one line, the NewsPlus Lite theme is causing issues.

Yes, this helped!

Ralf Eisler commented 2 August 2017 at 12:36

Yes, this helped!

Render|StripTags|Trim

diamondsea

he/him/his

English

commented 12 March 2018 at 01:50

I have had situations where the rendered field contains markup (mostly divs) but no actual content. To avoid this I've used

{% if content.field_name|render|striptags|trim %} {{ content.field_name }} {% endif %}

NOTE: This will NOT display a field that contains HTML but no non-tag content (such as a form with only input fields) as the HTML will all be stripped away and there will be nothing left, so it looks blank to the IF statement.

Thanks diamondsea

BrightBold

she/her

English

Boston, MA

commented 30 May 2019 at 01:13

Thanks diamondsea, this is a great tip. I used it to keep Layout Builder from rendering a section if all the views in that row are empty.

{% if (content.left or content.right %}wasn't working, but

{% set left = content.left|render|striptags|trim %} {% set right = content.right|render|striptags|trim %} {% if (left or right) %}

worked perfectly to prevent the section from appearing when there was no content. Thanks!

HI Jeff, this is a slightly

auxiliaryjoel commented 30 March 2019 at 06:09

HI Jeff, this is a slightly different question but I couldn't find the answer anywhere...

I have an element on my twig page that I only want to show if the page is an Article,

so for example it would not show on my About page or my Home page, but it would show on all my articles.

I can't figure out what {% if %} to use to only display it on Articles. Do you know how I could do this?

Wildcard possible?

Rewted commented 27 February 2017 at 03:42

Is there any way to use a wildcard on content fields that differ slightly, for example...

  {% if content.field_name*|render is not empty %}
    <div>{{ content.field_name1 }}</div>
    <div>{{ content.field_name2 }}</div>
    <div>{{ content.field_name3 }}</div>
    <div>{{ content.field_name4 }}</div>
    <div>{{ content.field_name5 }}</div>
  {% endif %}

No, you'd have to test them

diamondsea

he/him/his

English

commented 12 March 2018 at 01:44

No, you'd have to test them all individually. In your example (though the syntax is invalid) it would display all fields if any one of them had a value. Simplest version would be something like:

{% if content.field_name1|render or content.field_name2|render or content.field_name3|render or content.field_name4|render or content.field_name5|render %}
    <div>{{ content.field_name1 }}</div>
    <div>{{ content.field_name2 }}</div>
    <div>{{ content.field_name3 }}</div>
    <div>{{ content.field_name4 }}</div>
    <div>{{ content.field_name5 }}</div>
  {% endif %}

content.field_name

mariami.ta commented 25 September 2017 at 09:42

This worked for me

{% if content.field_name|render is not empty %}
    <div>{{ content.field_name }}<div class="field__item">Foo</div></div>
  {% endif %}

Thanks mariami.ta. That

rwilson0429 commented 5 December 2018 at 04:46

Thanks mariami.ta. That worked for me too.

ReggieW

That should work as long as

diamondsea

he/him/his

English

commented 15 December 2018 at 03:25

That should work as long as the field contains no markup (wrapper DIVs, etc). If it does, see my above comments.

Hi Diamondsea (is that Sonic

auxiliaryjoel commented 6 March 2019 at 04:18

Hi Diamondsea (is that Sonic Youth reference btw?)
how would i add a class to an already existing div.

Example: I am creating subtheme based of Barrio
the page.html.twig in barrio has this code:

{% block content %}

I want to change the div class from this:

"layout-main-wrapper clearfix"

to this:

"container-flex layout-main-wrapper clearfix"

I don't want to edit the barrio twigs though, I want use an {% if %} within my own subtheme page.html.twig file

but not sure how to do it ?

You should just be able to

diamondsea

he/him/his

English

commented 7 March 2019 at 15:02

You should just be able to put your updated version of page.html.twig in your subtheme and it should pick that up instead of the parent theme's version.

(Actually my username is from an old diamond (gemstone) finding service web site (diamondsea.com) that I created. Sonic Youth really killed my SEO when that song came out :-( ).

thanks for your reply

auxiliaryjoel commented 8 March 2019 at 05:14

thanks for your reply @diamondsesa

the barrio subtheme that I'm using, has a page.html.twig, that extends the main theme's page.html.twig

{% extends "@bootstrap_barrio/layout/page.html.twig" %}

so because it's extending it, I can't add a div around the outside of the block, or do an If... to grab the existing div, because in either case I would be putting code outside of a block, which isn't possible within a twig file that is extending another one.

Hope I'm making sense there.... is there any other way I can 'call out' the existing div from the parent theme and add extra classes to it, whilst avoiding writing code outside of a block?

I use this variant

aaagepard commented 6 April 2019 at 07:39

I use this variant, may be it will help somebody.

{% if node.field_name1.value or node.field_name2.value or node.field_name3.value or node.field_name4.value %}
    <div>{{ content.field_name1 }}</div>
    <div>{{ content.field_name2 }}</div>
    <div>{{ content.field_name3 }}</div>
    <div>{{ content.field_name4 }}</div>
  {% endif %}