Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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 -->
share|improve this answer
    
Thanks Tom, thanks for the reply. To be specific, this is what I want to achieve ---> Main Blog Page View -> i.imgur.com/9RFq3.png Single Post View -> i.imgur.com/qJ9ZL.png –  vajrasar Oct 2 '12 at 11:22

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.