If you combine the Basic - top or Basic - bottom modes with the Align images vertically option, for more than one image, you obtain 16 completely different layouts.

A lot of layouts but you cannot post, using the basic mode, the following page:

  This is how an elephant looks like:

  <!-- an image with an elephant: elephant.jpg -->

  This is how a monkey looks like:

  <!-- an image with a monkey: monkey.jpg -->

  This is how a giraffe looks like:

  <!-- an image with a giraffe: giraffe.jpg -->

For that you must select the Advanced - [img:xx] tags option and insert few special, but very simple, tags into your post.

1) The first syntax - [img:number]

We are lazy guys. This will be our favorite.

Suppose that the elephant.jpg, monkey.jpg and giraffe.jpg images are uploaded already and they appear in this order in the file uploads list.

You must simply insert [img:1] for the first uploaded image (elephant.jpg), [img:2] for the second (monkey.jpg) and [img:3] for the third one (giraffe.jpg).

  This is how an elephant looks like:

  [img:1]

  This is how a monkey looks like:

  [img:2]

  This is how a giraffe looks like:

  [img:3]

Easy, isn't it?

There is just one small problem. If someone changes the files order in the file uploads list (accidentally or not) your visitors could see a monkey instead of the elephant, a giraffe instead of the monkey. Ops!

To avoid this, use the second syntax.

2) The second syntax - [img:filename]

You observed well. Instead of numbers filenames could be used.

  This is how an elephant looks like:

  [img:elephant.jpg]

  This is how a monkey looks like:

  [img:monkey.jpg]

  This is how a giraffe looks like:

  [img:giraffe.jpg]

Not so easy, but works.

3) Full syntax - [img:xx align=yy title=zz]

  • The xx is described above
  • yy's possible values: left, float_left, center, right or float_right
  • zz's possible values: top, bottom or none

align and title are optional. If omitted , the img module's node level settings are used.

See the advanced mode in action.