Topic: Set Featured Image for Archive pages using ACF Options

[email protected]
August 29, 2024 at 10:41 am

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

Ying

August 29, 2024 at 2:45 pm

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!

[email protected]
September 20, 2024 at 8:48 am

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?
Ying
September 20, 2024 at 9:57 am

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
[email protected]
September 25, 2024 at 6:41 am

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
Ying
September 25, 2024 at 9:18 am

Does the image field return the image URL value? If not, set it to URL.
[email protected]
September 25, 2024 at 12:36 pm
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;
```
Ying
September 25, 2024 at 5:08 pm

Can you provide an admin login so I can check the backend setup? And please link me to related term archives.
[email protected]
September 30, 2024 at 10:24 am

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

thanks!
Ying
September 30, 2024 at 10:54 am

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

Are those images correct?

Let me know 🙂
[email protected]
September 30, 2024 at 4:36 pm

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
Alvind
September 30, 2024 at 8:44 pm

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.
[email protected]
October 1, 2024 at 7:59 am

ah well that explains it. Any work arounds or do I just have to make individual archive Page Hero Elements for each CPT?
Ying
October 1, 2024 at 9:42 am
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.
[email protected]
October 17, 2024 at 7:05 am

thanks!
Ying
October 17, 2024 at 9:03 am

No Problem 🙂

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Set Featured Image for Archive pages using ACF Options