Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)
-   -   [SOLVED] Auto-resizing large images (http://forum.bytesforall.com/showthread.php?t=6890)

themadthinker Apr 27, 2010 09:52 AM

[SOLVED] Auto-resizing large images
 
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?

lmilesw Apr 27, 2010 11:17 AM

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.
HTML Code:

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


themadthinker Apr 27, 2010 01:13 PM

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!

lmilesw Apr 27, 2010 01:16 PM

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.

themadthinker Apr 27, 2010 01:19 PM

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)

juggledad Apr 27, 2010 02:52 PM

looks like it is working to me.

themadthinker Apr 28, 2010 07:55 AM

Quote:

Originally Posted by juggledad (Post 30784)
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/

juggledad Apr 28, 2010 11:08 AM

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

.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

themadthinker Apr 28, 2010 12:15 PM

Quote:

Originally Posted by juggledad (Post 30849)
ok, you can set the max-width, but you need to add '!important' to the end ao you have
HTML Code:

.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!

mon17 Dec 13, 2012 11:46 PM

Quote:

Originally Posted by juggledad (Post 30849)
ok, you can set the max-width, but you need to add '!important' to the end ao you have
HTML Code:

.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

juggledad Dec 14, 2012 05:01 AM

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

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.

mon17 Dec 14, 2012 04:15 PM

Thank you so much!!


All times are GMT -6. The time now is 12:20 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.