Dynamic color based on ACF field value

[beleancristian]

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

It should be able to do this

and this

Thank you.

[Marius]

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.

[Louis]

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}

[beleancristian]

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

[beleancristian]

Well … I was too quick to say I will try that
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.

[Louis]

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!

[beleancristian]

And indeed it worked.
Awesome, thank you.

[beleancristian]

Hi @Louis,

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

Thank you.

[beleancristian]

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

[Louis]

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

[beleancristian]

It worked
Thank you @Louis. Again

[Jonas]

I needed this as well and found a great workaround.

On top of my template I define custom color variables in a code block like this:

<style>
:root {
    --color-theme-post: <?php the_field('acf_color_value'); ?>;
}
</style>

Then you can use the variables as you can use any other variable in the editor.

[qiang814k]

i checked several post about dynamic attribute, but still did not get how to use it.

i have a repeater with color filed, and i want to read the color in frontend,
really need help here. thanks so much in advanced.

[Louis]

Hello @qiang814k,

You’ll want to use a static attribute, with style as the name and a dynamic selector as the value.
In your case, the value will be something like: background:{acfrepeater=colour}

Cheers,

[qiang814k]

thank for prompt reply, and really appreciate your explain about attribute, Louis

above capture: backend setting

above capture: frontend page

it seem the color can not get out here.

Need i send my login info to you by email?

[AnthonyKeller]

Hi, in the attributes, try to replace “background-color” in the name field and put “style” instead?

[qiang814k]

thanks so much, working as perfect i know what attribute mean.