Library Technology – Reviews, Tips, Giveaways, Freeware

Auto-Resize Large Images in WordPress

Posted In WordPress, Wordpress tips - By Techtiplib on Wednesday, February 22nd, 2012 With No Comments »

I was looking for an easy way to automatically resize the images in the blog posts, so that large images won’t break the WordPress theme. A few plugins are available, but most of them are either outdated or with lots of other functionalities which I do not need.

Finally I stumbled upon a blog entry describing an easy way of doing it with a single stylesheet edit. So, this what you need to do to get it done.

    1. Open your WordPress theme’s Style sheet file in a text editor like notepad ( or use your webhost’s online editor). The file is located in your theme’s folder: /wp-content/themes/<your theme>/style.css
    2. Search for img in this file to get your post content wrapper’s image settings. It looks like the following in my case.

.postContent img {
margin: 10px;
border: 3px solid #CCC;
}

3. Append the following content to it. Specify the size you require in pixels. I used the value 500.

max-width: 500px;
width: expression(this.width > 500 ? 500: true);

4. The resulting code is quoted below.

.postContent img {
margin: 10px;
border: 3px solid #CCC;
max-width: 500px;
width: expression(this.width > 500 ? 500: true);
}

5. Save the file and Refresh your blog page with a high resolution image.

More contents in: ,

About - Hey, this blog belongs to me! I am the founder of TechTipLib and managing editor right now. And I love to hear what do you think about this article, leave comment below! Thank you so much...