[Support request] Advance Custom Field image for my category archive header element background

Home Forums Support Advance Custom Field image for my category archive header element background

  • This topic has 9 replies, 2 voices, and was last updated 2 weeks ago by Samantha.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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,
    Sam

    #1438800
    Elvin
    Customer Support

    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.

    #1438811
    Samantha

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

    #1438815
    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?

    #1438839
    Elvin
    Customer Support

    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.
    return format

    This code is intended for the Header Element or .page-hero section’s background image.

    Page header

    This is the expected output:
    https://share.getcloudapp.com/NQurXd0j

    #1438855
    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

    #1439179
    Elvin
    Customer Support

    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.

    #1440075
    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 πŸ™‚

    #1440076
    Elvin
    Customer Support

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

    No problem.:)

    #1440080
    Samantha

    Much appreciated πŸ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.