[SOLVED] to conditionally set background color using an ACF Group field color property?

[robertobze]

Hey Folks!

I am working on a real estate website. I am wanting to create property “status labels” that show up dynamically on the design like so:

( I was able to achieve this in Oxygen by duplicating the same text element 5 times and conditionally showing based on an IF TRUE to dynamic field, but this is overkill.

I would like to be able to use ACF Color picker to dynamically pull in the color to the 1 element showing an ACF Dynamic field “property_status_label”.

Currently, I have a group field with the needed fields inside set with a condition to display the color field output based on the selected “property_status_label”. See screenshot of setup below:

I came across this: SOLVED: Dynamic data not working for background-color inside query loop

But I am afraid that my case is a little more complicated due to it being the need to dynamically pull in color based on a color field under a group field.

How would I go about achieving this in Bricks? thanks so much

[robertobze]

ps, here is my ACF setup:

[robertobze]

[Patric]

Hi

did you make the card design in Bricks? if yes, can you show the Bricks structure of the elements that make up your card design?

If not done with Bricks, which program are you using?

Cheers

Patric

[Patric]

Hi

actually, if you make the card design with Bricks, you don’t even need a dynamic color field from ACF.

You can change the color directly with css with the help of the attributes filter from Bricks.

How to do it:

Enter this php code below into a WPCodeBox snippet or into the functions.php file:

add_filter( 'bricks/element/set_root_attributes', function( $attributes, $element ) {
    // Change background color depending on content of acf field property_label_text
    
    if ( $element->name === 'heading' && $element->id === 'udnenk' ) {
        
        if(get_field('property_label_text') == "Hot Deal") {
        $attributes['class'][] = 'background_hotdeal';  
        }
        if(get_field('property_label_text') == "Sold") {
        $attributes['class'][] = 'background_sold';  
        }
        if(get_field('property_label_text') == "New") {
        $attributes['class'][] = 'background_new';  
        }
    }
    
    return $attributes;
}, 10, 2 );

The code above assumes that you use a heading element for your Property Label Text.

Change the Element ID in the code above (udnenk) to the ID of your heading element!

I assume the ACF field with the Property Label Text is “property_label_text” and that the content of this field is either “Hot Deal”, “Sold” or “New”.

Lastly, please add the following CSS to your page and define for each the required background color, for example like this:

.background_hotdeal {
    background-color: green;
}
.background_sold {
    background-color: #ff0000;
}
.background_new {
    background-color: yellow;
}

That should work.

Cheers

Patric

[robertobze]

Hi Patrick,

thanks very much for answering and for offering the data attributes filter.

Here is a screenshot of my property card setup in Bricks:

I will give this a try by modifying the $element and ID and circle back with results.

thanks a bundle!!

[robertobze]

Thank you SO MUCH!!

This is powerful, I wasn’t aware about this feature in Bricks.

Worked perfectly:

saved me from using unnecessary elements + adding unnecessary ACF fields to my database.

[Patric]

Glad to hear that it works.

That‘s why Bricks will soon be the #1 builder… endless possibilities.

Cheers

Patric

[robertobze]

Hi Patric,

is it possible to include other element IDs in the same filter? or do I have to create the filter for each? as I have cards in different parts of the website…

thanks

[Patric]

Hi

Yes, you can do that.

You just have to extend the element check with an OR operator in addition to the already existing && (= AND operator).

Basically, you want to check that the element is a heading element AND the element ID is xxxxxx OR yyyyyy.

Here is a good explanation how to do that in PHP:

https://help.fortinet.com/fadc/4-3-0/html-e/Content/Header_Rewrite/HE_Usingtheandortogether.htm

See the paragraph „Using && and || Operators Together“ for reference.

Cheers

Patric

[robertobze]

Brilliant, thanks so much once more! this worked.

[monia]

Hello Patric,

I’m a new Bricks user and getting dynamic background colors to display has me pulling out my hair. Luckily, your solution looks like the answer to my prayers! Unfortunately, I cannot seem to get it to work. This what I’ve done (using Robertobze field group as a template).

1. Created a Field Group with the Field Type “Select” with the following Field Name “property_label_text”.
2. Using “Code Snippets” plugin, I copy/pasted the php code to run everywhere.
3. Within my single post template, I’ve copy/pasted the css.
4. On the Bricks heading widget, I’ve gone to the style tab and inserted the ID “udnenk”.
5. On the same widget, I’ve created an attribute with the label “Status” and the value dynamically set to the ACF selector field {acf_property_label_text}.
6. Using the inspector tool, I can see the attribute is applied but there is no background image.

Ultimately, I want to add custom colors to my cards (blocks) based on a selection field and I was hoping to understand how this works to achieve it. Thank you for your contribution and any help is much appreciated.

[robertobze]

Hi, it seems you’re overcomplicating things a little…

can you try these steps:

Duplicate the ACF setup - I used group field, not a repeater necessarily.

Add the CSS provided by @Patric in global css, not inside builder.

Add snippet, and using the browser inspect tool, copy the dynamic element ID, without bricks prefix that is added to all elements. Replace the ID given in the snippet above by Patric with the element ID you found by inspecting the page html.

Of course, replace the field name in the snippet provided by Patric above as well.

that should work. Let us know mate.

[monia]

Hello Robertobze,

Thank you for responding. I apologize for the confusion regarding the field type. I just started using ACF today (JetEngine user) and was not familiar with all their field types. Now for the update… It works!!!

I spent the last 2 hours carefully following both your and Patric’s instructions and I could not get it to work. What was throwing me off was the element’s “ID” . Specifically, my widget did not have an id, only a class. Example below:

( <div id=“brxe-5478”> | <div class=“brxe-5478”> )

Before sending you another message I figured I would try and just use the class as a last resort (it worked). I am so grateful to you and Patric for all the help.

Thank you again!

[robertobze]

awesome! glad you got it to work. I was busting my brains too, until @Patric shared this solution. I wasn’t even aware it can work with a class. That’s even easier, currently I am adding || *element ID for everywhere I am displaying these on the site! phew. lol

thanks for sharing

[Patric]

Hi Monia

great that you got it working.

I would however consider changing to the element ID, because if the Bricks developers change something in their output routine (for example they change brxe-xxxx to brx-xxxx) then the code won’t find the element anymore.

You can see the element ID to be used in the code directly from within the Bricks editor after you select the item you want (for example a heading element):

In this example, the element ID would be ftensr. This element ID then has to be entered into this line:

if ( $element->name === 'heading' && $element->id === 'ftensr' ) {

This is much more secure than using the class because Bricks will never change that initial given element ID. Even if you overwrite it with your own ID later.

Cheers

Patric

[monia]

Hello Patric,

Looks like I haven’t logged in a while. I appreciate you writing back and clarifying this point!

I did want to ask (if you don’t mind), if your method is possible with repeater fields? For example, on my post, I’ve created a repeater with two fields (“Dropdown (select)” & “Post Object ID”) in order to help create custom lists that link to a separate post. These posts also include the custom field mentioned in your instruction.

However, the attribute is either not being applied or being applied to the entire repeater. It should be applied for each repeater item but I cannot figure out how to do this. Perhaps this is not possible with repeaters?

[Patric]

Hi Monia

I think it is possible, we just have to identify the right element or structure.

To better understand your situation, can you post here please a print screen of your repeater element structure in Bricks?

Thanks

Patric

[mizzinc]

Patric delivering the goods. Thank you.

Do we need better documentation/examples in the academy, third-party, YT Channel?

[monia]

Hi Patric,

I’ve included a screenshot. A few details: I have renamed “property_label_text” to “rarity_color” and the values “Hot Deal” “Sold” etc. renamed to “1” “2” and so on.

In this screenshot you will see the custom attribute rarity_color with a value of “5”. This was my attempt to resolve the issue by adding the attribute in the builder repeater template with the value coming from an extra repeater field with the same name and values based off your solution. Sadly, the value in the screenshot is from the current post and not the repeater. Renaming the attribute results in the dynamic value coming up blank.