SOLVED: ACF Flexible Content - Background color issue

[KeviinCosmos]

Bricks Version: 1.6.2

When using ACF color field and try to apply it to a block it will add that color to all blocks with same name.
Background image works fine
Image: https://go.seee.link/fBqweoPrMJ.png

Explained and showed here

[aslotta]

I can confirm that issue. In my case I have two different layouts (hero and services). Both layouts have an ACF color field (called background_color). Although I set up different colors for instances of the different layouts and Bricks uses different dynamic data tags to fetch the color ({acf_flexible_content_hero_background_color} vs. {acf_flexible_content_services_background_color}) it is always the first color that is grabbed for all instances of all layouts.

Backend

Frontend

[Patric]

Hi

this is a known issue.

However, Timmse has shown a solution until the issue is addressed properly. It is already on the To-Do list according to Timmse.

His solution:

SOLVED: Dynamic data not working for background-color inside query loop

Bricks Version: 1.5.1 RC Browser: Chrome 104 OS: Windows / Linux URL: https://isa.b32.be/ I have setup a query loop which work very well with ACF dynamic data except for one field, it’s the background color, bricks only take into considération the background color of the first post and apply the same color to the other posts: Here we can see that I have use the same string for the title and the background-color of the post, first post has a background-color set at: var(–primary-trans-40), …

I use his solution and it works. See also this:

DUPLICATE: Dynamic color from Custom Post Type Meta

Bricks Version : 1.6.1 Browser : Google Chrome 108.0.5359.94 OS : Windows 11 Create a Custom Post Type (using JetEngine) with a color picker meta field First post’s color: [image] Second post’s color: [image] Create a Loop to display each CPT Use an Icon element and asign the color dynamicaly from the CPT metafield of the color picker. [image] The loop will display each icon with the color of the first CPT post. So theoricaly it works, but it is stuck to the first post’s col…

Cheers

Patric

[grafikundso]

hopefully we will see a fix soon. thanks

[timmse]

Hi guys,
Thanks so much for your reports!

I repeat what I said in the other thread: if you apply styling within a loop (it doesn’t matter if it’s a flexible content loop or a regular loop), this styling is repeated for each element, because the CSS is generated only once (on a class) - and not for each loop entry.

To make this possible, each loop entry would have to have its own class + its own CSS, which would possibly be repeated x times - I don’t think anyone wants that, do you?

Accordingly, inline styles are the best and most effective solution from my point of view. I am open to alternative solutions if someone has an idea

@Patric It looks like I mixed/mashed up Paus and Yesids reports, which are basically completely different (but both using Jetengine). Paus is about the same as this report, whereas Yesids Report is about missing styles (which is still on the todo list).

Best regards,
timmse

[Patric]

Hi Timmse

I can live with your inline solution.

Cheers

Patric

[maxnik31978]

Hi guys!

I recently ran into a similar problem.

A task:
It was necessary to make the background of the category header of each displayed post with its own color in the post cycle. At the same time, the same problem arose. The background of the category header was displayed in one color, or rather the color of the category header of the last post.

Decision:
Replace the ACF field type for the category header background. That is, not the choice of color, but the choice of the image. As an image, you can use a small square (40px * 40px) of the desired color.

[Patric]

Hi guys

now with Bricks v1.8 we can use dynamic colors from ACF etc…

Cheers

Patric

[itchycode]

Thanks @Patric ,

Yup, just to inform you guys that dynamic data for styles inside query loop is supported in v1.8 now.

Changelog

[Patric]

Hi Jenn

unfortunately, it seems that the the standard Bricks infinite scroll event is somehow killing in v1.8.2 the dynamic (background) colors & dynamic background images. This worked perfectly in v1.8.1.

On my home page, only the first items in the query loop BEFORE the first infinite scroll event get the correct dynamic background color from the ACF field, after the first infinite scroll event, the dynamic color is not showing anymore (i.e. instead of red, the background remains white, that’s why the white icon and white text are not visible and the block looks empty).

Here is a screen shot of the last row before the first infinite scroll and the first row after the first infinite scroll:

Furthermore, I have a dynamic background image that is shown when hovering on the item’s image. This now also works only on the first 8 items, after the first infinite scroll event, the dynamic background image stays empty:

The first 8 items before the infinite scroll event with the dynamic background image loaded correctly:

The first items after the infinite scroll event where the dynamic background image is now missing:

You can check out everything yourself here:

Link removed

The first 8 items before the infinite scroll event are correct, the next not anymore unfortunately.

Here is the ACF field, nothing was changed from 1.8.1 to 1.8.2:

and here is the background color setting of the item in the query loop with the ACF field filled, nothing was changed from 1.8.1 to 1.8.2:

And the query setting with the infinite scroll, nothing was changed from 1.8.1 to 1.8.2:

The dynamic background image settings:

I hope you can find out what went wrong with 1.8.2 in this regard.

Thanks for your help

Patric

[itchycode]

Hi @Patric ,

Thanks for reporting the issue.
I can replicate it. It will be fixed soon
Sorry about that.

Regards,
Jenn

[Patric]

Hi Jenn

I can confirm that v1.8.3 has solved my issues with the infinite scroll.

All is good now.

Thanks for everything and best regards

Patric