Hi, I have an ACF variable set for pages where the user selects a color. Each available color has a corresponding logo so I’ve set um my function where dependent on the color a logo from a global ACF options-page is selected.
The function returns the image array but I just can’t figure out how to display the image.
I’ve tried the :array_value|{KEY} modifier but it’s just not working.
My setup is:
Logo Element calling a PHP function with {echo:custom_header_logo:array_value|id}
The function looks basically like this:
function custom_header_logo(){
$color = get_field('color'); // get pagecolor field
$the_logo = 'logo_' . $color; // set name for logo
$logo = get_field($the_logo, 'option'); // retrieve the logo set on the options page
return $logo; // return the array
}
I’ve tried different keys for the modifier but none of them work.
Does anybody know how to achieve what I want or is there a simpler way with conditionals in bricks?
Thanks, Stefan
Have you tried just dumping the whole $logo (the array) and seeing what it returns? It might give you a clue about how to access it. Also make sure the code is signed.
Try this:
function custom_header_logo(): string {
$color = get_field( 'color' ); // get pagecolor field
$logo = get_field( 'logo_' . $color, 'option' ); // retrieve the logo set on the options page
return esc_url( $logo['url'] ); // return the image URL
}
Thanks for your suggestion.
When I dump the function in the content area output looks good:
array(24) { ["ID"]=> int(37) ["id"]=> int(37) ["title"]=> string(13) "LOGO" ["filename"]=> string(16) "logo.svg" ["filesize"]=> int(3121) ["url"]=> string(69) "http://testpage.local/wp-content/uploads/2024/06/logo.svg" ["link"]=> string(39) "http://testpage.local/logo/" ["alt"]=> string(13) "LOGO" ["author"]=> string(1) "1" ["description"]=> string(18) "LOGO Logo" ["caption"]=> string(0) "" ["name"]=> string(12) "logo" ["status"]=> string(7) "inherit" ["uploaded_to"]=> int(0) ["date"]=> string(19) "2024-06-10 15:20:02" ["modified"]=> string(19) "2024-06-18 11:38:41" ["menu_order"]=> int(0) ["mime_type"]=> string(13) "image/svg+xml" ["type"]=> string(5) "image" ["subtype"]=> string(7) "svg+xml" ["icon"]=> string(62) "http://testpage.local/wp-includes/images/media/default.png" ["width"]=> bool(false) ["height"]=> bool(false) ["sizes"]=> array(18) { ["thumbnail"]=> string(69) "http://testpage.local/wp-content/uploads/2024/06/logo.svg" ["thumbnail-width"]=> bool(false) ["thumbnail-height"]=> bool(false) ["medium"]=> string(69) "http://testpage.local/wp-content/uploads/2024/06/logo.svg" ["medium-width"]=> bool(false) ["medium-height"]=> bool(false) ["medium_large"]=> string(69) "http://testpage.local/wp-content/uploads/2024/06/logo.svg" ["medium_large-width"]=> bool(false) ["medium_large-height"]=> bool(false) ["large"]=> string(69) "http://testpage.local/wp-content/uploads/2024/06/logo.svg" ["large-width"]=> bool(false) ["large-height"]=> bool(false) ["1536x1536"]=> string(69) "http://testpage.local/wp-content/uploads/2024/06/logo.svg" ["1536x1536-width"]=> bool(false) ["1536x1536-height"]=> bool(false) ["2048x2048"]=> string(69) "http://testpage.local/wp-content/uploads/2024/06/logo.svg" ["2048x2048-width"]=> bool(false) ["2048x2048-height"]=> bool(false) } }
Code is also signed, I’m using other php functions elsewhere and they work as expected.
After playing around with Sridhars suggestion I found out that I have to explicitly return the ID to make it work because the array_value modifier doesn’t seem to work.
Hi Sridhar,
thanks for your suggestion. I played around with it a bit and it seems to work when I explicitly return the “ID”.
Strangely the array_value modifier doesn’t work but I would need title, alt-text, etc. as well.
Like I mentioned in my other reply - the returned array looks good so this should work.
I re-created your setup in my dev site and got it working.
There is no need to set the image fields’ type to Image ID. Leave it as Image Array.
For the Image element, paste this in the external URL control:
{echo:custom_header_logo:array_value|url}
Hi @stefan42 ,
As per @Sridhar reply, the array_value|url is working good.
I set it locally and I can choose whichever array value I want without issue.
I’ve tried the :array_value|{KEY} modifier but it’s just not working.
What is your output in the frontend? empty?
Are you using this function on the Image element? If it’s image element, please ensure you are returning the image ID in array.
Regards,Jenn
I tried that and IIRC the image wasn’t being output. It could be because the expected input is an integer but as far as I know the dynamic data tag is returning and passing a string.
What did work is using External URL control for the Image element instead of Dynamic Data and pasting in the dynamic data tag for url key.
If placed on the Dynamic data field, Bricks expected the image ID in array format.
Need to change like this.
Cannot use array_value|id in this case as Bricks will not convert the id to array again.
1 Like
hi @all,
thanks for your input. I got it to work with by returning the image id from my function and it’s ok for now because alt and title tags are basically the same between logos.
What still doesn’t work is the array_value modifier so I could get other data if needed. But thats nothing I can play around with right so I’ll have to come back to this at a later stage.
Thanks again for the support!
Stefan
