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