Different image sizes for home and post pages

Question

I'm wondering if it is possible to use different image sizes (medium, large) for the content on the homepage and single post pages. I have a narrow column on the homepage than on the single post pages and different image sizes would be nice.

Thanks.

Answer 1

If your talking about the images that are written into $post->post_content (the_content()) you'll either need to write a filter that strips out all images and replaces them with the smaller version. Or you could just use CSS. For CSS make sure you have body_class() in your body tag then you can localise a maxwidth to your home page.

body.home .post img{
    max-width:300px;
}

Answer 2

If you're using the body_class() template tag, you can modify content-image max-width using CSS. For example:

#content img {
    max-width: 600px;
    height: auto;
}
.blog #content img,
.archive #content img {
    max-width: 450px;
}

See the Template Hierarchy and body_class() Codex entries for more CSS class information.

Answer 3

# functions.php - hook on 'after_setup_theme'
// Posts & Pages - if only posts, go with is_single()
if ( is_singular () )
{
    add_image_size( 'sidebar', 150, 150, true );
}
else
{
    add_image_size( 'sidebar', 200, 200, true );
}

// inside your post template
echo get_image_tag( $id, $alt, $title, $align, 'sidebar' );

Answer 4

If you are using featured images you could use the following inside your loop.

if( has_post_thumbnail() ) {
    the_post_thumbnail('medium');
}

Where medium is the image size you want to fetch.

If you are using the attached images you could use the following functions.

wp_get_attachment_image($attachment_id, 'medium');
wp_get_attachment_image_src($attachment_id, 'medium');

The first one gives you the img tag while the second one gives you an array containing image source, width and height. You can use this function if you know the id of the attachment.

To create extra image sizes when you upload an image you can use the add_image_size( 'custom', 210, 210, true ); function and then call the size custom instead of the other sizes ( thumbnail, medium, large, full ). This function automatically creates an extra image with the dimensions specified ( if the dimension of the image are bigger than the specified dimensions ) when you upload an image through the media library. Now since you have already uploaded your images you would need to use the regenerate thumbanils plugin to generate the newly added image sizes.