Image tags

type=imageSource and type=imageTarget

When the user right-clicks on the SOURCE tag the "film strip" will pop up to allow the user to select one of their images.

The user will not be able to resize the image as in a freestyle section. If you wish to make the image fit a given width and/or height, set the width and/or height parameters in the <img> tag as normal. The aspect ratio of the original image will be retained so that the image will fit within the box defined by the img tag dimensions.

The image will not be properly resized until the site is published. The same image can be used in a number of different sections at different sizes.

Example:
<si5 type=imageSource id=img1>
<img src="<si5 type=imageTarget id=img1>" width=100 height=200>

In this example if a 200x300 image were to be selected by the user, the resultant image would be 100x150.

Note: make sure that there are no other <si5> tags between the imageTarget tag and the width/height parameters

Making a "click to enlarge" template

If there are many images on a page it is often useful to provide thumbnails. When the user clicks on a thumbnail, a larger image is shown in a new window. This can be achieved using the following code:

<si5 type=imageSource id=img1>
<a href="<si5 type=imagetarget id=img1>" width=600 height=600 target=large>
<img alt="Click for a bigger picture" src="<si5 type=imageTarget id=img1>" width=80 height=80>
</a>

Here we put the maximum dimensions for the larger image in the <a> tag and the maximum dimensions for the thumbnail in the <img> tag. Two resized images will be generated when the site is published. Note that in the designer the maximum size of the larger image will be 300 pixels wide.