Dynamic color based on ACF field value

Hi.

I would like to have the possibility to select the color fields values from dynamic data.
An option would be like in Oxygen or Bricks, where in custom attributes, when selecting the dynamic value to be able to input an appending text. For example, attribute field name “style” and then value selecting the ACF field with the color picker AND input an appending text like “color:” or “background-color:” which will fill the appropriate data while rendering in the front end.
This is how it is now.


and this is how it’s rendered now on the front end
22222

It should be able to do this
33333333
and this
44444

Thank you.

1 Like

This has been requested a long time ago.
Couldn’t find the topic here, maybe it hasn’t been moved to this forum.

I’m pretty sure I had the exact same use case @beleancristian.
But of course, there are so many other areas which could benefit from it.

Definitely needed.
Thanks for putting it back on the map.

1 Like

Hi @beleancristian,

Indeed, this is something we have on our internal roadmap.

As a side note, you can already do so with the following as a static input (works with most dynamic data):
background:{acffield=yourfieldslughere}

3 Likes

Oh, wow … that’s awesome info. I’ll definitely try that.
Thank you.

1 Like

Well … I was too quick to say I will try that :smiling_face:
Where do I input the above code as static input? Tried directly in the text color field, css section of the block and can’t figure that out.
Thank you.

That would be in the attribute style, just like you wanted to do but with static data.

Colour fields and custom css won’t be able to take that info since they’re added to the stylesheet, but variables in the style attribute will do!

And indeed it worked.
Awesome, thank you.

Hi @Louis,

Is it possible to get these ACF values from fields inside a group?

Thank you.

Bumping this up for a possible response on the above.
Thank you :slight_smile:

Hi @beleancristian,

If I’m not mistaken, you simply need to add group_ before the field slug, so:
{acffield=group_yourfieldslughere}

Let me know if that helps :wink:

1 Like

It worked :slight_smile:
Thank you @Louis. Again :slight_smile:

1 Like