Hiding an empty web app field

[Daniel Nicholls]

Is it possible to hide a web app field if there is no data for it, WITHOUT resorting to tables?

[Robert_K__Bell · Accepted solution]

This is where you'd use Liquid Markup logic operators:

    {% if yourWebappField and yourWebappField != '' -%}
        <div>
            The thing: {{ yourWebappField }}
        </div>
    {% endif -%}

[Liam Dilley]

or Robert.

[Daniel Nicholls]

Thanks for this, Robert.

Not sure why you added ' and yourWebappField '. Is this necessary? I got away with using the web app field just the once, and also had to put 'youWebappField' inside {{}} for it to work.

[Daniel Nicholls]

So just to make it clear, this is what I did:

    {% if {{ image1 }}!= '' -%}
        <li class="scarf-tie-content">
            <img src="{{ image1 }}"><p><span>Step 1</span>{{ instructions1 }}</p>
        </li>
    {% endif -%}

[Robert_K__Bell]

Using the double curly tags ("Output markup") inside the curly-percent tags ("Tag markup") doesn't work the way you might expect. The Output markup will be replaced by its string representation before the outer Tag markup is evaluated.

That is, depending on the value of image1, the if statement might look like...

    {% if /example image.jpg != '' -%}
    (missing quote marks, special characters in value) 

    {% if  != '' -%}
    (empty string) 

    {% if {{image1}} != '' -%}
    (null value, `image1` doesn't get replaced) 

These result in invalid syntax.

---

The if x and x != '' may look redundant, but it's designed to catch both null and '' values. It's necessary because empty strings evaluate as true in Liquid Markup.

[Liam Dilley]

That really does not help a beginner and not actually that accurate in the render output for custom fields Robert.

@Daniel - Just do not do braces in your if, You already in a liquid conditional and you do not need to force another rendering request.

{% if image1 != '' -%}

    <li class="scarf-tie-content">

        <img src="{{image1}}"><p><span>Step 1</span>{{instructions1}}</p>

    </li>

{% endif -%}

Will be fine for you, if your field name has spaces:

{% if this.['image 1'] != '' -%}

    <li class="scarf-tie-content">

        <img src="{{image1}}"><p><span>Step 1</span>{{instructions1}}</p>

    </li>

{% endif -%}

Hope that helps

[Daniel Nicholls]

That's really helpful, guys, thanks.

And thanks for simplifying this for me, Liam.

As a matter of interest, I assume sticking in unnecessary braces, hence forcing more rendering requests, would slow things down, and is therefore bad practice. Is that right?

[Liam Dilley]

Average person may not notice on the page load, but its more getting habit of avoiding it. May not notice for this one case, but then do it for the next thing, and next thing etc and it adds up.

[Daniel Nicholls]

Further to this:

Rather than repeating the same if statement for each image field line of code, how would I implement a for loop to count the fields (from 1 to 10).

So, rather than:

    {% if this.["portfolio image 1"] != '' -%}<li><img alt="" src="{{this.["portfolio image 1"]}}" /></li>{% endif -%}

    {% if this.["portfolio image 2"] != '' -%}<li><img alt="" src="{{this.["portfolio image 2"]}}" /></li>{% endif -%}

    {% if this.["portfolio image 3"] != '' -%}<li><img alt="" src="{{this.["portfolio image 3"]}}" /></li>{% endif -%}

    {% if this.["portfolio image 4"] != '' -%}<li><img alt="" src="{{this.["portfolio image 4"]}}" /></li>{% endif -%}

    {% if this.["portfolio image 5"] != '' -%}<li><img alt="" src="{{this.["portfolio image 5"]}}" /></li>{% endif -%}

    {% if this.["portfolio image 6"] != '' -%}<li><img alt="" src="{{this.["portfolio image 6"]}}" /></li>{% endif -%}

    {% if this.["portfolio image 7"] != '' -%}<li><img alt="" src="{{this.["portfolio image 7"]}}" /></li>{% endif -%}

    {% if this.["portfolio image 8"] != '' -%}<li><img alt="" src="{{this.["portfolio image 8"]}}" /></li>{% endif -%}

    {% if this.["portfolio image 9"] != '' -%}<li><img alt="" src="{{this.["portfolio image 9"]}}" /></li>{% endif -%}

    {% if this.["portfolio image 10"] != '' -%}<li><img alt="" src="{{this.["portfolio image 10"]}}" /></li>{% endif -%}

If possible, how would I implement a count that would just require one line of the if statement.

[Robert_K__Bell]

Try this:

    {% for n in (1..10) -%}
        {% assign key = "portfolio image " | append: n -%}
        {% if this[key] != '' -%}<li><img alt="" src="{{ this[key] }}" /></li>{% endif -%}
    {% endfor -%}

[Daniel Nicholls]

Neat. Works perfectly.

Thanks, Robert.