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:

Image Description
Image Caption


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:

Royal Institution
Royal Institution

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:

Royal Institution
Royal Institution

Border around caption#

[{Image src='Image.jpg' caption='Image caption' alt='Image description' cstyle='border: Integer px solid;'}]

Example:

Image description
Royal Institution

Image Alignment#

Centered#

[{Image src='Image.jpg' caption='Image Caption' alt='Image description' align='center'}]

Example:

Image description
Royal Institution

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:

Bildbeschreibung
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

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:

Description
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

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 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:

Description

Image borders in "INFO-COMM" design#

[{Image src='Image.jpg' alt='Description' class='coolborder'}]

Beispiel:

Description

Align image to the left#

%%(float:left)
[{Image src='Image.jpg' alt='Description' class='coolborder'}]
%%

Example:

Description
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

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:

Description
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

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.

Imprint Privacy policy « This page (revision-15) was last updated on Thursday, 13. January 2011, 14:24 by Kaiser Dana
  • operated by