Image Options

This tutorial covers the various additional options that can be used when displaying JPEG, GIF and PNG files...

Alignment (Position)

To change the alignment of an image (ie. where it appears on the page), use the alignment setting:

!toddler.png|align=left!

The following table shows examples of various alignments and also their effect on surrounding content:

Alignment Setting	Example
top	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est.
bottom	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est.
middle	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est.
absmiddle 1	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est.
left	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est.
right	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est.
center	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est.

Note: To make the rest of this tutorial look nice, we're going to center the remaining images.

Border

Place a border of specified pixel width around your image as follows:

!supp_school.png|border=1,align=center! !supp_school.png|border=5,align=center!

Resulting in:

The border will be black (#00000) and solud by default, but you can change it with CSS, using the style macro and span macro for example:

{style}
.myimage img {
 border-color: red;
 border-style: dashed;
{style}

{span:class=myimage}!supp_school.png|border=1,align=center!{span}

Which gives:

Spacing (Margins)

Sometimes it's desirable to have a gap between the edge of an image and the surrounding content. There are two settings which can be used on their own or together as illustrated in the examples below:

!supp_school.png|vspace=20!

!supp_school.png|hspace=20!

!supp_school.png|vspace=20,hspace=20!

Thumbnail Display

Images have a special setting that will display a thumbnail of the image as shown below:

!gallery macro^kit.gif|thumbnail,align=center!

Which results in:

The size of the image is determined by settings in the General Configuration section of the Administration Console. You can click thumbnail images to show the full-size image in a pop-up window.

You can also display a thumbnail gallery of images attached to a page using the gallery macro.

Size (Width and Height)

You can stretch or shrink an image in several ways. For example, if you only specify the width or height (not both), then the image as a whole will be scaled up or down:

!supp_school.png|width=100px,align=center!

!supp_school.png|height=40px,align=center!

If you specify both a width and height, then the image can be distorted:

!supp_school.png|height=40px,width=100px,align=center!

It's also possible to set the size of the image based on a percentage of the area that contains it (usually the page), for example:

!supp_school.png|width=50%,align=center!

If you do the same within a table cell, the image will obviously be smaller: