I'm trying to figure out a way to auto-resize large images in my blog. I know that Atahualpa does something similar when it scales the center column based on page width, but I want to put a hard limit on how big the pictures can get.

I found this guide about how to do it, but I can't seem to figure out the appropriate place to put the code in Atahualpa. Tried throwing it in the "style IMAGES" section, but it didn't seem to take.

Any ideas?

Nice find on that code. It just had to be tweaked a little for Atahualpa. I just added the following code to CSS Inserts to make a maximum 100px wide picture for all images. You could probably change the post.img so that only certain images would be affected but I'm not quite sure on what that code would be.

.post img {
max-width: 100px;
width: expression(this.width > 100 ? 100: true);
height:auto;
}

Thanks for the quick reply! I used the code you posted, changing it only to set the width to what I wanted, and put it into "CSS inserts". Unfortunately, it didn't seem to have an effect, and the images are still dynamically resizing with the center column, sometimes to sizes much wider than the 550px I was searching for.

Will it only work with new images, or should it happen retroactively to files already there? Any idea what else I might need to tweak to make this happen?

Thanks for any and all help!

It worked on all the images in my site right away. I'll take a look at yours to see if I can determine the issue.

After I saved this message I realized I don't have a URL for you site. Could you supply that please.

Also where did you put the code? It should go into CSS Inserts and if you still have some code left Style IMAGES section you should take that out as well.

Much obliged!
http://scienceisbadass.com/

Yup, I put it in CSS inserts, and then made sure to reset style IMAGES back to default (which is what it was before)

looks like it is working to me.

Originally Posted by juggledad

looks like it is working to me.

Really? That's curious, I'm not seeing it.

After your post, I thought it might be a caching issue, so I tried it on another machine, and it still seems overly large.

For instance, the main image in these two posts is definitely showing up as larger than the 550px I'm trying to limit it to:
http://scienceisbadass.com/2010/04/samarium/
http://scienceisbadass.com/2010/04/a...a-glass-shell/

ok, you can set the max-width, but you need to add '!important' to the end ao you have

.post img{
max-width:550px !important;
width:expression(this.width > 550 ? 550:true);
height:auto;
}

BUT... it will not get smaller and when the page gets too small, it will overlap the sidebars

You can always just put the max height and width you want in the <img...> statement, then it will never get bigger than that

Originally Posted by juggledad

ok, you can set the max-width, but you need to add '!important' to the end ao you have

.post img{
max-width:550px !important;
width:expression(this.width > 550 ? 550:true);
height:auto;
}

BUT... it will not get smaller and when the page gets too small, it will overlap the sidebars

You can always just put the max height and width you want in the <img...> statement, then it will never get bigger than that

Great! Thank you so much! That seems to do the trick in FireFox, but then it spontaneously combusts when using Chrome =/
In all honesty, I think I'll just start being more rigorous with resizing images prior to upload, instead of just relying on the theme's resizing capabilities.

Thank you so much for your help, though! Mammothly appreciated!

EDIT: I lie, it works fine in Chrome. The browser was just having a hissy fit over an unrelated matter, and freezing when I tried to access the page. Works great, thank you!

Originally Posted by juggledad

ok, you can set the max-width, but you need to add '!important' to the end ao you have

.post img{
max-width:550px !important;
width:expression(this.width > 550 ? 550:true);
height:auto;
}

BUT... it will not get smaller and when the page gets too small, it will overlap the sidebars

You can always just put the max height and width you want in the <img...> statement, then it will never get bigger than that

Hi Juggledad,

I'm new to wordpress and I have used the code above and set images to the width I wanted but I'm having troubles with the sidebar overlapping when the page becomes smaller. I'm not quite sure how to set max height and width as you mentioned. Could you go through it in a little more detail if that was ok?

Thanks,
Mon

If you want your image to resize when the window changes size just use

width: 100% !important;
height: auto;

in the ato->Style IMAGES->Images in Posts option. Note that the 'expression' has been depreciated and does not work with ie8 and above and this thread is 2 1/2 years old.

Thank you so much!!