Blog2Life » How To Style Post Images

How To Style Post Images - Part 1

3rd June 2008

For those that blog regularly but have very limited skills on coding it can be hard to stylise elements within your blog posts and it can become apparent that features such as images, and div’s just don’t seem to fit in with the post and generally look unpleasant.. but we’re here to change all that!

For the vast majority this will mainly just apply to images, as images are an integral part of blogging and can be an invaluable device in promotion, and tutorials and they help break up vast sections of text to keep a reader entertained.

But over the last few years I have noticed so many bloggers do not apply any styling to elements within their posts which leaves the post looking very plain, boring, awkward to read and like they don’t really take an interest of how the post is shown to you as a reader.

Common Mistakes

What follows is a list of common mistakes found all over the blogshpere when it comes to image styling and of those that are covered an easy step by step guide of how to fix them get get your images looking nice. I recommend reading the whole article and viewing all the examples as each step will further improve the look of images within your post. Also example 2 takes off from where example 1 finishes..

Example 1

An example of a image placed within or before a block of text that contains no image styling at all.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel felis eget pede pharetra iaculis. Pellentesque neque. Nunc lobortis. Nam lorem turpis, interdum et, porta ut, vulputate eu, pede. Curabitur augue. Quisque malesuada luctus tellus. Mauris non nisl sit amet pede adipiscing faucibus. Cras hendrerit. Sed convallis leo ac tellus porta ullamcorper. Suspendisse placerat consectetuer risus. Morbi viverra.

Solution

This occurs when an image is added to a setion of text without floating or aligning the image. This results in a single line of text being displayed in line with the bottom of the image and the rest of the text occurring under the image.

To over come this problem the images needs to be specified a side to sit on. Doing this will then tell the web browser to place the text around the image. To fix the problem all that needs to be done is the following…

1. Find the image code

<img src=”http://www.blog2life.net/wp-content/uploads/2008/06/image.png”/>

2. Add the following somewhere in the brackets (< >) but after the “img”

Use the corresponding style based on what side you want you image to appear on..

style=”float:left;”

style=”float:right;”

You should now see something that looks like the following (but note the order in which objects [alt="", style="", etc..] within the code appear does not matter, as long as they are there the image will function fine no matter what the order). Also if your image does not display the alt=”" style then add this to your image to make it fit with css standards.

<img src=”your-image-url” style=”float:left;” alt=”My Brilliant Image”>

Note: The Style=”" command may arleady exist within the code for the image as stated above. If this is the case just add the code to the end of what is in the “”, like so..

style=”margin:5px; float:left;“

Result

Floating Left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel felis eget pede pharetra iaculis. Pellentesque neque. Nunc lobortis. Nam lorem turpis, interdum et, porta ut, vulputate eu, pede. Curabitur augue. Quisque malesuada luctus tellus. Mauris non nisl sit amet pede adipiscing faucibus. Cras hendrerit. Cras hendrerit. Sed convallis leo ac tellus porta ullamcorper.

Floating Right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel felis eget pede pharetra iaculis. Pellentesque neque. Nunc lobortis. Nam lorem turpis, interdum et, porta ut, vulputate eu, pede. Curabitur augue. Quisque malesuada luctus tellus. Mauris non nisl sit amet pede adipiscing faucibus. Cras hendrerit.Cras hendrerit. Sed convallis leo ac tellus porta ullamcorper.

Example 2

Now that you are wrapping the text around the image it is time to add a small margin to your image to stop the text actually touching the image. By doing this you can make your post images look and feel like they fit into your post perfectly

Solution

Following on from Example 1 extra styling info needs to be added into what we have currently.

This time we are going to tell the browser that the image has a margin and this will create a small gap around the image based on how big you want the gap to be.

1. Locate your image code and then locate the style=”" brackets once more

2. Now add the following inside the “”

margin:8px;

This should leave you with something like the following

style=”float:left; magrin:8px;”

Note: For those wanting to further adjust the gap to fit with your own website layout any number can be used (provided it is a reasonable number) just remember that the gap is added to all sides of the image.

8px is a standard size margin that I commonly use here at blog2life.net

Result

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel felis eget pede pharetra iaculis. Pellentesque neque. Nunc lobortis. Nam lorem turpis, interdum et, porta ut, vulputate eu, pede. Curabitur augue. Quisque malesuada luctus tellus. Mauris non nisl sit amet pede adipiscing faucibus. Cras hendrerit. Cras hendrerit. Sed convallis leo ac tellus porta ullamcorper.

Final Word

These little styling techniques are very handy and commnly used on blogs to help give the site that little extra professionalism.

We hope this will help you to improve the look of your blog and if we have missed anything do tell us.

If you’re feeling confident with what we have covered so far why not head on to Part 2 for slightly more advanced but more effecient way of coding the styles

Wyvernoid

Hehe, a strategy I frequently use when organizing articles. But anyway, it’s an awesome guide that can be very helpful for those webpage newbies =P Looking forward to Part 2!