Big Image on Featured Post, Normal on Single Post

Question

I have included a code which fetches any post under my category=featured. And that shows-up on the top of my content (*whenever we have any breaking news to show*)on blog-page.

The problem is, The image that I can afford to show on single-post is of 750px width, whereas I have enough space to show 1100px image on the post that shows up on home page (*blog-page*).

So I want to embed an option where I can upload two images (*of 750px and 1100px*). And then I should be able to use 1100px image on the post when its shown on blog-page and 750px image when user clicks and goes to single post.

Is it possible, and how? Thanks.

Answer 1

You can show featured images at multiple sizes easily enough, by specifying the size of image when you make the call, but if you want them to be different you can use the code in this plugin:

http://wordpress.org/extend/plugins/multiple-featured-images/

Here's a tutorial:

http://lifeonlars.com/wordpress/how-to-add-multiple-featured-images-in-wordpress/

e.g. Example registration:

if (class_exists('MultiPostThumbnails') {
    if (MultiPostThumbnails::has_post_thumbnail('folio', 'feature-image-2')) {
        MultiPostThumbnails::the_post_thumbnail('folio', 'feature-image-2'); 
    }
    if (MultiPostThumbnails::has_post_thumbnail('folio', 'feature-image-3')) {
        MultiPostThumbnails::the_post_thumbnail('folio', 'feature-image-3'); 
    }
    if (MultiPostThumbnails::has_post_thumbnail('folio', 'feature-image-3')) {
        MultiPostThumbnails::the_post_thumbnail('folio', 'feature-image-3'); 
    }
}

Example usage:

<div id="slider">          
    <?php    
        // Checks if post has a feature image, grabs the feature-image and outputs that along with thumbnail SRC as a REL attribute 
        if (has_post_thumbnail()) { // checks if post has a featured image and then outputs it.     
            $image_id = get_post_thumbnail_id ($post->ID );  
            $image_thumb_url = wp_get_attachment_image_src( $image_id,'small-thumb');                               
            $attr = array(
                'class' => "folio-sample",                                   
                'rel' => $image_thumb_url[0], // REL attribute is used to show thumbnails in the Nivo slider, can be skipped if you don't want thumbs or using other slider
            );
            the_post_thumbnail ('feature-image', $attr);                                            
        }
        if (class_exists('MultiPostThumbnails')) {                              
        // Loops through each feature image and grabs thumbnail URL
        $i=1;
            while ($i<=5) {
                $image_name = 'feature-image-'.$i;  // sets image name as feature-image-1, feature-image-2 etc.
                if (MultiPostThumbnails::has_post_thumbnail('folio', $image_name)) { 
                    $image_id = MultiPostThumbnails::get_post_thumbnail_id( 'folio', $image_name, $post->ID );  // use the MultiPostThumbnails to get the image ID
                    $image_thumb_url = wp_get_attachment_image_src( $image_id,'small-thumb');  // define thumb src based on image ID
                    $image_feature_url = wp_get_attachment_image_src( $image_id,'feature-image' ); // define full size src based on image ID
                    $attr = array(
                        'class' => "folio-sample",      // set custom class
                        'rel' => $image_thumb_url[0],   // sets the url for the image thumbnails size
                        'src' => $image_feature_url[0], // sets the url for the full image size 
                    );                                                                                      
                    // Use wp_get_attachment_image instead of standard MultiPostThumbnails to be able to tweak attributes
                    $image = wp_get_attachment_image( $image_id, 'feature-image', false, $attr );                     
                    echo $image;
                }                           
                $i++;
            }                            

        }; // end if MultiPostThumbnails 
     ?>
</div><!-- end #slider -->