BLOG SEARCH

1 February 2008

Auto-resize posted images in a Wordpress-powered blog

This is so simple. I just could not believe that it could be this simple. No complex coding. No javascripting.

Just a piece of CSS code.

I have been trying to automatically resize images posted in a Wordpress powered blog. What I first thought was - it would need a script that would detect and determine the size of the posted image. Based on that, if the image is larger than the required width size (in pixel), it would then automatically resize the image in the specified required size to fit in the post/story column of the Wordpress theme.

I Googled. And came across this and that tips and trick to solve the solution. But none works. I even tried playing around with Chris Messin's WP-Imagefit wordpress plugin. But it could not help me much with the theme to which I was trying to implement. What WP-Imagefit also does is that it proportionally resizes images to fit your blog template -- same as the trick I was hunting around. The drawback? WP-Imagefit plugin is currently compatible only with themes like K2 or Sandbox. The theme I am working with is neither K2 nor is it Sandbox.

Back on the prowl right off, I tried changing the posted story images with CSS's width property. It did not work. Though it does resized images but it works only with images that are larger than the required image size. The drawback to this was that images smaller than the specified required image size were also resized accordingly. I didn't want that either. I wanted those smaller images sizes unchanged. Why? It looks odd and break up the image resolutions, blah blah.

Then CSS max-width property comes to the rescue. And it finally works the way I wanted it to. It didn't resize smaller images. It resize only larger images which are larger than the specified required image size. Here is the CSS code for your Wordpress style.css.

.storycontent img {
max-width: 460px;
width: expression(this.width > 460 ? 460: true);
}


.storycontent: The story content class. Change accordingly.
img: For images found inside the .storycontent posted story
460px: Change this accordingly (or lesser probably) to the width size of your story content box.
width: expression(this.width > 460 ? 460: true); max-width fix for IE. Change the 460 to the appropriate size.

Now that I say is a really simple solution to an imagined big problem. No more manually specifying the dimensions of your posted images. *grins*

Tell me if this solution doesn't work. Or if there are any other workaround simpler and better than this.

38 comments:

father_sphinx said...

good work K'u Lal. this will be really really helpful for mizo blog-based websites as large no. of them are powered by wordpress. Not only the Mizos, but to all wordpress users. Will try it on my CSS aftr i finished by exams.... keep it up..

illusionaire said...

sphinx leader: "As large no. of them are powered by wordpress"

huh? So far, the general consensus still seem to be blogspot among the Mizo blogosphere. Like we've always discussed before, wordpress is more powerful that blogspot, but not every average joe can fully utilize that advantage.

Lal said...

Wordpress.org is just amazing. It is not just a blogging tool, but something that can be used beyond what it is known for. And if every average joe RTFM, then only the advantages can be powerfully utilised. There is also a very powerful *blogging* software out there but which is yet to be popular amongst us. If one compares Wordpress.com and Blogspot.com, the latter suits me more. But if the comparison is with Wordpress.org and Blogspot.com, I will most probably choose Wordpress.org. Blogspot software is not downloadable anyway. So how can I.

Brian said...

I just tried this and couldn't get it to work.

where should I put this bit of code? Does it have to go somewhere specific?

Lal said...

Brian: The code needs to be put at style.css in your current Wordpress theme folder.

wp-content/themes/your-theme/style.css

Some said that this trick doesn't work with IE 6 (What browser do you use?) but it works in mine.

IE sucks anyway, now. An advise to cybercafe-runners and users, dump IE. Get firefox or flock or opera.

Eclipse said...

This was the *perfect* fix for my group blog that uses auto-posting from a text chat room. No plugin required. Thanks so much!

luke k said...

dude, i love you
saved me a ton of time!

mEsoL said...

oh my God. u r my savior. looking for this hack long2 time ago. there are bunch of wordpress plugins but only resize images that hosted in our server.

this hack is great !!!

Ilquadrifoglio said...

I'm facing the problem that when visitors are posting images as comments the my theme is messed up.

Can i use this also for this problem?

Jikoyster said...

hey man! thanx for the hack it worked and fix the shite out of my crap! But dude it's not a valid css when validating it. Any suggestions?!?

Lal said...

i don't think you really need to css validate it when the code is working for you. :-D

also, have you tried out this plugin?

Flexible Upload

Josh Ilham said...

great job

Martijn said...

it will distort the image ratio when the width and height of the img are already specified. Other than that: nice solution!

♣ onelargeprawn ♣ said...

I'm having an image resizing/scaling issue with my Wordpress blog which is at http://www.onelargeprawn.co.za.

I've set the max-width of the images in the CSS to 440px, and put in your expression as well. It resizes them fine in Firefox. But the resized image in IE7 looks pretty bad compared to the same resized image in Firefox.

You can see an example of what I'm talking about if you surf to http://www.onelargeprawn.co.za/2009/01/23/the-dark-knight-oscar-snub-god-is-angry/ and see the result in Firefox and IE7.

Any advice would be appreciated.

John said...

awsome. i had a blog. +10000 images

and i need a fix for it, moving to worpress. images were too big for the template i wanted. This hack is awsome! works excelent. no need to resize any picture anymore manually.

King Devil said...

was looking for this.

yusufyusufyusuf said...

Thanks for you... It'a great solution. Thaks from Turkey. It'a useful information.

MojoLectric said...

Sorry,i'm a newbie. Can someone explain how to make this work?

I only need to paste the code into the css style sheet? what else?

I pasted it into my css style sheet and nothing happened, no auto adjust my oversize image appended on my post.

Help please.

kbj said...

Does the image loose weight or is it still heavy but just scaled down?

lee said...

I've tried adding this script into my style.css file and it resizes my images in firefox, but does nothing to the images in IE7,
I'm left with a div area which is the correct size, but have a croped version of the full size image in it.
any ideas?

Akaa said...

Awesome, but i still have a problem. My images yes gets smallen in the with, so the pictures gets very small in with, but remains in hight.

dammike said...

I'm getting the same problem as akaa. Can fix the width but height is the problem. And I'm trying this with blogger template.

John said...

code that works with datalife engine script.

adapted from yours, add in base.css in /*-----STORY-----*/:

.base img {
max-width: 500px;
width: expression(this.width > 500 ? 500: true);
}

big thank you !

If you are looking to download PES 2011 Patches enjoy our comunity.

Jacob said...

I was running into the same problem that others mentioned above: although my width was shrinking, the height of my images was staying the same, resulting in stretchy images.

This can be fixed by adding "height: auto;" to your css. So, the whole thing would be:

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

Krystian J. said...

IT WORKS PERFECLTY FOR ME..... thanks :-)

Rehat said...

Doesn't work for me. Please help!

. said...

Man, you´re an genius!
thank you

Gerry Straathof said...

I found that if you are developing a theme whose width changes according to the width of the web browser (or in my case a mobile device) then use the maximum numbers as '100%' instead of 460, and include the 'height:auto'.

max-width: 100%;
width: expression(this.width > 100% ? 100%: true);
height: auto;

Robbert said...

Doesn't work in Opera, nor in Chrome. Also, when I use this with an picture with extreme width (4000px), it completely disappears in Firefox.

Lal said...

This was posted in 2008. There are now many plugins to use for image resizing. Use them.

Elegolas said...

Awesome! I have been looking for this exact solution. Installing a full plugin seems bulky and until I saw this code I had to retire a few templates for this problem.

Thanks!

arslion said...

hi
this is not working for me, plz help

check my css and tell me where to put this code
http://www.news-world.us/pics/wp-content/themes/gothamnews/style.css

thanks

michaelbretherton said...

Thanks - worked perfectly!

ouch said...

SAVE MY DAY! haha thanks bro!

Angelo Sourias said...

is there any plugin for this?you see im not an computer expert..sorry for my noob question ..i need plugin that auto resize the image on featured image wp..on my video games blog

nurdin said...

Forgot about CSS hack...thanks for reminding me...

McDuffie Shanice said...

Thank you very much on your pleasant pointers you’ve shared on this page.

Visit us:
medical billing companies in Georgia
Medical professionals' leading billing software

Jason statham said...

The stuff you are writing blows out my mind. wordpress themes