Default Header image to load if missing

Hey guys!

Trying to get this to work but my brain is just not working right now.

I would like to load a default image if the page header image is missing.

This is saying the image is there but it isn’t.

            {% capture file_location %}/assets/images/page-headers/header-our-serviceable-areas.jpg{% endcapture %}

            {% if file_location | file_exists %}

            <picture>
               <source srcset="/assets/images/page-headers/header-{{ this.name | downcase | replace: ' ', '-' }}.webp" type="image/webp">
               <source srcset="/assets/images/page-headers/header-{{ this.name | downcase | replace: ' ', '-' }}.jpg" type="image/jpg">
               <img src="/assets/images/page-headers/header-{{ this.name | downcase | replace: ' ', '-' }}.jpg" class="img-fluid rounded-4" alt="{{ this.name }}" style="object-fit: cover; {{ headerBlockHalfSize }}">
            </picture>

            {% else %}

            <img src="/assets/images/page-headers/header-short-default.jpg" class="img-fluid rounded-4" alt="{{ this.name }}" style="object-fit: cover; {{ headerBlockHalfSize }}">

            {% endif %}

I might need further clarification on this one, but you are setting the file_location variable with the capture, so the variable’s value will always exist.

Also, I’m not sure what the | file_exists filter is? I don’t think that’s supported in Treepl.
As far as I’m aware, there is no way in Treepl’s Liquid to tell if a file exists (at least not for a non-text based file).

Perhaps instead define your image in a Site Global (or other module). Then your Liquid condition to check if a value has been set or not would be like this:

{% if file_location != '' %}
true
{% else %}
false
{% endif %}

ie: if file_location does not equal an empty string

I have set page headers in a number of ways, mostly using a custom module for headers. However, you could accomplish this with the File API. It looks like you are matching the page name to the image file name.

`{% component resource: “File System”, folder: “/Content/images/features”, collectionVariable: “fileData”, type: “api” %}
{% assign fileName = this.name | downcase | replace: ’ ', ‘-’ %}
{% assign fileURL = filename | prepend: ‘/Content/images/features/’ | append: ‘.jpg’ %}

{% capture files %}{% for file in fileData.items %}{% if fileURL == file.url  %}True{% endif %}{% endfor %}{% endcapture %}

{% if files == "True" %}
        <picture>
           <source srcset="/Content/images/features/{{fileName}}.webp" type="image/webp">
           <source srcset="/Content/images/features/{{fileName}}.jpg" type="image/jpg">
           <img src="/Content/images/features/{{fileName}}.jpg">
        </picture>

{% else %}
        <img src="/Content/images/features/Default.jpg">
{% endif %}`
2 Likes

Legend @Rhatch, I used this, and it works perfectly.

Once again @Adam.Wilson, thanks also for your help mate.