Resize All Blogger Images to Custom Width!

If you maintain a blog of your own on Blogger, I’m sure you know of the many different themes (free or paid) available to you to spice it up. Your theme is very important because it’s what sets you apart from the other millions of bloggers out there as well. Consider it crazy but many bloggers fail to maintain visitors on their site simply due to a bad theme and layout design. However, that’s a story for another blog. Here though, I’ll go over a simple method I found elsewhere to easily help you transition from one Blogger’s theme to another by automatically resizing all of your blog’s pictures to fit within the post boundaries of your new theme. AnotherWindowsBlog is just a small time blog I update from time to time. I really wouldn’t consider it a “professional” website in the sense of having thousands of visitors on a daily basis or having services to offer. Therefore, I have the leisure to apply different themes whenever I feel like it. On professional websites, I doubt this is a good idea. You rarely want to confuse your readers or customers by constantly switching to different themes and layouts because those loyal to your website are already familiar with where everything is suppose to be. Because I fall into the former group, I get to choose from a wealth of free Blogger themes to help customize the look and feel of my blog whenever I want to.

The Problem

When I first started Anotherwindowsblog, I worked with a theme that had a pretty large posting area, width wise. Therefore, I had the leisure of posting large pictures without fear of the picture breaking the posting boundary. Here’s a simple picture to show you what I mean:

Borders

The red border represents my posting area. The right side constitutes my sidebar area. If my picture width value is larger than the posting area width value, than the picture will either get cut off or spill over to the sidebar area. This wouldn’t be a problem if you never switch to a different Blogger theme because you already know what your limits are. Once you do make a switch, you’ll have to make sure that new theme has a big enough content area so that your pictures don’t get cut off. If it does, you’ll have to manually either increase the posting area by increasing the width value and/or by decreasing the sidebar area as well to make room. You do all this within your theme’s HTML layout. Yeah, it’s not fun at all. If you don’t know how to perform this, you’re severely limited in your theme selection. Or, if you do use that new theme, you’ll have to either live with your larger pictures being cut off or you can manually re-edit each offending picture. Hardly the most efficient method as you can already tell, especially if you have hundreds of pictures.

The Solution

I had been living with this problem for a long time now since I created Anotherwindowsblog. There were so many themes that I had considered using but didn’t in the end because of this picture issue. I finally decided to seek out a solution and luckily, not only have I found one but its so easy to implement as well. Basically, we need to add a simple CSS filter in our blog’s HTML layout. This simple code tells your blog that whenever a image is bigger than the specified width, than automatically resize it to X where X is the size in pixels you’ve set. It sounds confusing but it really isn’t. Let’s take a look at the actual coding first:

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

The max-width value is the maximum width of all pictures in your blog. In this case, it’s 575px. This is the most important value. Let’s say the theme you are using now allows you to host pictures with a maximum width of 650px. The new theme you want to switch over to only gives you a posting area of about 500px. By not doing anything, all pictures you have that are over 500px in width will be cut off or extend over to the sidebar area. By using the code, we specify in the max-width value to have a 500 (or a slightly lower value if you want to provide for some padding space) value.

Once that is set, we need to specify one more value. If the pictures cannot exceed a maximum width of 500px, than what should Blogger do if it does indeed find pictures that match that criteria? In the second (and third) value, we tell the code to automatically help us resize those offending pictures to the specified width value here. These are the 575 ? 575 values. We are now basically saying that once you find a picture exceeding 575px, then resize them to 575px (you could technically put in a lower value if you wish). This simple CSS code will not alter any of your pictures that do not exceed the specified width under the max-width value.

Once you have altered the code to your specifications, it’s time to implement it. Log in to your Blogger’s account and head over to Design -> Edit HTML. For safety reasons, download your entire template first so you have a backup in case something goes wrong. Check the Expand Widget Templates button. Use the Search function in your browser to search for the term:

</b:skin>

Once you have found it, copy and paste the entire code directly above this and then save the changes. Picture that exceeds the max-width value should now be automatically resized.

Code

BEFORE:

Before

AFTER:

After
Scaled

***
Credit goes to Kanudigital.com where I first found out of this method.

In the End…

It was so frustrating in the past when I couldn’t use a particular theme because I didn’t know how to automatically resize my pictures to fit within the borders. With many themes, what I had to do was manually edit the HTML code layout of the new theme to increase the posting area width. Sometimes it worked, sometimes it didn’t. For times that it did, many themes just looked weird after alteration. As you can tell, I was stuck in a dilemma of sorts. Finally, with this code, my picture problems have been solved! Now if only I can actually pick out a theme from the many that I want to use……

Premium Blogger Templates
BTemplates
Templates Block
BloggerTheme

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Poll

For Windows 8 users on desktops and laptops, how often do you actually use "apps" downloaded through the Microsoft Store?

View Results

Loading ... Loading ...

Comments

  1. Finally, I found my solution to my long problem. Thank you so much bro :)

  2. You are a Godsend! I converted to a new theme last night that went live today. It took me to weeks to make the change. Get on the new blog and voila – all the pictures are a bit too big for the most part. Since I’ve had the site over seven years, you can imagine how much work it would be to save each image again and re-shrink, reupload and re-edit. This worked and saved me, thanks so much!!!

    • Your welcome Erin! Your problem was exactly the same as mine or pretty much anyone else looking to switch themes in Blogger. Please help spread the word around if you know of others stuck in the same situation!

  3. I tried this and worked fine although my header picture got resized too and it is smaller than the total width of my blog. What can I do to not let  it affect the size of the picture of my header?

    • I’m no HTML expert but I’m guessing that you’ll need to edit your CSS header element. Specifically, you’ll need to specify directly the width and length of your header image. Hopefully this should overwrite the code described here in this article.
      You’ll need to edit your blog template (I’m assuming you’re on Blogger platform) and find the header element. This CSS element controls and styles the look and behavior of your header. Within that element, you’ll need to type in the exact width and length desired of it. Here is an article that can explain it better. Scroll down a bit and you’ll see the author talking about resizing the header to a specific size. | http://bit.ly/qlPjZZ

      If you’re having a hard time finding the header element, try loading your blog in the Google Chrome browser. Right-click on your header image and select “Inspect Element” from the menu. For my blog here, my header title in my CSS is called #top. Yours could be called #header, #headerimage or pretty much whatever else the theme creator named it during creation.

  4. Anonymous says:

    it is working. thanks!

    • Awesome! So glad it worked out. I’m sure this has always been a huge problem for users wanting to switch themes but were worried about their pictures being too big.

      • Anonymous says:

        well, i have been using this code since very long. recently followed up to find if there are the articles based on this trick. but, it’s sad to see that there’s not much articles out there. one is on kuntudigital and other one is promoted here. 
        kuntudigital’s DNS fails to lookup the site probably because it hasn’t been renewed or some internal errors.

        • Yeah you’re right…it’s a shame his site is no longer functioning. That means one less source for others to find this information. I remember being so frustrated in the beginning because I thought I would never be able to switch over to another theme.

  5. Hmmm…sorry about that. It could be that while you were reading the post, Dropbox (my picture hosting service for this blog) was performing maintenance on their servers and my pictures were temporarily affected. I noticed it before but not to the point where every single picture in the post were not appearing. I’ll look into it…hopefully I won’t have to change to another image hosting service yet again!

  6. this is a very cool hack- glad google had the answer to my problem- hope all goes well.. =)

    none of the pictures in the post are showing up though- it’d be cool if they did.. =P

Speak Your Mind

*


(humans only, please) *