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 2 years, 3 months ago by
David.
-
AuthorPosts
-
September 10, 2020 at 8:56 pm #1438791
Samantha
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 #1438800Elvin
StaffCustomer 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.
A wise man once said:
"Have you cleared your cache?"September 10, 2020 at 9:24 pm #1438811Samantha
Sorry, 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 #1438815Samantha
It 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 #1438839Elvin
StaffCustomer 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/NQurXd0jA wise man once said:
"Have you cleared your cache?"September 10, 2020 at 11:27 pm #1438855Samantha
Thanks 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 #1439179Elvin
StaffCustomer 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.
A wise man once said:
"Have you cleared your cache?"September 11, 2020 at 9:35 pm #1440075Samantha
Oh 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 #1440076Elvin
StaffCustomer SupportNice one. Glad to know that it works for you.
No problem.:)
A wise man once said:
"Have you cleared your cache?"September 11, 2020 at 9:46 pm #1440080Samantha
Much appreciated π
October 16, 2020 at 8:51 am #1492192Jeroen
Almost 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 #1492195David
StaffCustomer SupportHi there,
that code is PHP – this article explains how to add it to your site:
https://docs.generatepress.com/article/adding-php/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 16, 2020 at 12:12 pm #1492465Jeroen
The plugin works perfect! Cheers and enjoy the weeknd
October 17, 2020 at 12:51 am #1492831David
StaffCustomer SupportGlad to hear that
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.