10 Steps to Larger Blog Photos

Tuesday, January 18, 2011




One of the biggest, if not THE biggest, must have that I had when working with Shannon to design a new blog template was to have a very large posting area perfect to post larger than normal pictures. I had found myself recently drawn to blogs with large pictures in their posts . I am a very visual person, and perhaps a little nosy, and love to look at every one's large blog pictures. I tried playing with the HTML code generated by Blogger's standard picture uploader, however,  all that did was blur out my photos. I knew there had to be a way to do this that I simply was not aware of.  I started asking around to my bloggy friends and also Googled everything there was to know about how to make my blog pictures bigger. I already had my new SLR camera, now all I needed was a new blog template with a larger posting area and some easy how-to tips on how I could make this possible. I finally found a process that worked for me and wanted to share it all with you.


We will use the picture below as my example. We have all seen it on my blog before, my pride and joy, my sunburst mirror.  I uploaded this picture to my blog from my computer using Blogger's standard picture uploader. I did this to show you the difference of uploading a picture using Blogger's standard uploader compared to the new way that I am going to demonstrate to you. The current dimensions of this photo using the standard uploader is 268 height by 400 width.


What you need to do to make your photos larger

1. Find a picture. Whether it's on a standard digital camera, camera phone, or SLR camera, this process can and will work with any digital camera.  Upload the picture to your computer.


2. Now upload your photo from your computer to Photobucket.com. This is a free image hosting and photo sharing website.  Click on the 'Upload Now' button.

Photobucket

3. Click on the 'Save and continue to my album' link in blue.  Then click on the picture that you would like to edit.

Photobucket

4. Your photo will now pop up. You then want to drag your cursor along the top of the photo. A tool bar will pop up. Select edit. The editing tool is where you will change the size of your photo.

Photobucket

5. In order to make the appropriate size adjustment to your photo, you will need to know the size of your posting area, or in blogger HTML code terms, your Main Wrapper. You can find the  size of your Main Wrapper by going to the 'Design' tab located in your Blog dashboard.  Click on the 'Edit HTML' link and scroll down until you find the Main Wrapper Section.  You can see from my blog's HTML that the Main Wrapper size is 600px.  This is the maximum size that your posting area can support.

Photobucket

6. Go back to Photobucket now and edit the size of your picture. I chose the 600 x 402 option since 600px is the maximum size of my posting area.  There are also preset sizes, the 640 x 480 preset size also works for me.  Now hit the 'Appy' Button on the right of the screen and then the 'Replace Original' button on the bottom of your screen. 

Photobucket

7. After hitting the 'Replace Original' button, you will be brought back to a screen with your new picture. There is also a 'Share This Photo' box to the right of your photo. This is where your new HTML code is located already coded with your new picture size.

Photobucket

8. Click on the html line, you will notice that just by clicking on the HTML line it will flash yellow and then say 'Copied'. This means your HTML code is copied.


9. Go to your post and paste the HTML code into your post.  You will need to be in the 'Edit HTML' function while you are creating your post.  Place your cursor in the body of your post where you want your picture to show up. Hit the keys Ctrl AND V at the same time and your HTML code will be pasted into your post.

Photobucket

10. Here is our new picture edited to the 600 x 402 size.

Photobucket

Enjoy!!! I love sharing Blogging tips so please feel free to share yours with me anytime!!!

9 comments:

  1. I love looking at large photos too! That's why I changed my blog from 3 columns to 2 columns to allow for more content space. Thanks for the extra tips!

    ReplyDelete
  2. I just did a post yesterday that the picture went outside my post. I asked for help but no one seemed to respond. Thanks for the tip! I'll be sure to take this in consideration for my next post!

    ReplyDelete
  3. I have been reading your blog for sometime, but I don't think I have ever commented :(
    But, I LOVE your new design! And, thanks for sharing the tip!

    ReplyDelete
  4. Thanks for sharing this Karen!! I am going to be trying this asap :)

    ReplyDelete
  5. hmmm...I think you can post the same size pictures by just choosing 'extra large' after uploading? ....seems a lot easier?

    ReplyDelete
  6. Great tutorial but I must be using the same template/editor as Alisha.....
    I have the choice of what size to make the image as soon as it's loaded. You have 4 sizes to choose from.
    Do you not have that option? The XL is huge.

    ReplyDelete
  7. Shannon did my blog design, too, and my most favorite thing about it is the larger photos!!!!

    ReplyDelete
  8. Like Alisha and flip flops and pearls, I choose the XL option once my photo is uploaded into my draft post. Once my photo is uploaded, I right click on it and I see many options - size options, add a caption, etc. Do you have that option in your editor? Have you upgraded to the new editor?

    Also, I have the Minima Stretch template, sole purpose to use largest photos possible. 2 and 3 column styles can limit the picture size.

    ReplyDelete
  9. Karen! Thank you so much, this has been SO informative!!! I never knew how to make my own button but now I do, this is perfect :) Fabulous blog you have, so glad to be a new follower!

    ReplyDelete

Thank you so much for taking the time to leave a comment! I normally respond to all comments so please keep them coming!