Site logo

Archived topic

Category Images In Hero Header

4 replies · Started by Aaron on April 13, 2021

Viewing posts 1–5 of 5

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?

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'  );
	}
});
This archived topic is closed to new replies.