Get featured image on Blog Index

I’ve been trying to use the “featured image” from the home (the blog index) with no luck. It’s working for every single page, but it’s not working for the home.

The code looks something like this:

Read More
// Don't use on single posts
    if (!is_single()) {
        if (is_home()) {
            if (function_exists('wp_get_attachment_thumb_url')) {
                $img = wp_get_attachment_image_src(get_post_thumbnail_id(),'full');
                $featured_image = $img[0];
            }
        } else {
            if (function_exists('wp_get_attachment_thumb_url') && has_post_thumbnail()) {
                $img = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
                $featured_image = $img[0];
            }
        }
        if ($featured_image) { ?>
            // A lot of code...
        <?php }
    }

I already tried to obtain the thumbnail using the _thumbnail_id meta. Same result.

This code is placed on the functions file, I believe that the issue is that it’s trying to get the loop/posts featured image.

Thanks a lot in advance.

Related posts

Leave a Reply

5 comments

  1. if you are referring to the ‘page for posts’, then try (only relevant section of your code shown):

    if (is_home() && get_option('page_for_posts') ) {
        $img = wp_get_attachment_image_src(get_post_thumbnail_id(get_option('page_for_posts')),'full'); 
        $featured_image = $img[0];
    } else { 
    
  2. I’d suggest anyone doing this consider the following adjustments:

    1. Get the ID of the current page/post/index using get_queried_object(). For a blog index that’s set to a page this will return the correct page ID.
    2. If all you want is the full-sized image use wp_get_attachment_url() instead of wp_get_attachment_image_src()

    Here’s a quick function I’d use to achieve this in a simpler way:

    /**
     * Custom Featured Image
     */
    function custom_featured_image() {
        $queried_obj = get_queried_object();
    
        // Don't use on single posts (JUST FOR THIS DEMO)
        if ( is_single() ) return;
    
        // Get the featured image ID
        $image_id = get_post_thumbnail_id( $queried_obj->ID );
    
        // Get the URL for the full sized image
        $image_src = wp_get_attachment_url( $image_id );
    
        return $image_src;
    }
    

    I personally like to avoid excessive nested conditional logic, using a function can help with this.

  3. This works..

    <section id="banner" style="background-image: <?php if (is_home() && get_option('page_for_posts') ) {
        $blog_home_id = get_option( 'page_for_posts' );
        echo 'url('.get_the_post_thumbnail_url($blog_home_id, 'full').')'; 
    } else { 
    echo 'url('.get_the_post_thumbnail_url($post->ID, 'full').')';
    }
    ?>;">
    

    Hope this helps!

  4. You have 2 quick options, via the template file using the_post_thumbnail for the loop. I assume your outputting the data in a typical blog format and thus your function above won’t work or act very weird inside the loop.

    Instead try something like this in the actual template file where your main loop is (maybe index.php or loop.php) :

      //loop starts
       if ( has_post_thumbnail() ) { 
       the_post_thumbnail();
       }
       //the_content(); and other stuff
       //loop ends
    

    Or if you want to use an action instead to alter the main loop you can use pre_get_posts, for example in your functions.php file.

    Something like:

    add_action( 'pre_get_posts', 'add_featured_image' );
    
    function add_featured_image( $query ) {
    
        if( $query->is_main_query() && $query->is_home() ) {
            //your image code
        }
    
    }
    

    Notice that the above is checking 2 parameters, the main query and the home page, it is very important to check if it is the main query, otherwise it will alter all queries.

    Reference:http://codex.wordpress.org/Plugin_API/Action_Reference/pre_get_posts

  5. When you are in the “posts page” $post will start with the first “post” in the loop.
    One way could be by using the “queried object”.

    Print $wp_query and you will see:
    [queried_object]
    [posts]
    [post]
    — note: queried_object will/might be empty in some pages

    // get_the_post_thumbnail_url( get_queried_object(), 'fullsize' );
    
    // or
    
    function ABC_get_the_thumbnail_url() {
    
        $queried_object = get_queried_object();
    
        $thumbnail_url = get_the_post_thumbnail_url( $queried_object, 'fullsize' );
    
        if ( ! $thumbnail_url ) {
    
            return get_template_directory_uri() . '/your-path/default-image.jpg';
    
            // or from a default option
    
        }
    
        return $thumbnail_url;
    
    }