Hello, I want to use dynamic data to populate the background of a section. If no image is found, then I would like a fallback image displayed.
At the moment I can’t see how is can be done other than having multiple sections and swapping them out conditionally, but that seems very overkill.
I see that Bricks has recently added “sources” to default image elements, but that’s not helpful in my case, as this is the background of a section.
Thanks for your help!
Hi! As far as I know this isn’t possible at the moment, but you can style the section that should get the background image and the image element to get the look you want. You’d need position: relative on the section, then position: absolute on the image with top: 0 and left: 0 as well as width: 100% and height: 100%. Also adjust the z-index and DOM position of the image to make sure the text is visible on top.
Hey guys,
you can use the relatively new @fallback-image option (see academy article).
{featured_image @fallback-image:80}
In this example 80 is the ID of the fallback image.
Best,
André
Hi everyone.
I am using an ACF gallery to populate a slider. Is there a way to use the featured image of a CPT as a fallback image in there are no images in the ACF gallery? I tried using
{acf_materials_photo_gallery @fallback-image:{featured_image}}
or
{acf_materials_photo_gallery @fallback-image:featured_image}
but it is not working. Is that even possible?
I use a fallback image on a query but its static. So the image does not change.
using the image id.
Field below the image itself
{featured_image @fallback-image:1195}
@DiligentSway
If the slider is empty, you might be able to use a condition to not show the slider as there is an “is empty” condition.
And another condition to do show the featured image based on the slider being empty.
Good point.
I never thought of hiding the slider and just using the featured image with a condition. Because, now that I think about it, a slider with just one image is somewhat irrelevant.
Thanks!
Hi, unfortunately the fallback-image argument doesn’t work on background images (acknowledged by Bricks support).
My use case is a header background that uses the featured image, but I would like to have a fallback if there is no featured image set.
Any advice?
Thanks
I do use it as a background image, where it is the background of a column if the real background image from ACF image field is not found.
Works perfect.
Maybe try to instead of calling the image as featured image (foreground), put it as a background image.
Take some space with some padding to fill it with a background image. Then it should allow fallback image. That’s how i have it setup.
@Ferry - thanks.
Hm, perhaps it is because the fallback image is also dynamic… I’m not sure. I do know I have had multiple back and forth emails with Bricks support and they confirm that it is an issue, and the fix is sitting in a roadmap somewhere…
Quoting Bricks support:
Yes, I can replicate this issue. It seems like the nested dynamic tag is not working in backrgound field.
It will work if you place it on Image element. (Not sure if using Image element as a workaround making sense or not for your website)
I have created a bug tracker for this issue.
My use case is to have the regular featured image be used on desktop (a “hero section” background), and a “mobile featured image” that is not so wide be used on mobile viewports.
Bricks is suggesting custom code block to do it, or duplicate hero section (the latter is not desirable of course).
Clients are asking for it… So will probably seek the custom code route for now.
The fallback image is static assignt by the image id and will not update and only show if the real image is not there.
I have a column, with some stuff inside it. and on the column i have a background image set loaded with dynamic data from ACF. and the background image has the fallback like {featured_image @fallback-image:1195}
were 1195 is the image id
So the fallback image never updates and only shows when the real image is not found.
Quick question.
So it is confirmed that we can’t have it the other way around where the post’s featured image is the fallback?
Example:
{acf_featured_image @fallback-image:{featured_image}}?
Only if you assign the id from the featured image to the fallback manually. (for every single post).
Maybe you can have a cheater kind of setup. Have an image with an image background or overlap the images so if the first fails, the second shows. That you can add it dynamically as both load dynamic. Possibly even condition check the first image to load the second.