Spacing Your Blog Images Tutorial
October 6th, 2011 | 
Author: Hi everyone! As I was going through the various Branding Challenge Participants’ websites, I noticed a common problem that’s a small thing – but something I can show you a tip on that will make your blog look a teeny bit better.
It’s really not a BIG deal, but it’s nice to know.
Here’s a video on it (less than 5 minutes):
Enjoy!
Tiff 
Share and Enjoy
Posted in Career
Very simple fix but not many people realize that or how to WordPress is easy once you know it. Another thing I see a lot of is what I call the image leak. This is where the images are click-able and leads to no where sending your visitor off of your page. That is a major pet peave of mines. So perhaps you can show your readers how to fix that as well.
Yes I always forget to do that too. LOL
Thanks, I never knew how to add that space!
I didn’t either until someone pointed it out to me – probably Craig lol
Hi Tiffany:
Great Post. I see so many blog posts exactly as you described, with the text up next to the picture. By simply doing what you are showing today, it makes the post look so clean and also brings the text up towards the top of the fold. Great Tip Today.
PS:
Hope to see more videos soon of HONEY. She is sooooo cute!!!
Yes Sam I’m going to make one of Honey and my Mom’s dog Desiree – we’re baby sitting her this week and they’re funny together!
That is so simple. Just never one of those things I took the time to figure out. I knew there must have been a way, but it was way down on my list of technical issues to figure out. lol!
Thanks, Tiff
You’re welcome Dianne
Great tip Tiffany!
Another one is to properly size your image before posting it.
If you post a huge image and then let WordPress reduce the size of the image with the options – Thumbnail, Medium or Large then it adds load time and after awhile, all those huge images will slow your sites load time to a crawl.
@Brenda…
I agree with you on this one but will have a little fun with it sometimes.
Instead of removing the link, sometimes I’ll replace it with a surprise download of a product that is related to the topic of the post.
For those people that actually click on my images, you can bet that they will be regular visitors and click on every image they come across on my sites.
- Steve Dougherty
I like the idea of having a surprise bonus download linked to a picture. Thanks for the idea!
Linda Pogue
What a fantastic idea Steve. Thanks, I’ll implement that on some of my images.
Tiff I couldn’t get the video to play but I’m aware of that tip. I’m not sure what you suggested but I use 10px.
Hi Steve
How do you size the image? I usually upload my image and then choose the size from the options.
Thanks
I use MarsEdit for writing blog posts and pages, and I’ve changed the settings for the “left align” and “right align” functions so that it automatically puts in a space.
Saves me a lot of time
(Yeah, I’m lazy, I know.)
Hey Tiff
I wanted to view your tip but
when I got here it said:
Sorry
The creator of this video has not given you permission to embed it on this domain. This is a Vimeo Plus feature.
vimeo
Do you have a youtube presentation?
I sometimes find Vimeo a little restrictive.
Thanks
Weird Jack – hey is anyone else having this problem? I have it set to allow embedding on MY domain only
YT shut down my account because one of my titles said “make money on Squidoo.” lol
Hi Tiff. The video has gone completely. Just not there at all and as I use WordPress, I was really looking forward to this one.
Oh no not sure why – does it say anything?
Nothing at all. There is only a large,
blank unlinked space.
PS. Thanks for the PLR course. It’s going well. Meant to thank you lots earlier. R.
Now? I tried changing settings.
The video is working fine here – thanks Tiff, I keep forgetting that settings is there!
Nope. No luck as yet.
hmmm okay I need to see if anyone else can see it or if it’s a browser issue. lol
I can get the video using Opera but not Firefox. Maybe it’s my settings but they look OK. Anyway it’s here now and thanks. Rob.
Tiffany, That is some great stuff. I like my photo big and centered – but that is just because everyone does right or left – so I want to be unique.
That being said – it is great to know how to add th space etc. Thanks for the tips!
Thanks for the pointer on the image. I dropped my image a couple of lines and the text is wrapping around 3 sides of the image and a border. http://is.gd/3krcm3 Thoughts?
PERFECT now!
FYI, I had no issues viewing the video here.
Great tip to help those that were not aware of this before. Something I like to do too is add in some custom CSS for my theme to add a little border effect around my images.
One more bonus SEO tip, be sure to utilize the title and alternate text of your images. This can be a great way to grab additional traffic as people find your site via the images, and then stick around for awhile to read your content.
Hi Tiff,
Hope you don’t mind me taking this opportunity to say thank you to you and other Branders for visiting my site and providing me come feedback. It has been extremely useful.
Following your own critque, one point that really needs to be highlighted from the very beginning is: “If a stranger visited your site what words would they use to describe the information they find and are these the same three words that you had in mind?”
I mention this because you commented that my site looked like a marketing site which was completely the wrong message I wanted to send out. Of course I could see how you could get that from the recent posts that were there. These have now been moved. I have a dedicated money making activities site but I was trying to combine all my interests on one blog – Result – Mixed Message and Mixed signals.
I would suggest that everyone take a look at their own site and try to look at it through the eyes of a stranger.
It would be even better if more people could head over and take a look at each others sites and leave feedback. Feedback for the About Page is great but you have to be sure that the themes described on that page filter through the rest of the posts on your blog.
The biggest point that everyone needs to remember is that nothing is set in stone. Pages, posts, your promise,your message – these can be amended whenever you feel there is a need. So don’t worry about it. Adding, removing, amending and adjusting helps to make your site before so don’t be afraid to just do it.:)
Thank you.
Ps:
Nathan from PLR Express – thank you for the help with the technical problem I had with wordpress – All fixed.
Issia Jordan – thank you for your feedback too. The About Page has been jiggles and amended.
Tiptopcat
Right on the nose, Victoria!
That’s great Tiptopcat!
I think that one of the best parts of this challenge is that everyone can take a look at what everyone else is getting up to and we can learn from each other.
PS. I’m glad that I could help with your minor technical problem.
Just viewed it using Firefox at 5pm Central time and didn’t have a bit of trouble. Didn’t know there was a problem until I started reading the comments. Great information.
Thanks!
I can’t see the video
Tony some aid they updated their browser and then it worked.
Hi, Tiffany,
I have been using the HTML to post my pictures in my WordPress blog. Guess it is time to delve deeper into what is available in WP, and stop some of the hand coding. It will definitely save time.
Thanks for the insight!
Linda
Oh yeah that sounds scary!
Hi Tiffany;
This is a great and simple fix. Thank you. I went right to my site to try it out. No trouble following your instructions. In the visual view on my WordPress site the images looked great but when I go to view the post they are still floating with out the words around them. Any suggestions? (I did update the post)
You refreshed your browser?
THANK YOU! I was trying to figure that one out and hadn’t yet so I’m glad you showed us how. I appreciate the info big time! I experimented and put it to use in my blog post -INSIDE the text in 2 places and even added a border!
PS here’s the link if you wanna check it out. It’s about Steve Jobs.
http://bwellmanblog.com/steve-jobs-the-fear-he-left-behind/
Thanks for the pointers Tiff! That’s why I like taking your course – you can see a problem and show us an easy fix.
~B~
Great! Glad it helped
Using win 7 and chrome in the philippines and no problem viewing the video.
Many thanks Tiffany as mine is a problem site….will fix now
I never think to go over and do that to fix the pictures. Thank you for letting us know this fix.
Hi Tiffany,
Thanks for more great info! I never knew about the advanced settings…that will be a big help!
Karla
Great glad it helps!
Hey Tiff,
Nice tip.
If you wanted to save yourself time and not have to do that EVERY time you add an image to a post, you can add the margin to your stylesheet (usually the file named “style.css” in your WordPress theme) very simply like this:
.alignleft {float:left; margin:0px 15px 15px 0;}
You can do the same for the class “alignright”.
.alignright {float:left; margin:0px 15px 15px 0;}
This way, you can also precisely control the 4 sides so in my example above, you don’t have ANY space on top or on the left, but 15 pixels on the right and the bottom (the order of the margins are top, right, bottom, left)
More control + save time by only doing it once.
***Not sure if that code example will get stripped in the comment or not. If so, hit me up. lol
ACK! Runs off to bury head in the sand… LOL! Thans for showing everyone else Jay – I’m scared of messing w/my code.
You’re always giving advice to face your fears, Tiff….that goes for CSS too!! lol
just buggin’….
But editing your CSS really isn’t scary and it’s pretty easy to “undo” if you mess up.
LOL I know it’s one of those things where if i have a frankentiff easy way to do it, I’ll do it. Normally I only learn things I HAVE to if they scare me that bad. lol
Hi Tiffany,
excellent, i haven’t even think about this, really i feel happy by you to know a secret of WordPress Blog. such a informative one.
I wanna tell you one thing that previously i entered one word in edit image place. while adding this line in my image its not coming in proper way as you guided. When i removed the name, it placed in proper space.
Did i do anything wrong in basic setting in did image option, thats the reason it not placing in proper expected space. I don know but now i got the expected result as you explained in this video. thank you ….
uh oh I don’t know about that! lol Don’t confuse me
I only know the very basics. But maybe someone here can help!
Hi tiff
Wow – it was great to learn how to do the spacing, but I noticed on the video there is a tick box so that the picture opens in another window – yeahy, I know what the html is but could never get it to work so just used to leave the images. So busy night adding URLs, spaces and ticking the box!
Love Steve’s idea of a free download if you click the image.
Thank you Tiffan!
Easy fix once you see it done. I kept trying to resize the image, with the text still running into it. I was un-aware of the spacing function until now.
Thanks Again
Bob
Same here Tiffany the video is blank. By the way i notice the comments about WordPress. I got the book WordPress for dummies. Well i must be one because i still struggle!
Hi Tiffany
I was the first one to notice the video
disappearing in your post. I was using
Firefox 3.6 and it didn’t show up.
I then did the unthinkable and used IE 8.
It worked. I think now I’ve found a
use for Explorer!
Thank you for this tip, and all the various others you share with us Tiffany! Have a good weekend.
Love the new picture!
Hi Tffany,
Great tip! This was something that had been bugging me!
And thanks for picking (on) me!
This worked great for this wordpress site
http://ematthewshelton.com/about-e-matthew-shelton/ – had to keep doubleclicking on the existing picture (in edit mode) to make the dialogue box pop up and then no probs from there.
However, the about page of mine in your video is an XSite Pro site and in case anyone is using XSite Pro here’s what I had to do:
right click image/properties/text align – top/horizontal – left; space horizontal 5, vertical 5.
This gives me pretty good word wrapping – doesn’t go all the way to the top of the edge of the image, but a huge improvement anyway –
compare the results to Tiffanys’ video if you’d like: http://matthewshelton.com/about_Matthew_Shelton.html
Thanks again! Matthew
perfecto!
Hi Tiffany,
I wish I had found this earlier – you have no idea how long I have struggled to get this right.
Not only does it look cleaner, but so much more professional !
Thanks so much
Barbara