How to conditionally display an image or a placeholder

If you wish to display an image only if specific 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:

Placeholder used for missing photo of cat Charlie in tableSo, 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:

Conditional code to display a cat photo or a placeholder image based on availabilityThis 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 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:

Table with cat names. Placeholder icon used when photos are unavailable

Using Field Conditional Logic

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

This functionality is more straightforward 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:

Options for displaying an image based on conditional logic settings

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

Still need help? Contact Us Contact Us