Saturday Sessions: Photo Layout Tips

Tip #1

Never upload pictures from a URL. That includes GIFs as well.

Why, you ask? Well, when you upload from a URL, if the site you uploaded the image from is taken down, or if the person's internet (work computer for example) blocks the site you borrowed the image from... your reader will see this: 

I wish someone had told me this earlier. This is one of my first blog posts ever. The post just looks ridiculous now! 

Voila! Then you have your image (or gif) on your blog for the whole world to see forever and ever! 

LOLZzZ!

Tip #2

When you first start a new blog, blogger automatically has a boarder / shadow around EVERY SINGLE PICTURE. So dang ugly and annoying. It will place a shadow boarder around anything it considers an image. Someone not OCD about clean images may not notice this, but it drives me bonkers. 

 For example:

Let's fix this on your blog, shall we?

Next, you are going to copy and paste this code directly into the add CSS section:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}

No more shadow boxes! Yay! 

TIP #3

Which Looks better?

I hope you said left. If you said right, I'm gong to assume it is just because you love Adam Sandler and hate my outfit on the left. In which case I'm ok with it. 

There IS a way to automatically resize all pictures in blogger to the proper width, but I personally don't recommend it, so I'm not going to talk about that today. That is for another day. 

Let's talk about manually resizing all pictures in a blog post using Pic Monkey. 

Figure out your post width.

 I could tell you a million steps to take to go into your Edit HTML, find your #main-wrapper width and if you would like to do that, use this tutorial here.

Otherwise, just guess and check. Mine blog is 650px wide, and I left align all pictures to be sure they fit. Start by sizing your picture to 650px (see below), plug it in as original size (as opposed to x-large or medium) , and see if it is a good width for your blog, then adjust accordingly until you get the correct size. 

Upload your new saved image in blogger. Be sure you choose original size as the sizing option.

Repeat this for each image you have. Yes this is a couple extra steps, but it will do wonders for the aesthetic of your blog!