[Resolved] featured image for category pages

[Torsten]

Hi,
is it possible to set a featured image, like for pages, for categories?
Thanks ahead,
Torsten

[David]

Hi there,

first thing you would need is something like ACF to create the custom field for your Images in the Category term admin page.
Once thats setup we can look at how to get that custom field value and output it your category archives

Let me know

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Torsten]

Hi David,
I installed ACF and tried my best to set up the custom field for hours now, not showing up anywhere where I would have expected.
I’ve added login details for you in “Private information” below, just in case.
best,
Torsten

[David]

I made some changes to your ACF field.
You should now see it in the Post > Categories at the end of the form.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Torsten]

I tried for both categorie pages (Links in Private information) to set an image, but they aren’t displaying…
tried deactivating autoptimize too, no effect.

[David]

yeah we need to now hook the image in.

1. Create a new Hook Element
2. Add this code to the Hook:

<?php
$queried_object = get_queried_object();
$term_id = $queried_object->term_id;
$image = get_field('category_image', 'category_'.$term_id);
if ($image) {
    echo wp_get_attachment_image( $image, 'large' ); 
}
?>

See here: get_field('category_image', you need to change the category_image to your ACF Field name,

3. Set the Hook to where you want it displayed eg. generate_after_header
4. Check Execute PHP
5. Set the Display Rules > Location to: Post Category Archives > All Categories.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Torsten]

Hi David,
got it, and managed to put the images below the menu/header.
if I could have the images centered and contained, like the header image on the startpage, for the moment they are left-aligned with a few pixel padding below, no padding please.

[David]

Great to see that working.

Change this line:

echo wp_get_attachment_image( $image, 'large' );

to:

echo '<div class="grid-container">' . wp_get_attachment_image( $image, 'large', "", array( "class" => "category-featured-image" ) ) . '</div>';

This will keep the image within the content container width.
And it adds a handy class that we can use to style the image, like this CSS to remove the gap below the image and ( optionally ) force it to 100% width.

.category-featured-image {
    vertical-align: bottom;
    width: 100%;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Torsten]

you’re soooo cool!
😉
thanks a lot!

[David]

🙂 haha – glad to be of help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts