Follow up - Issues with CSS dynamic background happening again

Support
#1

Hi,

Regarding this ticket: Issues with CSS dynamic background happening again

We have tested on incognito and various browsers and we were able to login using the password in the secure note. there is a captcha, please wait for the captcha to load properly.

im not sure if the issue with the css dynamic background has been fixed yet.

#2

Hi @bobbyninetoes,

In the last release, we have fixed a few of the issues with the ACF image array and the background image. I would suggest you check if that resolves your problem or not. If not, please let us know where you are facing this issue for further assistance.

Thanks

#4

still doesn’t work - it doesnt load the right image (url) for each training type. it works for 1 training page, but it would use that same image for the other training type pages. strange. we have reverted back to harcoded background css url for now as this still doesnt work.

#5

Hello @bobbyninetoes,

I am another staff checking in. I have tested adding {{dc:acf:term_field field="featured_banner"}} in the background image and also used an Image element with the same dynamic content. With the Image element, the correct image displays. Using the background image and/or with custom element CSS, it is not working. It may have something to do with caching. Do you still have the staging area so that we can test this theory? Please send it again so I can continue testing with your site.

This is just my take for an alternative setup, instead of using a custom inline element CSS or with the background image. you may use a DIV element and Image element as your background layer. The image is readab;e and can also have ALT text compared to just used as backgrounds. This method may also add SEO value especially if the image is related to the page.

Best Regards.

#6

Hi Ruenel,

Please can you elaborate your alternative setup on the second paragraph? How do we do this? It seems its adding more DOM elements (a Div AND and image elements) just to make this work. And you said it “may” add SEO value. We cannot have probabilities with SEO as it’s very important to us. We can only accept alternatives if they will DEFINITELY follow SEO standards and benefit the website. So please elaborate on this. Because, either way, this is a bug that needs to be fixed because it is suppose to work in the css, correct?

#7

Hey @bobbyninetoes,

The bug should have been fixed with the latest version of the Pro theme. The ACF Dynamic Content works in the custom element CSS, already based on my test on the layout.

.rue-test {
  background:{{dc:acf:term_field field="featured_banner" type="image-css-url"}} no-repeat #0000FF;
  background-size: cover;
}

If you use the images for decorative purposes, then using them as a background image is enough. Wanting to add SEO value to the image, it must be related to your content, like product photos, infographics, or aiming to appear in Google Image searches.

Hope this helps.

#8

we have tried this code:
{{dc:acf:term_field field="featured_banner" type="image-css-url"}}

we’ve also removed litespeed cache, cleared cache in the hosting

unfortunately they still doesnt work. We are creating a staging site now for you to check (ill edit this this message with a secure note of the login for the staging site once it’s created)

#9

Hello @bobbyninetoes,

Would you mind sharing the exact page URL so we can check it on our end? I have checked on some of your taxonomy pages, and it is working.

Hope it helps
Thanks

#10

image
image484×589 88.1 KB

all of those pages - all using the Archive Layout template as show below. you can also see on the screenshot below - the dynamic content are commented out because they are not working. i’m just using the hardcoded background url.

image
image1913×720 422 KB

#11

Hi @bobbyninetoes,

I tested this and found that when setting it through inline CSS, the code worked in the Page Builder but not on the frontend. For example, I added the following code inside a Text element, and it displayed a grey placeholder SVG image:

<div style="background-image: {{dc:acf:term_field field='featured_banner' type='image-css-url'}};">
    Testing content inside
</div>

I also tried adding the same code using Element CSS and Page CSS, but it didn’t work as expected. I’ll check with our development team on this and get back to you with an update.

Thanks

#12

I guess we are not going crazy to say that it’s still not working. Please let us know when it is actually fixed.

Thank you for the support!

#13

Hey @bobbyninetoes,

I want to give an update that the ACF {{dc:acf:term_field field='featured_banner' type='image-css-url'}} still displays the very first Term archive image. When you go to the other Term archive pages, the background image of the archive page will still display the image of the first Term archive page that you have viewed. This could be because of the CSS or browser caching, where it cached the CSS. Our developers are still investigating the issue.

Meanwhile, I have created a demo section on your layout, especially the one that uses the Image element as the background of the Section. Please check out the links in the secure note below.

Thanks.

#14

thanks for the reply - we will wait for the actual fix, the way it should work. We hope it get sorted out soon 100%
thank you

#15

Thank you for your patience, @bobbyninetoes.

#16

as soon as the fix is resolved - please let us know as we need to have dynamic content sorted on the css. its not just affecting images, but any dynamic content on the css (even colours). it’s very frustrating

#18

Hey @bobbyninetoes,

Please stay tuned for updates as bug fixes are released during updates.

Thank you.

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.