Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

[SOLVED] Auto-resizing large images


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Apr 27, 2010, 10:52 AM
themadthinker
 
5 posts · Apr 2010
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?
  #2  
Old Apr 27, 2010, 12:17 PM
lmilesw's Avatar
lmilesw
 
10,111 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Apr 27, 2010, 02:13 PM
themadthinker
 
5 posts · Apr 2010
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!
  #4  
Old Apr 27, 2010, 02:16 PM
lmilesw's Avatar
lmilesw
 
10,111 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Last edited by lmilesw; Apr 27, 2010 at 02:19 PM. Reason: Additional info needed.
  #5  
Old Apr 27, 2010, 02:19 PM
themadthinker
 
5 posts · Apr 2010
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)
  #6  
Old Apr 27, 2010, 03:52 PM
juggledad's Avatar
juggledad
 
22,327 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
looks like it is working to me.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Apr 28, 2010, 08:55 AM
themadthinker
 
5 posts · Apr 2010
Quote:
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/
  #8  
Old Apr 28, 2010, 12:08 PM
juggledad's Avatar
juggledad
 
22,327 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Apr 28, 2010, 01:15 PM
themadthinker
 
5 posts · Apr 2010
Quote:
Originally Posted by juggledad
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!

Last edited by themadthinker; Apr 28, 2010 at 01:21 PM.
  #10  
Old Dec 14, 2012, 12:46 AM
mon17
 
3 posts · Dec 2012
Quote:
Originally Posted by juggledad
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
  #11  
Old Dec 14, 2012, 06:01 AM
juggledad's Avatar
juggledad
 
22,327 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Dec 14, 2012, 05:15 PM
mon17
 
3 posts · Dec 2012
Thank you so much!!

Bookmarks

Tags
auto-resize, images

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Background image auto resizing to screen marineceo Header configuration & styling 11 Apr 18, 2011 04:35 PM
Images not resizing within posts kam Center area post/pages 4 May 14, 2010 07:24 PM
How to make the images in post auto-resizing depending on different resolutions pjmeimei Center area post/pages 0 Apr 20, 2010 12:26 AM
Logo image positioned to far left on large monitors b1tzmast3r Header configuration & styling 16 Nov 16, 2009 07:41 AM
Large Gap At Top Of Both Side Bars agrande Sidebars & Widgets 4 Jun 29, 2009 05:39 AM


All times are GMT -6. The time now is 08:24 PM.


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