Content Markup: Images
Adding the following to a page's content will place an image in the page.
[image="1"]
The ID number of the image you want to use can be found in the Picture Manager. (Click 'Pictures' button in the Admin Bar).
The Image will align to the left of the page. It will appear in the frame style that is set as the default for the site, and will automatically have a caption. Any text following the image will flow around the picture.
[image="1"]This would be a paragraph of text containing an inline image.
lobogo
This would be a paragraph of text containing an inline image.
Alternatively, placing the image at the end of a block of text will cause the image to align to the right, letting the text flow around it on the left.
This would be a paragraph of text containing an inline image on the right.[image="1"]
lobogo
This would be a paragraph of text containing an inline image on the right.
(If you've got a stubborn image that is refusing to align right, see the When Images Won't Align Right page)
Image Alignment
You can make an image appear in the centre of your page using the following:
[image="1" align="center"]
Each centered image appears on a line of its own. Preceding and following text will not flow around the centered image.
Images as Links
By default, when you add an image to your page content it'll automatically become a link to a larger version of itself. If you'd like an image to act as a link to somewhere else, you can use the following:
[image="1" link="2"]
n.b; see Picture Manager guide for information on the default behaviour of image-links.
Image Captions
Confusingly, an image can also have a caption override; each picture in your library has a default caption that you can set in the Picture Manager. Occasionally you may want to use a picture in an entirely different context that requires an entirely different caption. In which case:
[image="1" caption="use this caption instead"]
Different sized images:
By default, weblobe will use a version of your image that has been sized to fit 'inline' with your text. You can override this behaviour, by using either of the the following:
[largeimage="1"]
makes a larger, full column-width image (scaled down somewhat for demonstration purposes; large images are normally the full width of your page's main content area),
-or-
[tnimage="1"]
uses the smaller thumbnail version of the image.
-or-
[icon="1"]
uses a tiny, tiny version of an image, even smaller than the thumbnail.
Making an Image Downloadable
If you want users to be able to download a large version of an image (for instance a print-resolution image for press use) you can use the following:
[imagedownload="1"]
This will display a thumbnail-sized version of the image which users can click on to download the full-size original image.
It's also a good idea to put a caption in to tell users that this is a downloadable image:
[imagedownload="1" caption="click to download a high-resolution version of this image"]
