-
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/L1pOP72hyOqv9Are 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.
- You must be logged in to reply to this topic.