Advance Custom Field image for my category archive header element background

[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,
Sam

[Elvin]

Hi 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’ on get_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?"

[Samantha]

Sorry, I didn’t specify before, but yes – I used exactly that code and it doesn’t show the correct image.

[Samantha]

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?

[Elvin]

I 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/NQurXd0j

A wise man once said:
"Have you cleared your cache?"

[Samantha]

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/OAuqyx4e

Please 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

[Elvin]

You 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?"

[Samantha]

Oh my goodness!! Thank you so much Elvin!!

It’s showing the correct photo:
https://share.getcloudapp.com/z8uZ2Eeo

This works perfectly. I so appreciate your help.

Fantastic support, thank you 🙂

[Elvin]

Nice one. Glad to know that it works for you.

No problem.:)

A wise man once said:
"Have you cleared your cache?"

[Samantha]

Much appreciated 🙂

[J]

Almost there (i hope) Could you just let me know where the code (function get_acf_category_featured_image……etc) Should be placed?

[David]

Hi 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/

[J]

The plugin works perfect! Cheers and enjoy the weeknd

[David]

Glad to hear that

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts