Home › Forums › Support › Advance Custom Field image for my category archive header element background
- This topic has 13 replies, 4 voices, and was last updated 3 years, 5 months ago by David.
-
AuthorPosts
-
September 10, 2020 at 8:56 pm #1438791Samantha
Hi,
I replied to a topic that was exactly what I needed, but the person didn’t share how they got it working.
I was asked to create a new topic for my question. So here goes:
I have a custom field (using ACF) for my custom post type categories and tags for an image. This displays on the back end when I am editing tags and categories.
Is there a way to set up a query for the category archive page to use that image as the background image for my header element?
I tried the following (from another topic):
add_filter( 'generate_page_hero_background_image_url', function( $url ) { $background_image = get_field( 'taxonomy_field_name' ); if ( $background_image ) { $url = $background_image; } return $url; } );
My Custom Field name is:
category_featured_image
Just canβt get it to show in Generatepress header even though I have done it successfully using a similar process for single pages on the same site.
The ACF page shared in the other topic was:
https://www.advancedcustomfields.com/resources/adding-fields-taxonomy-term/Honestly, I use ACF, but unfortunately I am not a programmer, so the ACF instructions are like another language to me.
I would really appreciate some help on this.
Thanks in advance,
SamSeptember 10, 2020 at 9:07 pm #1438800ElvinStaffCustomer SupportHi Sam,
As Tom specified here – https://generatepress.com/forums/topic/advance-custom-field-from-category-for-my-category-archive-header-background/#post-884844
When you added the code, did you place your custom field name,
category_featured_image
,in place of the ‘taxonomy_field_name’ onget_field( 'taxonomy_field_name' );
?Your filter code should look something like this for the filter to work using your field name:
add_filter( 'generate_page_hero_background_image_url', function( $url ) { $background_image = get_field( 'category_featured_image' ); if ( $background_image ) { $url = $background_image; } return $url; } );
You can try this code and see if it works for you.
September 10, 2020 at 9:24 pm #1438811SamanthaSorry, I didn’t specify before, but yes – I used exactly that code and it doesn’t show the correct image.
September 10, 2020 at 9:26 pm #1438815SamanthaIt is an “image” type in ACF settings if that helps.
https://share.getcloudapp.com/lluYlzz9
Not sure if there is something else that needs to go in the code because it is an archive page maybe?
September 10, 2020 at 10:36 pm #1438839ElvinStaffCustomer SupportI was actually able to make the exact same code work my test site.
You may have to change the return format of your image field. Return format has to be set to Image URL.
This code is intended for the Header Element or .page-hero section’s background image.
This is the expected output:
https://share.getcloudapp.com/NQurXd0jSeptember 10, 2020 at 11:27 pm #1438855SamanthaThanks for your response.
I did change the “return format” to url. I didn’t have that set right it seems.
However, I have managed to get it working on a PAGE, but I cannot get it to work for the ARCHIVE page – that is my issue.
Is there some extra code to get it working on an archive page?
You can see I have the image in the “Edit Stone Tag” screen https://share.getcloudapp.com/nOukOW56, however it shows a completely different image in the header element https://share.getcloudapp.com/WnuJnAqE (it’s defaulting to the “fallback image” set in the header element).
These are my settings for the header element:
https://share.getcloudapp.com/ApukdyXG
https://share.getcloudapp.com/OAuqyx4ePlease let me know if there is any other information which will help us get to the bottom of how to get it displaying.
Thanks again in advance. I really appreciate your help on this. π
Sam
September 11, 2020 at 5:15 am #1439179ElvinStaffCustomer SupportYou can try this code:
function get_acf_category_featured_image( $url ) { $term = get_queried_object(); $background_image = get_field('category_featured_image', $term); if ( $background_image ) { $url = $background_image; } return $url; } add_action('wp', function(){ if(is_archive()){ add_filter( 'generate_page_hero_background_image_url', 'get_acf_category_featured_image' ); } });
This code checks if the page is an archive page and uses the image from the custom field if it is an archive page. Else, it will let the page use the default featured image used by the page.
I’ve tested this on my end to make sure it works and won’t cause any crashes. π
Let us know if this works for you.
September 11, 2020 at 9:35 pm #1440075SamanthaOh my goodness!! Thank you so much Elvin!!
It’s showing the correct photo:
https://share.getcloudapp.com/z8uZ2EeoThis works perfectly. I so appreciate your help.
Fantastic support, thank you π
September 11, 2020 at 9:43 pm #1440076ElvinStaffCustomer SupportNice one. Glad to know that it works for you.
No problem.:)
September 11, 2020 at 9:46 pm #1440080SamanthaMuch appreciated π
October 16, 2020 at 8:51 am #1492192JeroenAlmost there (i hope) Could you just let me know where the code (function get_acf_category_featured_image……etc) Should be placed?
October 16, 2020 at 8:53 am #1492195DavidStaffCustomer SupportHi there,
that code is PHP – this article explains how to add it to your site:
October 16, 2020 at 12:12 pm #1492465JeroenThe plugin works perfect! Cheers and enjoy the weeknd
October 17, 2020 at 12:51 am #1492831DavidStaffCustomer SupportGlad to hear that
-
AuthorPosts
- You must be logged in to reply to this topic.