Archived topic
Category Images In Hero Header
4 replies · Started by Aaron on April 13, 2021
Hi! I am trying to achieve a certain effect with my hero header. I currently have the normal parallax hero header with post tags. I also have an image for each category on my site. I want to incorporate the category picture into the hero header, kind of like if someone put a sticker over it. I am not sure about how to add category-conditional images into the header element.
Would you be able to point me in the right direction?
Hi there,
Can you tell us how you've added featured images to the categories?
If we know how they're assigned, perhaps we can apply the same idea on the topics I've provided here:
https://generatepress.com/forums/topic/category-page-featured-image/#post-1667381
Thanks for the reply! I am currently using WP Term Images to link the images to the categories. I have tried other taxonomy-based image plugins but I couldn't get them to work.
Hi! I also tried David's recommendations in the post you linked. I tried the 'Categories Images' plugin and added the line of PHP to a hook. The hook works, but the image is not displaying. I am not sure how to call the image.
Not exactly sure how WP Term images work but assuming the PHP Snippet in their plugin page is still valid - https://wordpress.org/plugins/wp-term-images/#how%20do%20i%20get%20the%20image%20for%20a%20term%3F - this PHP snippet should work:
function wp_term_images_category_featured_image( $url ) {
$term_id = get_queried_object()->term_id;
// image id is stored as term meta
$image_id = get_term_meta( $term_id, 'image', true );
// image data stored in array, second argument is which image size to retrieve
$image_data = wp_get_attachment_image_src( $image_id, 'full' );
// image url is the first item in the array (aka 0)
$background_image = $image_data[0];
if ( $background_image ) {
$url = $background_image;
}
return $url;
}
add_action('wp', function(){
if(is_archive()){
add_filter( 'generate_page_hero_background_image_url', 'wp_term_images_category_featured_image' );
}
});