Working with images in articles

There are several ways to use images in your posts, each with their own pros & cons.

Working with inline images

The simplest way to use images in your article is to use an inline image. This is useful for news stories where the attached image is always in a set position on all pages - ie the top right hand corner of the article:

Inline image example

Firstly, you'll need to attach your image to the article you're working on. While editing the article, use the attachments dialog at the foot of the page to attach an image:

Attachments dialog

Deselect the 'list' tickbox once the image is attached:

Deselect link option

Of course, this step is optional, but by deselecting the 'list' option the default attachment link will be hidden when the article or page is read:

Default attachment link

Now simply add an 'inline tag' into your post. For example to insert the 1st attachment, enter:

[ inline:1 ]

or the 3rd attachment:

[ inline:3 ]

(remove the spaces either side of the brackets).

Inline images will always have a fixed style, a green border and they are 'floated' to the right of the text, which should flow around the image.

Inserting images with Markdown

If you need to insert your image in a specific place within your text (such as some of the images on this page), you can gain a little more control over positioning by inserting the image with a Markdown tag. Please read this help page on Markdown formatting first if you are unsure what this means.

  1. Firstly, attach your image to the post (see steps to achieve this above).
  2. Deselect the 'list' checkbox once the image is attached.
  3. Next, find the path to your image from the list of attached files. It will look something like http://www.rivertown.org.uk/files/help_img_assist_icon.png, but you will only need to use the part starting with files/, in this example the path to use would be files/help_img_assist_icon.png.
  4. Use Markdown syntax to insert your image:

    ![Image description](files/help_img_assist_icon.png)

The text between [ and ] is a caption and will be used as alternate text should the image be unable to be shown for some reason. The text between ( and ) is the path to the image you grabbed in the step above. The result:

Image description

More information on using Markdown to insert images can be found in the Markdown documentation.