NO BUG: Dynamic color not working with Icon element

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

It appears that the dynamic color (via ACF color picker) does not apply to the icon element. Manually adding color works just fine. When using dynamic, looking at markup reflects the element does not receive the color or fill properties. Manually adding the color, it works so those properties appear.

Hopefully images are clear enough to express the problem.




Hi Altitude,
Welcome to the forum!

Can you please show how you set up the ACF fields?
My assumption: Youā€™re using a repeater for the list items, but the ACF color is outside the repeater, right? If so, you canā€™t get the color field value inside the repeater.

There are two ways to work around:

  1. Add the acf color to the whole list (Typography Ā» color), and change the text color accordingly.
  2. Use the ACF get_field function to retrieve the value. Make sure to add the get_field function to the allowed function names and add this to the raw color field of your icon: {echo:get_field(ā€˜acf_colorā€™)} (change the field name accordingly).

Best regards,
timmse

1 Like

Thanks, timmse. I couldnā€™t figure out the function thing, but applying the color to the whole list was a route to go. I appreciate it!

1 Like

Since you had brought it up and itā€™s related to this issue, on #2, Iā€™ve been banging my head trying to get it to work, and nothing happens. Could you clarify what I might be doing wrong? I looked at your links and all that with the documentation. I added the filter in functions file, I added the ACF function (get_field) to the return in the functions file, and I added the {echo:xxxx} (note, Iā€™ve tried get_sub_field and get_field) to the RAW field of the color. Nothing is happening. No background-color property is being rendered at any point. Here are two images show the implementation:

https://madebyaltitude.com/support/functions-code.png

https://madebyaltitude.com/support/raw-code.png

I appreciate it!

Is there any ā€œstyleā€ set on the button? If so, set it to none.
Also, you can add the echo dynamic data tag to a basic text element to test if thereā€™s any output.

Hey, sorry for the delay in response. I tested a basic text element on the same loop level of the button and it took the color applied by {echo:get_field(ā€˜acf_modules_hero_module_hero_secondary_colorā€™)} in the RAW field. I also verified the style on the button is set to none. Interestingly, I have the dynamic RAW output applied to typography color of the grandparent wrapper (named buttons in picture) to all these elements, and when I added an ICON element, it automatically inherited the selected color dynamically set in RAW of the grandparentā€™s typography color. Perhaps there is something funky going on with the button element after all?

Hereā€™s an image. Whatā€™s being shown is the text and icon are inheriting the green, and the button text is black and unstyled, despite the RAW being applied directly to it (background or text color, neither is working).

(https://madebyaltitude.com/support/dynamic-color-parent.png)

The image isnā€™t accessible :frowning:
Can you share a live link to the website so I can see the issue, please?

Itā€™s a local project, so I will need to DM you information to access.

Thanks for the login data!

Summary: You are using an ACF flexible content field that contains two color picker fields and a repeater. You want to use the two color picker fields within your repeater - but they are defined outside the repeater, namely in the flexible content.

This is basically exactly what I suspected at the beginning, but I didnā€™t know that you were using flexible content, so you canā€™t get any further with get_field or get_sub_field alone, see: ACF | Flexible Content

The function to retrieve fields (in your case, colors) from the flexible content looks something like this:

// Get Flexible Content Colors in Repeater
function flexColors() {
  if( have_rows('modules') ):

    // Loop through rows.
    while ( have_rows('modules') ) : the_row();

        // Case: Hero Module
        if( get_row_layout() == 'hero_module' ):
	
            $primary = get_sub_field('hero_primary_color');
            $secondary = get_sub_field('hero_secondary_color');

		endif;
    // End loop.

    endwhile;

    // Return the colors
    return array($primary, $secondary);
	
  // No value.
  else :
    // Do nothing...
  endif;
}

To output the primary color, use {echo:flexColors:array_value|0} and for the secondary color {echo:flexColors:array_value|1}.

1 Like

try to check the code or settings related to the ACF field to ensure itā€™s correctly targeting the icon element

Thanks - I guess Iā€™m confused why those fields are working on some elements and not others, which arenā€™t in a repeater. Like why isnā€™t the dynamic working on the divider, why does it work on the text link color but not the background of it, etc.