Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Redesigning for a wider format, and changing all images in a post WordPress

  • SOLVED

Imagine I have a blog that has 3 columns on the front page, but just one column for the single.php design. The blog posts go in the middle column on the front page. The column is narrow and so the images need to be narrow. On single.php, the design is wide, so the images can be wide. Can anyone think of an easy way where I might set up the blog to switch the image sizes depending on the template?

Answers (6)

2010-12-02

Pippin Williamson answers:

Use post thumbnails and conditional statements.

Set up multiple post thumbnail sizes in your functions.php, one for large, one for small. Then use a if (is_single()) conditional statement to determine which thumbnail you display.

Another way would be to use CSS to resize the images if within a body class of "single".

2010-12-02

Lee Rickler answers:

Use specific post thumbnails sizes.
Good article here:
http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/

Then adapt settings in media settings to match and use the 'Regenerate thumbnails' plugin just to make sure.

2010-12-02

idt answers:

I think the easiest solution would be to just have something like this on your css:


body.home img.class_name(or img#id_name) {
/* Specify image dimension here for home page */
}
body.single img.class_name(or img#id_name) {
/* Specify image dimension here for single page */
}

2010-12-02

Sarbartha Das answers:

TimThumb – PHP Image Resizer can solve easily...

2010-12-02

Bob answers:

I would recommend you don't use timthumb.

You have 3 options as other have said.

Easy option: Use css to define the image sizes. For image scaling in CSS you just need to define 1 parameter, in your case the width.

So in your large image page you can have <div id="large-image">your-image-code</div> and in the small one something like <div id="small-image">your-image-code</div>

in the css you just define the width, in the case for the small image it would be something like #small-image img{ width:200px;}.


The second option is to use the default WordPress image sizes defined in "media" on the admin menu. Set your 3 sizes and simply call the size you want from a template using something like this (for the medium setting size)<?php echo wp_get_attachment_link($image->ID, 'medium'); ?>


The third option is to create a function for a custom image size ( if you do not want to use the default 3 in wordpress, you can add as many as you want) and then call that in a template, this is also easy and I can provide you the code if your interested.

The function is simple here is an example you would add to your functions.php
add_image_size('custom-small-thumbnail-size',600,340, true)

2010-12-03

Satish Gandham answers:

There is a java script solution to dynamically resize images based on the size of container div.

Whats your blog url?

I have to check the blog code before i can give u this solution.