Adding H1 Headline and Featured Image to the archive template.

Hi Dan,

Can you specify what part isn't working?

There are few parts to check.

- does the actual featured image field appear on the category creation page?
- is the PHP snippet to assign the image from the ACF field as featured image properly added to the site?
- is there actually an image added to the image field on the category creation page?
- on the PHP snippet, is the ACF field slug correct?
- Since the procedure was for a Header Element, is the page in question using a Header element? (it won't work on Block element hero)

If you can provide us temporary backend access, we can help you check things out. You can use the private information text field for this.

Hey Elvin, I had the snippet added and nothing was showing on the category page when loaded. I had an image and text added as well.
I think I had the correct snippet loaded into PHP.
I added this code to the functions.php.
"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' );
}
});"

Nothing showed on the page. I have since removed it though. Am I missing something? I did rename the field to match what I had in ACF as well.
I am sure I am missing something on this, ACF is cool but way beyond my brain at the moment.
Thanks
Dan

Did you have an activated Header element with the background set to "Featured Image" and proper display rule location when you added the code? That's quite important. Else, nothing will show up.

Here's how to go by this:

First, setup ACF - https://share.getcloudapp.com/6qur4kWX (mind the output, use ID or URL)

Second, Add this snippet - https://share.getcloudapp.com/BluK6JJd (I use code snippets but functions.php works the same)

Third, Make sure you add a category featured image - https://share.getcloudapp.com/5zuYl770

Fourth, Setup your Header Element:
Display rule location - https://share.getcloudapp.com/12u4Z5OK
Setup - https://share.getcloudapp.com/2NuqZx2Q

A sample output - https://share.getcloudapp.com/12u4Z5EQ

That's pretty much it. :D

Hey, I was digging into this a little deeper and still couldn't get the featured image to work so I am going to shelve it for the moment. I also did notice that the Archive page already has an H1 title on it. So there is no need for me to replicate that, I was told it was not an H1 but never really checked. So for now I am going to shelve the ticket until I have some more time to test this a but more.
Thank You

No problem. Feel free to reopen this if you want to tackle it again. :D

Hey Elvin, coming back to this finally. I set everything up as it should be and it matches your settings from what I can see.
I am still not getting anything to populate on the category page. Here is a page it is active on. https://adventuresofmel.com/category/4th-of-july/
Let me know your thoughts.
Thanks

Hi there,

if you're using ACF, and the Custom Fields are saved against the Terms meta, then you should be able to use the Dynamic Content options in the Block Element:

https://docs.generatepress.com/article/block-element-overview/

And heres the Dynamic Data options:

https://docs.generatepress.com/article/dynamic-data/

A GenerateBlocks Container can be give a Background Image ( requried ) then in the Container Blocks Toolbar Dynamic Options you can set a Dynamic Background Image > Term Meta in the Term Meta Field add your ACF name. I find it works well if you set the ACF Image Field to store the image ID.

Thank You, David, that dynamic function is great. I got the image to display correctly now but I need to get it centered and larger. I have the div set to full width as well as a full-size image. Any ideas as to how to make it display correctly?
Thanks

Are you going to add any content over the image ? Or do you just want the image to be displayed ?
If its the latter then we might want to try a different method.

Hey David, actually the image is not supposed to show at all on the site, it's just meant to be listed in the HTML of the site so when Google crawls it a featured image will show in search results or on social. So now I am at the point of figuring that part out. Any ideas on how to add the meta-information to the image? Would that be done in ACF or the actual block I created in elements?
Thanks

In that case you just need a PHP snippet to like this:

add_action('wp_head', 'acf_featured_image_meta');

function acf_featured_image_meta() {
    if ( is_archive() ) {
        $term = get_queried_object();
        $image = get_field('image', $term);
        echo '<meta property="og:image" content="' . $image . '" />';
    }
}

This will get the ACF Field named image on the current term, and then output the OG meta for FB sharing in the head of the site.

You can echo whatever other meta tags you need using the same method.

Ah, so I would just add that PHP snippet to the category page using an element hook then? Or would this be added to the functions.php file?

You can add that to your functions.php in your child theme.
If you wanted to use a Hook Element instead then you only need this code in the Hook:

<?php
$term = get_queried_object();
$image = get_field('image', $term);
echo '<meta property="og:image" content="' . $image . '" />';
?>

Set the Hook to wp_head and check: Excute PHP option, and set the Display Rules to the Category Archive.