Posted by Peter-ZA on 03 Jun 2012 21:57, last edited by
Peter-ZA on 15 Aug 2015 23:23
Tags:
This is a test-page about our Images link syntax
This should serve as a guideline for various possible options, to simplify the use for beginners.
Table of Contents
|
Entry Level:
SIMPLE
Simple straight forward link
Picture must be loaded up to the current page !
[[image Test-Picture.png]]

Display Size = 100%
Simple straight forward link (LEFT)
Picture must be loaded up to the current page !
[[<image Test-Picture.png]]

Display Size = 100%
Simple straight forward link (CENTRED)
Picture must be loaded up to the current page !
[[=image Test-Picture.png]]

Display Size = 100%
Simple straight forward link (RIGHT)
Picture must be loaded up to the current page !
[[>image Test-Picture.png]]

Display Size = 100%
COMBINED Display
Combined picture links (3 pictures)
Picture must be loaded up to the current page !
[[image Test-Picture.png]] [[image Test-Picture.png]] [[image Test-Picture.png]]



Display Size = 100%
Combined picture links (3 pictures LEFT, CENTRE, RIGHT)
Picture must be loaded up to the current page !
[[<image Test-Picture.png]] [[=image Test-Picture.png]] [[>image Test-Picture.png]]



Display Size = 100%
Combined picture links (3 pictures CENTRED)
Picture must be loaded up to the current page !
[[=image Test-Picture.png]] [[=image Test-Picture.png]] [[=image Test-Picture.png]]



Display Size = 100%
Combined picture links (3 pictures,CENTERED BLOCK)
Picture must be loaded up to the current page !
[[=]]
[[image Test-Picture.png]] [[image Test-Picture.png]] [[image Test-Picture.png]]
[[/=]]



Display Size = 100%
FLOATING
Combined picture links (3 pictures LEFT, CENTRE, RIGHT - floating L & R)
Picture must be loaded up to the current page !
[[f<image Test-Picture.png]] [[=image Test-Picture.png]] [[f>image Test-Picture.png]]



Display Size = 100% — Where has the RIGHT picture dropped too? - Why???
Combined picture links (3 pictures LEFT, RIGHT, CENTRE - floating L & R)
Picture must be loaded up to the current page !
[[f<image Test-Picture.png]] [[f>image Test-Picture.png]] [[=image Test-Picture.png]]



Display Size = 100% — A simple trick has aligned the pictures correctly again! - Why is that?
Specified SIZE (Width & Height)
Simple picture link with WIDTH specified
[[image Test-Picture.png width="400px"]]

Resized: Width = 400 pixel
Simple picture link with HEIGHT specified
[[image Test-Picture.png height="100px"]]

Resized: Height = 100 pixel
Specified SIZE (preset size, SMALL file)
Simple picture link with SIZE square specified
[[image Test-Picture.png size="square"]]

Resized: Size = 75x75 pixel
Simple picture link with SIZE thumbnail specified
[[image Test-Picture.png size="thumbnail"]]

Resized: Longest side = 100 pixel
Simple picture link with SIZE small specified
[[image Test-Picture.png size="small"]]

Resized: Longest side = 240 pixel
Simple picture link with SIZE medium specified
[[image Test-Picture.png size="medium"]]

Resized: Longest side = 500 pixel
Simple picture link with SIZE medium640 specified
[[image Test-Picture.png size="medium640"]]

Resized: Longest side = 640 pixel
Simple picture link with SIZE large specified
[[image Test-Picture.png size="large"]]

Resized: Longest side = 1024 pixel
Specified SIZE (preset size, LARGE file)
Simple picture link with SIZE square specified
[[image Test-Picture-L.jpg size="square"]]

Resized: Size = 75x75 pixel
Simple picture link with SIZE thumbnail specified
[[image Test-Picture-L.jpg size="thumbnail"]]

Resized: Longest side = 100 pixel
Simple picture link with SIZE small specified
[[image Test-Picture-L.jpg size="small"]]

Resized: Longest side = 240 pixel
Simple picture link with SIZE medium specified
[[image Test-Picture-L.jpg size="medium"]]

Resized: Longest side = 500 pixel
Simple picture link with SIZE medium640 specified
[[image Test-Picture-L.jpg size="medium640"]]

Resized: Longest side = 640 pixel
Simple picture link with SIZE large specified
[[image Test-Picture-L.jpg size="large"]]

Resized: Longest side = 1024 pixel
Intermediate:
Picture link, where the picture is actually loaded on a different page (but in same wiki site)
Picture link with WIDTH specified
[[image /picture-links/Test-Picture.png width="50px"]]

Resized: Width = 50 pixel
Picture link, where the picture is actually loaded on a different page (but on a different wikidot.com wiki site)
Simple picture link with WIDTH specified
Which is the correct SYNTAX, please … ?
This is the only working link from the "info" menu of the file - listing
[[image http://geopathology-za.wikidot.com/local--files/start/WARNING.jpg width="100px"]]

Resized: Width = 100 pixel
Advanced:
Picture link, where the picture is actually loaded on a different wikidot.com wiki site
Picture link with WIDTH and ALTernative TEXT specified
[[image /picture-links/Test-Picture.png width="50px" alt="TEST Text"]]

Resized: Width = 50 pixel
Picture link with WIDTH and TITLE TEXT specified
[[image /picture-links/Test-Picture.png width="50px" title="TEST Text"]]

Resized: Width = 50 pixel
Picture link to picture from another file/page with WIDTH and TITLE TEXT specified
[[image /picture-links/Test-Picture.png width="300px" title="TEST Text"]]

Resized: Width = 300 pixel
Picture link to external picture with WIDTH and TITLE Text specified
Website: http://www.leadsa.co.za/
Graphics: http://www.702.co.za/images/leadsa.jpg
[[image http://www.702.co.za/images/leadsa.jpg width="300px" title="http://www.leadsa.co.za/"]]

Resized: Width = 300 pixel
Picture link to external picture with WIDTH and ALTernative Text specified
Website: http://www.leadsa.co.za/
Graphics: http://www.702.co.za/images/leadsa.jpg
[[image http://www.702.co.za/images/leadsa.jpg width="300px" title="http://www.leadsa.co.za/"]]

Resized: Width = 300 pixel
Picture link to external picture with WIDTH, TITLE Text specified and Anchor
Website: http://www.leadsa.co.za/
Graphics: http://www.702.co.za/images/leadsa.jpg
[[image http://www.702.co.za/images/leadsa.jpg width="300px" title="http://www.leadsa.co.za/" link="#"]]
--
[[image http://www.702.co.za/images/leadsa.jpg width="300px" title="http://www.leadsa.co.za/" link=#http://www.leadsa.co.za/]]
--
[[image http://www.702.co.za/images/leadsa.jpg width="300px" title="http://www.leadsa.co.za/" link="#http://www.leadsa.co.za/"]]
--
[[image http://www.702.co.za/images/leadsa.jpg width="300px" title="http://www.leadsa.co.za/" link="*http://www.leadsa.co.za/"]]
--
[[image http://www.702.co.za/images/leadsa.jpg width="300px" title="http://leadsa.co.za/" link="*http://leadsa.co.za/"]]

—

—

—

—

Resized: Width = 300 pixel
Number of Comments: 0)