SimpleWiki examples

Table of Contents

Images

Images

view source markup

posted November 21, 2009

Images are inline markup.

Image Markup

Image markup is similar to link markup, except it uses curly braces rather than square brackets. The basic format for images is {{imageurl | caption | title }}. The caption becomes the alt attribute of the img html element, and shows up if the picture file is not found by the browser. The title shows up as a popup when the user floats the mouse over the image. So {{http://www.celos.ca/wiki/uploads/Issues/Kidscobbing2.jpg | Kids cobbing | Part of the work of building the cob playground}} results in this (try floating the mouse over the image to see the popup text):

Putting a frame around a picture

Kids cobbing

As a special case, you can add an image frame decorator to the beginning of the picture, which will result in the image floating, and the image caption being used for the picture caption. So
%i rframe%{{http://www.celos.ca/wiki/uploads /Issues/Kidscobbing2.jpg | Kids cobbing | Part of the work of building the cob playground}} results in the image at the right. Note the "i" for "image" in the decorator.

You can make the frame float left or right by using the lframe or rframe decorators.

To just float a picture, use the decorators %i float:left% or
%i float:right%

Including a Link in the picture caption

Kids cobbing. See Dufferin Park Website
for more information.

You can include link markup in the picture caption. So

%i lframe%{{http://www.celos.ca/wiki/uploads
/Issues/Kidscobbing2.jpg | Kids cobbing. See
%l newwin%[[http://dufferinpark.ca | Dufferin Park Website]]\ for more information. | Part of the work of building the cob playground}}

gives the image at the left.

Note the line break markup (\) before "for more information." to break the line size to fit the picture.

Making both the caption and the image a live link

|:p nop:|
Kids cobbing. See Dufferin Park Website
for more information.

To make both the image and the link clickable, use this markup:

 (:div rframe:)

 |:p nop:|
 
 ``%l newwin%
 ``[[http://dufferinpark.ca 
 ``|{{http://www.celos.ca/wiki/uploads/Issues/
 ``Kidscobbing2.jpg 
 ``|Kidscobbing2.jpg
 ``|Part of the work of building the cob playground}}]]
 
 ``\\%s smaller%Kids cobbing. See 
 ``%l newwin%
 ``[[http://dufferinpark.ca 
 ``| Dufferin Park Website]]
 ``\\ for more information.

 (:divend:)

So working from the outside in:

Create a (:div:)...(:divend:) block with the "rframe" (or "lframe") decorator to create the floating block
place a |:p nop:| decorator at the beginning of the next line, to prevent unwanted paragraph element generation (thus preventing an unwanted trailing margin under the caption)
create a link, with the image link as the caption
within the image link, create a title for the popup text (optional), and no caption (the url address will be assigned to the img alt attribute in case the picture is not found by the browser)
add line break markup (\) after the outer link to start the visible caption on the next line
add the visible caption, including a separate link there.

Note that the (:div ...:), (:divend:) and |:p nop:| markups have to be physically at the beginning of their lines in the source text.

In practice you can just copy the markup above and change bits of it to suit your needs.

Alternate looks

Skating

For a different look you can use the imagebox div class to surround the image (see right). This is written as:

(:div imagebox-right:)
{{http://celos.ca/wiki/uploads/CELOS/skating.jpg | 
Skating | Skating at dufferin rink}}\Skating
(:divend:)

Or you can apply style classes directly to images:

These images are written as (in order)

%i image-bordered-left%
{{http://celos.ca/wiki/uploads/CELOS/skating.jpg | Skating | 
Skating at dufferin rink}}

%i shadow-outer%
{{http://celos.ca/wiki/uploads/CELOS/skating.jpg | Skating | 
Skating at dufferin rink}}

%i shadow-inner%
{{http://celos.ca/wiki/uploads/CELOS/skating.jpg | Skating | 
Skating at dufferin rink}}

Skating...

Or of course you can apply arbitrary styles directly to the image, as at the right.

The markup: