Inserting Images#
To insert an image on a page there are 2 possible ways:
1) The easiest way to upload an image is to edit the appropriate page by clicking on the "Edit" link in the upper right corner. In the toolbar now shown you will see an "Upload!" button. Click on this button and select the image you'd like to upload. This will insert the following line:
[{Image src='Image.jpg' caption='Image Caption' alt='Image Description'}]
in the Wiki page at the current cursor posititon. After saving the page you will see your image within the page.
OR
2) Second way is to first upload the image via the "Attach" link in the left corner. Afterwards edit the page (by clicking on the "Edit" link) and insert the code
[{Image src='Image.jpg' caption='Image Caption' alt='Image Description'}]
by hand. Please make sure that the name given as 'src' corresponds to the name of the uploaded image.
Image name#
Please choose a useful name for your images. You can also write a caption below the image.[{Image src='Image.jpg' caption='Image Caption' alt='Image Description'}]
The 'alt' text is shown when moving the mouse cursor over the image. It is also shown as text alternative if the browser used is not capable of displaying images.
Example:
Following parameters can be added optionally:
Image size#
Image size can be specified with the 'width' and 'height' parameter.
[{Image src='Image.jpg' caption='Image Caption' alt='Image Description' width='100' height='100'}]
Attention: It is sufficient to specify either width or height. The missing parameter will be added when the page is saved.
Example:
Specifying the parameter 'popup=true' results in opening a popup with the image in original size.
[{Image src='Image.jpg' caption='Image Caption' alt='Image Description' width='100' height='100' popup='true'}]
Example:
Border around caption#
[{Image src='Image.jpg' caption='Image caption' alt='Image description' cstyle='border: Integer px solid;'}]
Example:
Image Alignment#
Centered#
[{Image src='Image.jpg' caption='Image Caption' alt='Image description' align='center'}]
Example:
Image Border#
[{Image src='Image.jpg' alt='Description' border='1 px'}]
Example:
The image was surrounded with a border of 3 pixel.
Image floated by text#
left#
[{Image src='Image.jpg' alt='Description' class='image_left'}]
Example:
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
right#
[{Image src='Image.jpg' alt='Description' class='image_right'}]
Example:
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Image as a Link#
[{Image src='Image.jpg' alt='Description' link ='Acad_Main/Help'}]
Clicking on the image now results in opening the specified url in the same window.
Example:
Image borders in "INFO-COMM" design#
[{Image src='Image.jpg' alt='Description' class='coolborder'}]
Beispiel:
Align image to the left#
%%(float:left)
[{Image src='Image.jpg' alt='Description' class='coolborder'}]
%%
Example:
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Align image to the right#
%%(float:right)
[{Image src='Image.jpg' alt='Description' class='coolborder'}]
%%
Example:
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
