How to conditionally display an image or a placeholder

If you wish to display an image only if certain criteria match another field's value or even display a placeholder image in case the original image is not present, you can do that with either the [gvlogic] shortcode or with the Field Conditional Logic functionality from the Advanced Filter extension.

Using the [gvlogic] shortcode

In this View, the cat named "Charlie" doesn't have a photo:

Screenshot of a View showing 4 entries, 3 of them have photos of cats except oneSo, we will be replacing the Cat Photo field, which is a File Upload field, with a Custom Content field to write our [gvlogic] shortcode inside:

Screenshot of the Custom Content field with the gvlogic shortcode insideThis is the [gvlogic] code we used on the image above:

[gvlogic if="{Cat Photo:2}"]
<img src="{Cat Photo:2:esc_html}">
[else]
<img src="https://path.to.placeholder.image/no-cat.jpg">
[/gvlogic]

When outputting a field value to be used inside an HTML tag, always use the Modifier :esc_html to prevent it from breaking your website's HTML.

And here's our View now with a placeholder image for an empty File Upload field:

Screenshot of the View showing 4 entries, 3 of them have photos of cats, one of them has a placeholder image

Using Field Conditional Logic

In order to use this feature, you must have installed the Advanced Filter plugin which is available only to the Core + Extensions or All Access licenses.

This functionality is easier than using the [gvlogic] shortcode because it doesn't require any custom code, it's as simple as specifying the conditions for the Cat Photo field in the View editor:

Screenshot of the field settings modal highlighting the field conditional logic section

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.