[Resolved] Shortcode for image field is no longer displaying correct image URL

[Author]

Posts

[christineK]

We are using this shortcode [types field='header-image' size='large' url='true'][/types] to display the image URL from our custom field "Header Image". This was working the other day, and as of today it is no longer working. We haven't made any changes to the template that may have caused this. The shortcode is pulling the URL of images from other Custom Post Types and not the current Post.

See example in screenshot attached. The Background Image URL should be: hidden link

But when you inspect it, you can see that it does not match. I'm only having this issue when I use the shortcode as a background image url. As I mentioned, this was working correctly the other day. I'm not sure if Toolset auto-updated and now has a bug. But any help to resolve the issue would be appreciated.

Live example: hidden link

[Christian Cox]

Hi, normally plugin updates must be triggered manually so I don't think changes to the software would have been applied automatically without some manual intervention here. It could have something to do with where the template is placed, how the shortcode is used, or interaction with a 3rd-party plugin that was updated independently of Toolset. Could you provide some additional information for me?
- Exactly how is the image placed as a background with CSS? Is the field shortcode used in a compiled CSS file, or is it in a style tag applied in a template somewhere? Please provide any relevant code for me to review, and let me know more about the location of this code.
- It seems that Beaver Builder is used on this site for design. Can you explain a bit about how the design for this page is created using BB?

If it's easier, I can log in and take a quick peek in wp-admin to see if anything unusual stands out. Please provide login information if you'd prefer that approach.

[christineK]

Yes, it is designed using Beaver Builder, using the shortcode as the Background URL (*See attachment). It was all working fine up until a few days ago. The odd thing is that the correct background image shows when I'm editing the Toolset Template. But when I'm viewing the actual template in use (on a Project page) the background image pulls whichever project I opened first. So if I open three different projects, the background image continues to show for the first project opened - instead of the image for that current post. The only plugin changes we've made was adding an Image Optimization plugin. I tested deactivating that plugin, but it didn't resolve this issue. I've also tried clearing the server cache and the Beaver Builder cache.

[Christian Cox]

Okay the first thing I would like to try is to add the current post ID explicitly in the Types field shortcode:

[types field='header-image' size='large' url='true' item='[wpv-post-id]'][/types]

If this doesn't help, I'll need to log in and take a closer look to see what might be happening here. Please provide login credentials in the private reply fields here so I can investigate.

[Christian Cox]

I edited this Content Template and made a change in the shortcode, replacing url='true' with output='raw':

[types field='header-image' size='large' output='raw' item='[wpv-post-id]'][/types]

It seems to solve the problem on the ECO Services project post. Can you check the other posts to see if the results are as expected now?

[christineK]

I'm still experiencing the same issue. The "header image" keeps showing the same image across all Projects - and it's based on whichever project I open first. So if I view the ECO project here: hidden link ...I'll see the correct Header Image. But when I open another project like this one: hidden link ... I see the exact same header image as ECO, instead of the image assigned to the current post. This may be why it looked fixed when you opened the ECO project. But if you navigate to another project you'll see what I mean.

[Christian Cox]

Okay thanks. It's a strange issue, and I've checked the forums and found a similar report here: https://toolset.com/forums/topic/issue-with-image-custom-field-set-as-beaver-builder-template-row-background/

Our second tier support team indicated this issue is probably on Beaver Builder to fix, since Toolset just passes in a shortcode to their URL field. We suggest reaching out to their support team for more information about this issue, and if collaboration is necessary to solve the problem please let us know here.

[christineK]

Thank you for looking into this.

I ended up finding a workaround. I'm posting it here in case anyone else has this same issue and needs a fix.

I changed the Background Type to "Embed Code" (this is an option in Beaver Builder). I then pasted the Type Shortcode for my image field like this: [types field='header-image' size='full' item='[wpv-post-id]'][/types]

Then to style the image to be full-width and cover my entire row I added some CSS. This is what I used for my site:

.fl-bg-embed-code img {
    max-width: none;
    width: auto;
    height: auto;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

[christineK]

My issue is resolved now. Thank you!