We are showing the featured image with the Bricks image element. But there has no placeholder image option and we are unable to display a fallback image if the featured image is missing. In this tutorial, I am showing you how you can display a fallback image.
Step 1: Upload a fallback image
At first, we shall upload a fallback/placeholder image via the WP media library.
1. Login to your dashboard
2. Navigate to Media -> Add New
3. Upload a placeholder image
4. Copy the image ID

Step 2: Setup Image Element
Open the Bricks builder editor, add the Image element, and set the dynamic data “Featured Image” as an image source.

Step 3: Display fallback image
Now we shall display the fallback image (which we already uploaded on the site) if a post has not a featured image.[edd_restrict id=”12,14″ message=”If you want to view the rest of the content, you need to buy the BricksUltimate add-on. Users of the BricksUltimate will view this content after login.”]
Open the functions.php file of the Bricks child theme or you can add the code inside the 3rd party plugin(if you are using anything)
add_filter( 'post_thumbnail_id', function( $thumbnail_id, $post ){
if( ! $thumbnail_id ) {
return 2539 //* replace the ID with your image ID;
}
return $thumbnail_id;
}, 10, 2 );
Bricks’ Featured Image dynamic tag is using the get_post_thumbnail_id() function. This function is returning the image ID (attachment ID) if a post has a featured image and it has also a filter post_thumbnail_id. With this filter, you can alter the attachment ID and show the other image.
I target this filter and am returning my fallback image ID if the featured image is missing.
Advanced logic
You can also display different fallback images based on post type in this way:
add_filter( 'post_thumbnail_id', function( $thumbnail_id, $post ){
if( ! $thumbnail_id ) {
if( $post->post_type == 'product' )
return 1280;
else
return 2539;
}
return $thumbnail_id;
}, 10, 2 );
If the post type is “product” then it will return attachment ID 1280. Otherwise, it will return attachment ID 2539.
[/edd_restrict]
2 comments
Francois Gonin
Hi there,
Thanks for this Tutorial.
Is it possible to share a snippet for a fallback image for custom term image which I set up with Meta Box (Single Image) ? different fallback image for different taxonomy type.
That would be great.
Thx in advance
François
bultimate
Which element are you using for image? Is it image element?
Comments are closed.