Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Set Featured Image for Archive pages using ACF Options

  • I am looking to setup a way to assign a Featured Image to each of my Custom Post Type’s Archive template/page when using a generic Page Hero element for those archive pages. Right now the image being pulled is from the Feature Image of the latest post to the CPT.

    I’ve set up an ACF options page to assign a custom featured image field to each CPT but I cant figure out the code so the page hero element pulls in that image instead

    thanks for your help

  • Hi there,

    GB’s image block does not have an option to output term meta, custom PHP code is required to alter the output.

    Try follow below instructions:

    1. Add a CSS class to the GB image block, eg. term-image.
    Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

    2. Add this PHP code, and change term_image to the actual ACF field name.

    //category/tag archive term image
    add_filter( 'render_block', function( $block_content, $block ) {
        if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'term-image' ) !== false ) {
    		$term = get_queried_object();
                    $image = get_term_meta($term->term_id, 'term_image', true);
                    $size = 'large';
    if( $image ) {
        $block_content = wp_get_attachment_image( $image, $size );
    }
        }
    
        return $block_content;
    }, 10, 2 );

    Let me know if this helps!

  • Thanks Ying. sorry for the late reply

    The page hero element is a container with a background image (duplicating the theme page hero for main pages) and headline for the page title within the container- will this code work if i put the class on the container block?

  • So it’s a background image, not image block.

    I assume you are in GP element’s environment, if so, you do not need the code, you can dynamically set the background image to be term meta.

    Here’s a screenshot for your reference:
    https://app.screencast.com/KjSUxThd9kTtf

  • ah okay! that is much simpler – unfortunately I can’t seem to get it working – it’s not pulling in the ACF image field “team_featured_image”. It’s blank if i don’t check the fallback image or uses the fallback image if on, but not the wanted ACF image 🙁

    Heres’ my current Archive Page Hero setup: https://capture.dropbox.com/GeLB0UnMRUeMO53M

  • Does the image field return the image URL value? If not, set it to URL.

  • ah! I was hoping it was that simple! uf after changing the ACF image field to return the URL value, still no luck 🫤

    seems weird unless i am misunderstanding the meta term behavior

    here is the generated code – obv the URL is blank, but does work with the fallback image 🤷‍♂️

    .gb-container-6508c824::before {
      content: "";
      background-image: url();
      background-repeat: no-repeat;
      background-position: center center;
  • Can you provide an admin login so I can check the backend setup? And please link me to related term archives.

  • it’s the CPT Team and cpt Team archive page applying the element “Team Page Hero” to the archive page

    thanks!

  • The background images are showing when I check:
    https://app.screencast.com/L1pOP72hyOqv9

    Are those images correct?

    Let me know 🙂

  • Hi Ying – yes those work as expected. It’s the Page Hero with the page title at the top that should be referencing the ACF image field “team_featured_image” for the background image in the hero which is set in the ACF Options page attached to the TEAM custom post type

    page hero: https://capture.dropbox.com/AiAXCSnHbGQBrm6O
    acf image field: https://capture.dropbox.com/U2P3NiRpYEJHIXS0

  • Hi there,

    You store the team_featured_image in the Options page, but unfortunately, GP and GB do not currently support the ACF Options page.

  • ah well that explains it. Any work arounds or do I just have to make individual archive Page Hero Elements for each CPT?

  • Yes, you can do that, or use CSS with just one page hero.

    1. add a CSS class to the root container of the page hero, eg. my-page-hero.

    2. write your CSS:

    .post-type-archive.post-type-archive-team .my-page-hero:before {
        background-image: url('your-tem-archive-featured-image-URL');
    }

    You can keep on adding CSS for different post type archives, just need to replace team with other post-type slugs.

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