CSS Dynamic Content background image - ACF issues

[bobbyninetoes]

were using ACF url to put an external URL of a image from a CDN, the ACF field is in a Term field for a featured image. We then call that field on the background image of an element

But the issue were having is that whatever image is the last saved will be used on all the pages, essentially duplicating the background image, instead of the url featured image for that term. Weird.

Details on secure note

[prakash_s]

Hello @bobbyninetoes,

Thanks for writing to us.

I went ahead and cloned your section and pulled the background image in the section background image source. I have setup a section called “Themeco test”, at the moment it is been set as hidden you can go to the section —>customize—>Hide During breakpoints and unhide it.

Hope it helps
Thanks

[bobbyninetoes]

I’m sorry, I don’t want it done like this because it creates extra div just for the image - we want the image to be used as a background image THROUGH CSS as my original way. Why is the dynamic content for css not working? you have not solved it, you’ve just given an alternative solution. We want to remove as much div because this contributes to a slow website.

Please resolve the issue of the dynamic content for the CSS. we dont want to avoid problems and find alternative, we want to resolve it.

please see secure note for a screen recording I did to show the issue

[charlie]

We had this working, but it reverted back. I would check your updraft settings as to why this isn’t working. Try passing in the term ID like the below. We updated a couple instances of this in your custom CSS.

background-image: url({{dc:acf:term_field field="featured_banner" type="image" term="{{dc:term:id}}"}});

If you’re concerned about site size. We recommend switching Font Awesome SVG mode as well. Have a great weekend.

[bobbyninetoes]

Hi, I’ve put the css you’ve recommended for every term css - DOESNT WORK

We only tried this feature (dynamic content in CSS) when we opened the ticket so we never had a version that was ever working in the past. Always broken. I’m not sure what you’re talking about Updraft plus - we don’t have a working version in the past. I tried to disable updraft plus too to test if there are plugin conflict - the problem still persists so definitely not an updraft plus issue.

So please sort this asap because this is really frustrating and stopping us from launching our website.

[charlie]

Please use the solution provided by Prakash if it’s urgent. I’ve added it to your site for reference. It doesn’t have this issue, probably since it’s markup and possibly getting past a cast issue. The CSS sometimes work on your site which is the weird thing too. If it’s a bug on our end we’ll need a release and I don’t want to hold you back if you need to launch the site.

[bobbyninetoes]

please try and emulate this bug on your end and record a video please to show that it’s just on our website. Because I have tried several troubleshooting: disabled plugins, clear cache, delete page and create that page again, etc. One thing we couldn’t do is to redo the whole site again. I’ve tried on another testing environment and the bug is there. So I’m positive that this is a bug. exactly what’s causing it, i don’t know.

my question is this: why dont you allow responsive background images in the first place? even if you have a valid reason, why not prioritise it? speed optimization now is essential for a good website, especially for google. and large background images contributes to LCP. anyways…please just sort this dynamic content css issue since you said:

We had this working, but it reverted back.

…so resolve it please.

thank you

[charlie]

When I said reverted I meant on your site. Which is why I brought up updraft. I’ll have time to investigate more next week. I’ll keep you updated. Have a great day

[bobbyninetoes]

please. I would really appreciate the support ad bug fixes that we paid for the theme and the support

[ruenel]

Hey @bobbyninetoes,

@Charlie, our developer, will be investigating the issue and see what can be done to this issue.

Please bear with us. Thanks.

[bobbyninetoes]

Ok, please let me know here as soon as this has been fixed so that I can update our website.

[marc_a]

Hey @bobbyninetoes,

It would also be best to check our update from time to time here.

Thank you.

[bobbyninetoes]

I ALWAYS check there because I’m really waiting for the fix.

[charlie]

We’ll potentially have a solution for this in the release on April 8th. You’ll have to rearrange the custom CSS, but I’ll let you know how to proceed. CSS variables cannot be passed to url() which is a weird CSS quirk and Dynamic Content uses CSS variables internally which is why we have this conundrum.

[bobbyninetoes]

HI, I’m looking forward to how this will work. Please keep me posted. Thanks!

[charlie]

https://theme.co/docs/dynamic-content#formatting See the guide here. You need to remove the url() part and use dynamic in the way that follows. The type='image-css-url is the part you need. Have a great day.

$el {
  background: {{dc:acf:post_field field="featured_image" type="image-css-url"}};
}