There's something about a blog that has their photos figured out-something wonderful. When I visit a blog the first thing that draws me in are their photos. If they have large clear photos lined up beautifully in the post I'm much more likely to click their little follow/subscribe button. Even before I read through a lot of posts-it's just a fact that we live in a very visual society, and I am a visual person.
I'm not saying I wont read a blog that doesn't have good photos, there are plenty that I follow, I'm just less likely to check in as often, and I'm less likely to follow new blogs that have bad photos or poorly composed posts.
First thing is first, you must understand the space you're working with. It's kind of like how you can't really buy blinds for your window without first knowing how big your window is-what if your blinds are too small or too big? Man that would look funny.
Most blog editors are going to allow you to customize the size of your posts a little by altering the width in your template design. With blogger (unless you've purchased your template somewhere else and it's preconfigured) you can easily alter it by going to Settings > Template > Customize. Once you're in the Blogger Template Designer you can click on Adjust widths from the left hand menu and adjust your sliders there. The post size is going to be a combination of how large you set the Entire Blog vs. how large you set the sidebar sliders.
If you feel comfortable enough, this can also be adjusted in the actual HTML-which may be the only way if you're using a pre-configured template. For help doing so, I recommend checking out this post. Warning: Not all templates will be the same-it may be best not to alter this if you aren't 100% sure what you are doing-and ALWAYS back up your template before altering the HTML. I have a tutorial for that HERE.
If you're happy with your blog widths, you can play with the size of your photos in your blog posts to see about what sizes happen to work for you, it will probably differ for other people, but the best tip I have for you is fill the space width-wise as best as you can. For example, I currently use a 750px width as my widest photo in order to best utilize the space in my blog posts. I try to make all photos total up to that size so they line up nicely. I'll show you how to change that in a moment.
Once you're aware of what space you're working with, you'll want to choose which photos you want to use in your post. Whether they're photos from your Instagram, higher quality photos you took with a nice camera, something you created, or stock photos; you'll want to make sure they have the capability to fill the space you're working with. Most high-quality photos can easily be made to fit any space-but if a photo is too small you may want to consider using something different.
Uploading the photo can easily be done directly through most photo editors by clicking on the photo icon and choosing a method to upload. Once in there you can upload from your from your computer, drag and drop, choose something that was uploaded previously, enter the URL for the photo, etc.
For blogger simply click on the little picture icon in the editor bar along the top of your post:
For Wordpress, click on the Add Media button that typically shows between your title and post:
You can also use your HTML to add the photos. Instead of using the tool that is given to you in your editor, you can use some very simple HTML codes. The first thing you'll want to do is go into your HTML section (instead of the Compose section) and in the spot you want to put your photos in you can use some of these very basic codes:
If you want to insert an image that is not clickable, either to go anywhere or to show larger, use this code:
If you want to insert an image that does not link anywhere, but that opens up full size when someone clicks on it, use the following code. (This basically links the photo to itself.) If you want to link the photo to another page, use the same code but for the first url, put the web address of where you are linking the photo to.
Some blogging editors have a default sizes in pixels for width on horizontal photos or the height on vertical photos, for example the default sizes for Blogger are as follows:
To change the photo size, simply click on the photo and from the pop up below it will give you the options to choose from.
Uploading the photo can easily be done directly through most photo editors by clicking on the photo icon and choosing a method to upload. Once in there you can upload from your from your computer, drag and drop, choose something that was uploaded previously, enter the URL for the photo, etc.
For blogger simply click on the little picture icon in the editor bar along the top of your post:
For Wordpress, click on the Add Media button that typically shows between your title and post:
You can also use your HTML to add the photos. Instead of using the tool that is given to you in your editor, you can use some very simple HTML codes. The first thing you'll want to do is go into your HTML section (instead of the Compose section) and in the spot you want to put your photos in you can use some of these very basic codes:
If you want to insert an image that is not clickable, either to go anywhere or to show larger, use this code:
If you want to insert an image that does not link anywhere, but that opens up full size when someone clicks on it, use the following code. (This basically links the photo to itself.) If you want to link the photo to another page, use the same code but for the first url, put the web address of where you are linking the photo to.
Some blogging editors have a default sizes in pixels for width on horizontal photos or the height on vertical photos, for example the default sizes for Blogger are as follows:
- Extra Large: 640px
- Large: 400px
- Medium: 320px
- Small: 200px
To change the photo size, simply click on the photo and from the pop up below it will give you the options to choose from.
Here's an example of what it looks like. I've uploaded this horizontal photo four times. The actual photo is the same size all four times (I made these non-clickable), but using the selection method above I've changed it to each different size:
Most of the time the blogger defaults are going to work great for you, and typically the extra large size is going to work great for filling your space. However if your posts are slightly smaller, or slightly larger than the defaults you may need to manually edit the coding. Personally, I upload the photo first, select extra large, then I go in and alter the coding in the HTML section.
Here's the code as it shows normally for my first photo selected at Extra Large:
Since my optimal sizing is 750px wide, I go in and change the width to "750" and adjust the height accordingly. Make sure you change the height too or the photo may look weird and stretched out. I can eyeball it, but sometimes putting it into a photo editor and re-sizing the width there will show you what the height should be, and then you can input the most accurate number. Here's what my code and photo look like now:
Another great trick, and often a better one if you are concerned with storage space on your photo hosting service is to simply set the photo to the correct size you need before uploading, then tell blogger to just show it at it's Original Size when selecting the sizing. The only downfall to this is that it wont be able to be seen larger if it's clicked on.
Now you've got the sizing down, it's time to look into positioning photos. The first thing is your alignment. Clicking on the photo (see the example above in changing the size) will also give you the alignment options such as Left, Center, and Right. I typically think that left-aligned text with centered photos look best, but that's just my personal opinion.
You can also set the alignment with HTML too by using simple Center tags like this:
Or a more complex tag like this:
There are so many ways to position your photos, and it's super easy to do with wide photos when you just want them to fill the space, but then when it comes to vertical/square photos and putting them next to each other, it can get a bit tricky as you try to keep the widths lined up properly.
For example, when it comes to vertical photos do you want the width to fill like the wide ones do? Or do you want two vertical photos to show side by side? If you want it to fill, both the simple upload method and the HTML upload method work great-all you have to do is go in and alter the width of the vertical photo to match in the coding.
For example, if you simply upload it and set it to extra large it's not going to fill properly and may look kind of weird like this:
Here's how it looks when I take an extra couple of minutes to go in and adjust my sizing and alignment:
Here's what that code looks like:
If you want to put two photos side by side then typically the simple uploader is not going to allow them to sit right next to each other. But you can use that uploader and then grab the code from what it uploads to put into your own code, or host the photos somewhere else and just use the code. In this case, you'll want to break it down by sizing and whether your photos have spaces or not.
For this blog I don't have any spaces in between photos (my template doesn't even allow it) so I can simply take my 750px and divide to see how wide my photos need to be. For example, I know two photos next to each other have to be 375px wide each, or three next to each other have to be roughly 250px each to fit right. If you have spacing you'll want to accommodate your sizing to include those spaces. You can play with widths too-maybe one photo needs to be 370px and the next 380px just on how it fits, as long as they total up to match it's great!
Here's an example of what mine looks like with two next to each other:
Here's the code for that:
You can always play with sizing and setting things next to each other too. Sometimes I want a tall photo next to a short photo (tricky, but possible) like this:
So in this case, my code looks like this:
What do you think? Are you on your way to better looking photos?
What a super helpful post!
ReplyDeleteGreat post, although I may still be a bit confused for Blogger and putting photos right next to each other. Up until recently, I've always just made a table in Word and then copied and pasted it into the compose part of my blog post. Then I've put the pictures inside it. But once in awhile when I go to paste the table into my blog it will completely close out Firefox. I will be bookmarking this page so that I can come back and try your code out next time I need it! Thanks!
ReplyDeleteAh, I guess that would work! Things never quite translate correctly for me from Word though, so I just use the HTML to put them next to each other.
ReplyDeleteThank you! So glad you found it helpful!
ReplyDeleteWonderful tutorial for adding photos!!! I always had trouble with putting photos next to each other...but I'm on wordpress now so I will see if I can tackle it over there. ;)
ReplyDeleteI was going to say I hadn't tried it on Wordpress, but the blog I used to manage for a local animal rescue was wordpress and it totally worked with the HTML coding. :)
ReplyDeleteOh, awesome!!! I'll have to remember this next time I need side by side photos. :)
ReplyDeleteomggg that hair.
ReplyDeletehair goals!! :O
www.gorgeousandstuff.com