Advance Custom Field image for my category archive header element background

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.

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

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?

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

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

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.

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 :)

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

No problem.:)

Much appreciated :)

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

Hi there,

that code is PHP - this article explains how to add it to your site:

https://docs.generatepress.com/article/adding-php/

The plugin works perfect! Cheers and enjoy the weeknd

Glad to hear that