Uploading and referencing the image source

All images need to be located on the Internet so that internet users can access them. This means that there must be some URL that will access the image. For example http://paulwhippconsulting.com.au/images/paul_whipp.gif. In practice this means that you either need to know where the image you want to know is already on the Internet.

By the way, the URL just points to the image so to see it you'd need to click on it like a normal link. To display the image within content it needs to be enclosed in an image tag such as <img src="/images/stories/key.jpg"> so the browser knows you want it presented as an image.

Image insertion can be expedited using one of the online editors like JoomlaFCK because it allows you to conveniently browse and pick or upload an image at the click of a button - usually article content images are stored under images\stories and its a good idea to keep to that practice when uploading. Once you've done this, you'll probably still want to check out the layout section below to get the image positioned nicely.

Positioning the image in the article

It is very easy to get into a mess when positioning images or text content in an article. Dealing with this fully would fill a book covering CSS (Cascading Style Sheets) in depth. However, for clean and simple presentation you can get away with just a little knowledge and some rules of thumb. Lets assume we're just going to worry about inline images (small things that will be treated as if they were a character or word in the text), images that are floated to the left so that the text flows down their right hand side and images that are floated to the right so that the text flows down their left hand side. This covers most cases. If you want something more complex, my advice is - forget about it. If you can't forget about it, get a book on CSS and start reading. In any event, here's my quick layout guide:

Rule 1: Let CSS do all the positioning work for you.

Ensure your site has some simple layout css for images. Your webmaster or graphics people should sort this out but here is what I use so that images can easily be blocked in with text and floated to the left or right:

 
img.left {
	margin-right: 10px;
	margin-bottom: 10px;
	float: left;
}
img.right {
	margin-left: 10px;
	margin-bottom: 10px;
	float: right;
}

  div.encloseFloats:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

<!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>

  div.encloseFloats {
    zoom: 1;     /* triggers hasLayout */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
<![endif]-->
 

When your image tag is inserted, whether you've done it yourself or used an editor to do it, go to the html code where you can see your 'image tag' -
<img src="/images/stories/key.jpg">
Make sure that it is positioned where you want it in the flow of the text. If your goal is to have text appear alongside it (to the right or left), position the image BEFORE the text. This is true whichever side you want the text to appear on. For an inline image, just include it in the flow of the text like this [smiley inline] and remember you can always edit this article to look at the html code if you want to.

Once your image tag is in place, add either class="left" or class ="right" like this -
<img class="left" src="/images/stories/key.jpg" />
<img class="right" src="/images/stories/clock.jpg" />
to get the desired result.

Often, you will get irritated by the way that the text flows on the page. It might not break up the way you want it to and there will be an immediate temptation to add in <br /> or <p>&nbsp;</p> (possibly just by hitting the enter key if you have a 'friendly' editor) to move the text down the page and get it to flow how you want it to. This will not work. It might look great in the editor but html is a stream of information presented at all sorts of different widths and on all sorts of different clients so different amounts of text are going to appear on different lines. That is why you need to remember another very important rule:

I'm to the left of the image but text after the division will be under it.