Image re-sizer CSS Hack for blogger and wordpress users

Are the images in your main container is wider than the width of the main container. If it’s so then you will find your blog layout clumsy or misaligned.I have seen few using image resizer tool to resize images, but it’s time consuming. You can even use JavaScript for resizing images, but using JavaScript will increase blog loading time. In order to avoid using JavaScript or image resizing tool, in this post I have explained how to resize images in your blog main container with simple CSS codes.

You can implement image resizing hack in PHP based wordpress or in blogger blogs too. In this tutorial i will explain how to add this hack to both blogger as well as wordpress.

Image resize hack for Blogger

Before explaining the original hack , I would like to tell what most of the blogger might be doing to re-size their images while writing posts. Mostly they will use style tags to mention the width and height of the image.

<img src=”http://techieblogger.com/wp-content/uploads/2009/07/just-host-thumbnail.png” style=”height:260px;width:560px;“/>

or

<img src=”http://www.techieblogger.com/wp-content/uploads/2009/08/digital-abstract-art-820×1024.jpg” width=”560″ height=”260″/>

But when you are having a number of images in your posts , then it becomes difficult to mention the image size and width in each and every image. And also if you change the template which contains different width , then you need to edit the size and width in all images.

In order to get rid off those head-aches , just follow these simple steps to resize images in your blog. Even if you have declared different image size and width in that image code , this code will overwrite those tags and will change the width and size you mentioned in the style sheet.

First go to layout section of your blogger blog. Then navigate to EDIT HTML section. Now search for this tag there.

]]></b:skin>

Now add the following code above that code line.

.post img {
float:center;
min-width:560px;
max-width:560px;
max-height:260px;
min-height:260px;

padding : 10px;
line-height : 2em;
margin: 0 auto 10px auto;
clear: both;
}

In that above code , edit the max-height and min-width tags to suit your main container width and height.

Image resizer for wordpress users

In order to implement image resizer hack in your wordpress blog , just follow these steps.
First go to the dashboard of your wordpress blog. Then navigate to the Appearance tab in the left sidebar. Now go to the Editor page.

In the style sheet, check for the div element used in the main content container. In most of the wordpress blogs , the div element used will be “single-entry” . Now in that style sheet page , paste the following code anywhere.

.single-entry img {
float:center;
min-width:560px;
max-width:560px;
max-height:260px;
min-height:260px;

padding : 10px;
line-height : 2em;
margin: 0 auto 10px auto;
clear: both;
}

remember to change the text in green to the div element id of your main container.

Hope This hack will be more useful when you will be having more number of images in your posts. You need not use separate style codes for each and every image. Rather by this method everything is made automatic and even you can save your blog loading time too.




If you like this article , then please help us by bookmarking

16 Responses to “Image re-sizer CSS Hack for blogger and wordpress users”

  1. Working and resizing images to best fit the low resolution monitors had always been a trivial task for me.

    Hope I can make use of this tut and work on it. Thanks

  2. It doesnt work..

  3. THIS DOES NOT WORK, THOUGH IT WILL ENFORCE THE “MINIMUM SIZES, ETC…. IT DOES AUTOMATICALLY RESIZE MY IMAGES TO THEIR ACTUAL SIZE, FOR INSTANCE, A PIC THATS 700X466 PIXELS IS STILL DISPLAYED SMALL, I HAVE TO MANUALLY CHANGE DIMENSIONS TO GET THEM TO DISPLAY FULL SIZE…. THIS SUX, LET ME KNOW IF THERE IS A FIX!!?

  4. my photos are all squished and don’t resize proportionally… anyone have a fix?

  5. It does no work. It say that More than one widget was found with id: Feed1. Widget IDs should be unique. What can I do?

  6. max-width:10px

    This attribute does not work on IE5 and IE6.

  7. Thanks for the code. How can the width and height proportions what?

  8. Excellent Code, it works perfectly THANKS a lot :D

  9. well. can something like this be done with the embedded youtube videos? i want all of them resized from 420 width to 350. thanks!

  10. hello again, i’m just trying my luck.

    would you also happen to know a trick where i can change the font color of my standard footer?

    i used to color it white coz my blog’s background before was blue.

    now when i changed my templates with a white background, my standard footer message can’t be seen anymore.

    is there a way that i can change the font color? i have 1000+ posts and i can’t manually re-color the footer message.

    thanks!

  11. Thanks for the code. It really helps to me.

  12. Salam,

    Thanks a lot for this tip … work great for me, you blog is very helpful.

    thank you again.

  13. Follow the instructions on this page http://code.google.com/p/blogger-img-resizer/

    Its alot easier.

  14. Thanks for great code. Keep it up.

  15. works like a charm… thanks a lot…

Leave a Reply

You must be logged in to post a comment.