SOLVED: Fallback displayed instead of Source Image

Browser: Chrome 127.0.6533.120
OS: macOS

I have a profile image in my header that uses {wp_user_picture} at the XL (Base breakpoint) and a fallback image set as the main image. The source image is displayed correctly in the builder, but on the frontend the fallback is always used. Iā€™m not sure if itā€™s a bug or if I have something set incorrectly.

Hi Clinton,
Thanks so much for your report!

{wp_user_image} uses the standard avatar/gravatar settings of WordPress. In other words, the corresponding image will be displayed if you have a Gravatar account with the same email address as your WordPress user. If the image does not exist, there are settings in the WordPress discussion settings that determine what should happen:

Accordingly, there is always a fallback (from the default avatar settings).

What irritates me, however, is that only the ranger icon is available in the sources, and your wp_user_image seems to come from the jet-form-builder :thinking: All in all, it is relatively confusing and not reproducible on my end.

What should definitely work

You could deactivate the WordPress avatars and create your own custom ā€œprofile imageā€ field (ACF, MetaBox, JetEngine, etc.) for your user profiles and then use {your_image_field @fallback-image:imageID} (see Academy) in the image settings without touching the sources settings (which are meant for different purposes).

If all of this does not work: Please send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase.

Best regards,
timmse

1 Like

Thanks @timmse! I was following the approach recommended in the 1.8.5 release video, but the new @fallback method worked perfectly.

Ok, great! As I said, somehow the output is strange with your approach and I donā€™t know exactly how to reproduce it. But the main thing is that your problem is solved :slight_smile:

@timmse I spoke too soon! My main image is displayed but the fallback is not working. It appears that the @fallback function is only taking the first character, so itā€™s not returning the image. First I was getting an image not found error when specifying the ID (4227) so I changed to the url (https://ā€¦). In both cases I noticed that the img src is only including the first character.

image

If I enter a colon after the field, the main image appears but the fallback does not work. However, without the colon neither image works.

2024-08-22_10-01-06

Ugh, I found my mistake. I was just missing the ā€˜-imageā€™ in the @fallback-image. Apologies for the confusion.

1 Like

@timmse I have the fallback image working perfectly with a CPT, but I canā€™t get it working with my ā€œUser Detailā€ meta box with JetEngine. Iā€™m curious if it could be due to the spaces in the JE syntax?

{je_User_Detail (User fields)_profile-image} works but no fallback
{je_User_Detail (User fields)_profile-image @fallback-image:4227} this breaks the image altogether