Using Fallback Images for a Visually Stunning Website

Recently, I was invited to speak at a Regional Ministers Conference about how churches can communicate better. It was a great time – and the main takeaway I left them with was to always remember who they are communicating with – and to remove any barriers they could to that message getting across. It’s essential that as churches they communicate as clearly as possible.

Regional Ministers Conference

Recently, I was invited to speak at a Regional Ministers Conference about how churches can communicate better. Australia

At the moment I’ve got my head down working away on Faithvox – setting up the way we will handle Sermons and Talks for churches. One of the things we’ve been putting a lot of thought into is how we deal with images when displaying a list of recent sermons.

Obviously, there can be a lot of variety in what is available – depending on what each church does when recording their sermons. Some churches record full video, while others only have audio. Some will have artwork for each sermon, while others might have the same artwork across a whole series, or none at all.

When displaying recent sermons, we want a visually engaging interface to draw users’ attention to the different sermons – something like this:Sermons preview

In order to achieve something visually engaging like this, while not knowing what images the church might have, has pushed us to implement a very specific system to ensure there is always an image to display. I like to call it a ‘fallback’ system.

The Image Fallback System

This system allows us to ensure there is always an image to display for each sermon – regardless of what sort of content the church has to provide. The site looks for a series of different image types – moving on to the next in the list if none can be found. Here is what we have so far…

1. Manual Feature Thumbnail

Churches can manually load an image for the specific sermon. This could be artwork specific to that particular sermon, a photo of the speaker – anything they want.

adding feature image

2. Automatic Video Thumbnails

If the sermon has an embedded video (from Youtube, Vimeo or similar), the system automatically generates a thumbnail which is then used as the sermon image.

auto-vid thumbnail

3. Series Artwork

We encourage churches to organise their sermons into series – and for many churches they will have artwork that is used to tie the whole series together.

sermon series graphic


4. Default Fallback Image

We allow churches to load a generic image that is used as a final fallback, to be used when no other images are available.fall back image

How does it work?

When we go to load an image for a sermon, we work our way down the list – checking to see if each image is in place. If it is, then we display it, otherwise we move to the next image. The advantage of having the Default image is that even if the church hasn’t been able to load an image for the sermon, we’re still able to display something relevant to keep the visual design of the site looking nice.fallback image system - faithvox

And keeping things looking good is more than just aesthetics. Maintaining a high level of visual polish actually enhances the overall impression of the church as well-established, presentable, and organised.

Want to see how this all looks when it comes together? We’d love to show you our sermons’ functionality – you can check it out at

So, how did we do? Your feedback contributes to making our digital systems even more effective and relevant to your needs. Please leave a helpful comment in the comments section. Thanks a lot!

Leave a Comment