Picture Links

Posted by Peter-ZAPeter-ZA on 03 Jun 2012 21:57, last edited by Peter-ZAPeter-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]]
Test-Picture.png
Display Size = 100%

Simple straight forward link (LEFT)

Picture must be loaded up to the current page !

[[<image Test-Picture.png]]
Test-Picture.png

Display Size = 100%


Simple straight forward link (CENTRED)

Picture must be loaded up to the current page !

[[=image Test-Picture.png]]
Test-Picture.png

Display Size = 100%


Simple straight forward link (RIGHT)

Picture must be loaded up to the current page !

[[>image Test-Picture.png]]
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]]
Test-Picture.png Test-Picture.png 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]]
Test-Picture.png
Test-Picture.png
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]]
Test-Picture.png
Test-Picture.png
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]]
[[/=]]
Test-Picture.png Test-Picture.png 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]]
Test-Picture.png
Test-Picture.png
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]]
Test-Picture.png
Test-Picture.png
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"]]
Test-Picture.png
Resized: Width = 400 pixel

Simple picture link with HEIGHT specified

[[image Test-Picture.png height="100px"]]
Test-Picture.png
Resized: Height = 100 pixel

Specified SIZE (preset size, SMALL file)

Simple picture link with SIZE square specified

[[image Test-Picture.png size="square"]]
Test-Picture.png
Resized: Size = 75x75 pixel

Simple picture link with SIZE thumbnail specified

[[image Test-Picture.png size="thumbnail"]]
Test-Picture.png
Resized: Longest side = 100 pixel

Simple picture link with SIZE small specified

[[image Test-Picture.png size="small"]]
Test-Picture.png
Resized: Longest side = 240 pixel

Simple picture link with SIZE medium specified

[[image Test-Picture.png size="medium"]]
Test-Picture.png
Resized: Longest side = 500 pixel

Simple picture link with SIZE medium640 specified

[[image Test-Picture.png size="medium640"]]
Test-Picture.png
Resized: Longest side = 640 pixel

Simple picture link with SIZE large specified

[[image Test-Picture.png size="large"]]
Test-Picture.png
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"]]
Test-Picture-L.jpg
Resized: Size = 75x75 pixel

Simple picture link with SIZE thumbnail specified

[[image Test-Picture-L.jpg size="thumbnail"]]
Test-Picture-L.jpg
Resized: Longest side = 100 pixel

Simple picture link with SIZE small specified

[[image Test-Picture-L.jpg size="small"]]
Test-Picture-L.jpg
Resized: Longest side = 240 pixel

Simple picture link with SIZE medium specified

[[image Test-Picture-L.jpg size="medium"]]
Test-Picture-L.jpg
Resized: Longest side = 500 pixel

Simple picture link with SIZE medium640 specified

[[image Test-Picture-L.jpg size="medium640"]]
Test-Picture-L.jpg
Resized: Longest side = 640 pixel

Simple picture link with SIZE large specified

[[image Test-Picture-L.jpg size="large"]]
Test-Picture-L.jpg
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"]]
Test-Picture.png
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"]]
WARNING.jpg
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"]]
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"]]
Test-Picture.png
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"]]
Test-Picture.png
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/"]]
leadsa.jpg
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/"]]
leadsa.jpg
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/"]]
leadsa.jpg

leadsa.jpg

leadsa.jpg

leadsa.jpg — working

leadsa.jpg — working !

Resized: Width = 300 pixel



Number of Comments: 0)

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License