Difference between revisions of "Template:Image"

From Coastal Wiki
Jump to: navigation, search
 
(43 intermediate revisions by the same user not shown)
Line 15: Line 15:
 
|fontsize = 80
 
|fontsize = 80
 
|caption = Foto: credits
 
|caption = Foto: credits
 +
|link = http://www.coastalwiki.org/wiki/File:Figure_1.jpg
 
}}
 
}}
 
</pre>
 
</pre>
Line 26: Line 27:
 
* fontsize: in percentage relative to the normal font-size
 
* fontsize: in percentage relative to the normal font-size
 
* caption: the caption displayed below the image
 
* caption: the caption displayed below the image
−
 
+
* link: an URL link added to the image
  
 
The code as shown above renders:
 
The code as shown above renders:
Line 38: Line 39:
 
|fontsize = 80
 
|fontsize = 80
 
|caption = Foto: credits
 
|caption = Foto: credits
 +
|link = http://www.coastalwiki.org/wiki/File:Figure_1.jpg
 
}}
 
}}
  
Line 55: Line 57:
 
|fontsize = 80
 
|fontsize = 80
 
|caption = Foto: credits
 
|caption = Foto: credits
 +
|link = http://www.coastalwiki.org/wiki/File:Figure_1.jpg
 
}}
 
}}
 
</pre>
 
</pre>
Line 67: Line 70:
 
* caption: the caption displayed below the image
 
* caption: the caption displayed below the image
 
* hover: the text you would like to have displayed upon hovering above the image
 
* hover: the text you would like to have displayed upon hovering above the image
 +
* link: an URL link added to the image
  
 
This code renders the exact same image as the one above.
 
This code renders the exact same image as the one above.
Line 81: Line 85:
 
|caption = Foto: credits
 
|caption = Foto: credits
 
|hover = insert text
 
|hover = insert text
 +
|link = http://www.coastalwiki.org/wiki/File:Figure_1.jpg
 
}}
 
}}
 
</pre>
 
</pre>
Line 93: Line 98:
 
|caption = Foto: credits
 
|caption = Foto: credits
 
|hover = insert text
 
|hover = insert text
 +
|link = http://www.coastalwiki.org/wiki/File:Figure_1.jpg
 
}}
 
}}
  
 
<br style="clear:both"/>
 
<br style="clear:both"/>
  
−
== VLIZ picture galery ===
+
== VLIZ picture galery ==
  
 
For images from the VLIZ picture galery use the following format
 
For images from the VLIZ picture galery use the following format
Line 110: Line 116:
 
|caption = Foto: VLIZ (Coppieters)
 
|caption = Foto: VLIZ (Coppieters)
 
|hover = View of the galleries of Oostende. (04.07.07)
 
|hover = View of the galleries of Oostende. (04.07.07)
 +
|link=http://www.vliz.be/en/multimedia/belgian-coast?pic=11482
 
}}
 
}}
 
</pre>
 
</pre>
Line 122: Line 129:
 
* caption: the caption displayed below the image
 
* caption: the caption displayed below the image
 
* hover: the text you would like to have displayed upon hovering above the image
 
* hover: the text you would like to have displayed upon hovering above the image
 +
* link: an URL link added to the image
  
 
this renders
 
this renders
Line 134: Line 142:
 
|caption = Foto: VLIZ (Coppieters)  
 
|caption = Foto: VLIZ (Coppieters)  
 
|hover = View of the galleries of Oostende. (04.07.07)
 
|hover = View of the galleries of Oostende. (04.07.07)
 +
|link=http://www.vliz.be/en/multimedia/belgian-coast?pic=11482
 +
}}
 +
 +
<br style="clear:both;"/>
 +
=== Height parameter ===
 +
If you which to allign more than one image next to each other and would like to make sure that each image is the same height you can make use of the height parameter. Using this property requires you '''omit the width''' property.
 +
 +
For example the code
 +
<pre>
 +
{{Image
 +
|position = left
 +
|margin = 5px 5px 5px 5px
 +
|vlizpicid=11482
 +
|captionposition = right
 +
|fontsize = 80
 +
|caption = Foto: VLIZ (Coppieters)
 +
|hover = View of the galleries of Oostende. (04.07.07)
 +
|link=http://www.vliz.be/en/multimedia/belgian-coast?pic=11482
 +
|height= 200
 +
}}
 +
{{Image
 +
|position = left
 +
|margin = 5px 5px 5px 5px
 +
|source= http://www.coastalwiki.org/w/images/1/1e/Figure_1.jpg
 +
|captionposition = right
 +
|fontsize = 80
 +
|caption = Foto: Credits
 +
|hover = insert text
 +
|link = http://www.coastalwiki.org/wiki/File:Figure_1.jpg
 +
|height= 200
 +
}}
 +
{{Image
 +
|position = left
 +
|margin = 5px 5px 5px 5px
 +
|vlizpicid= 25165
 +
|captionposition = left
 +
|fontsize = 80
 +
|caption = auteur: [http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165 E. Sacré in De Zuttere (1909)]
 +
|hover = De vismijn te Oostende. (De Zuttere 1909)
 +
|link = http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165
 +
|height = 200
 +
}}
 +
 +
</pre>
 +
renders 3 images aligned with the same height.
 +
 +
{{Image
 +
|position = left
 +
|margin = 5px 5px 5px 5px
 +
|vlizpicid=11482
 +
|captionposition = right
 +
|fontsize = 80
 +
|caption = Foto: VLIZ (Coppieters)
 +
|hover = View of the galleries of Oostende. (04.07.07)
 +
|link=http://www.vliz.be/en/multimedia/belgian-coast?pic=11482
 +
|height= 200
 +
}}
 +
{{Image
 +
|position = left
 +
|margin = 5px 5px 5px 5px
 +
|source= http://www.coastalwiki.org/w/images/1/1e/Figure_1.jpg
 +
|captionposition = right
 +
|fontsize = 80
 +
|caption = Foto: Credits
 +
|hover = insert text
 +
|link = http://www.coastalwiki.org/wiki/File:Figure_1.jpg
 +
|height= 200
 +
}}
 +
{{Image
 +
|position = left
 +
|margin = 5px 5px 5px 5px
 +
|vlizpicid= 25165
 +
|captionposition = left
 +
|fontsize = 80
 +
|caption = auteur: [http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165 E. Sacré in De Zuttere (1909)]
 +
|hover = De vismijn te Oostende. (De Zuttere 1909)
 +
|link = http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165
 +
|height = 200
 +
}}
 +
<br style ="clear:both"/>
 +
=== add a frame ===
 +
It's possible to add a frame to the external and VLIZ picture gallery images. To add the default frame you can use the code
 +
 +
<pre>
 +
{{Image
 +
|position = left
 +
|margin = 5px 5px 5px 5px
 +
|vlizpicid= 25165
 +
|captionposition = left
 +
|fontsize = 80
 +
|caption = auteur: [http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165 E. Sacré in De Zuttere (1909)]
 +
|hover = De vismijn te Oostende. (De Zuttere 1909)
 +
|link = http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165
 +
|height = 200
 +
frame =1
 +
}}
 +
</pre>
 +
 +
Which renders
 +
 +
{{Image
 +
|position = left
 +
|margin = 5px 5px 5px 5px
 +
|vlizpicid= 25165
 +
|captionposition = left
 +
|fontsize = 80
 +
|caption = auteur: [http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165 E. Sacré in De Zuttere (1909)]
 +
|hover = De vismijn te Oostende. (De Zuttere 1909)
 +
|link = http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165
 +
|height = 200
 +
|frame =1}}
 +
 +
<br style ="clear:both"/>
 +
There are 3 optional parameters to customize this frame:
 +
 +
* frame: Add the name of the template you wish to use. Available names are 1 (templatefor Historical fisheries in Belgium) and custom. More info on this see http://www.coastalwiki.org/wiki/Template:Image/frame/
 +
* frameborder: This parameter used in combination with template custom can be used to set the thickness and color of the frame. To use frames of different colors you can use [http://www.w3schools.com/colors/colors_picker.asp HEX color codes]. 
 +
* framecolor: This parameter used in combination with template custom allows you to select different background colors you can use [http://www.w3schools.com/colors/colors_picker.asp HEX color codes]. 
 +
* framemargin: This parameter used in combination with template custom allows you to determin the margin between the picture and the border of the frame.
 +
 +
 +
The following example which includes a customized frame
 +
<pre>
 +
{{Image
 +
|position = left
 +
|margin = 5px 5px 5px 5px
 +
|vlizpicid= 25165
 +
|captionposition = left
 +
|fontsize = 80
 +
|caption = auteur: [http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165 E. Sacré in De Zuttere (1909)]
 +
|hover = De vismijn te Oostende. (De Zuttere 1909)
 +
|link = http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165
 +
|height = 200
 +
|frame =custom
 +
|frameborder = 3px solid #0059b3
 +
|framecolor =  #00ff55
 +
|framemargin = 5
 +
}}
 +
</pre>
 +
would render the following
 +
 +
{{Image
 +
|position = left
 +
|margin = 5px 5px 5px 5px
 +
|vlizpicid= 25165
 +
|captionposition = left
 +
|fontsize = 80
 +
|caption = auteur: [http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165 E. Sacré in De Zuttere (1909)]
 +
|hover = De vismijn te Oostende. (De Zuttere 1909)
 +
|link = http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165
 +
|height = 200
 +
|frame =custom
 +
|frameborder = 3px solid #0059b3
 +
|framecolor =  #00ff55
 +
|framemargin = 5
 
}}
 
}}
  
 +
<br style ="clear:both"/>
  
−
</noinclude><includeonly> <div style="float:{{{position}}};width:{{{width}}}px;margin:{{{margin}}}">
+
</noinclude><includeonly> <div style="float:{{{position}}};{{#if:{{{height|}}}|min-width:50px|width:{{{width}}}px}};  
−
{{#if:{{{source|}}}|<img title="{{{hover|}}}" src="{{{source}}}" style="width:{{{width}}}px"/>
+
{{#if:{{{frame|}}}| {{image/frame/{{{frame}}}|}}|}} {{#ifeq:{{{frame}}}|custom| border:{{{frameborder}}}; background-color:{{{framecolor}}}; padding:{{{framemargin}}}px;|}}  margin:{{{margin}}}">{{#if:{{{link|}}}|<span class="plainlinks">[{{{link|}}} |}}{{#if:{{{source|}}}|<img title="{{{hover|}}}" src="{{{source}}}" style="{{#if:{{{height|}}}|height:{{{height}}}px|width:{{{width}}}px}}"/>|{{#if:{{{wikiimage|}}}|[[Image:{{{wikiimage}}}|{{{hover|}}}|{{{position}}}|{{{width}}}px|link={{{link|}}}]]|<img title="{{{hover|}}}" src="http://images.vliz.be/resized/{{{vlizpicid}}}.jpg" style="{{#if:{{{height|}}}|height:{{{height}}}px|width:{{{width}}}px}}"/>}}}}{{#if:{{{link|}}}|]</span>|}}
−
|{{#if:{{{wikiimage|}}}|[[Image:{{{wikiimage}}}|caption|{{{position}}}|{{{width}}}px|]]|
 
−
<img title="{{{hover|}}}" src="http://images.vliz.be/resized/{{{vlizpicid}}}.jpg" style="width:{{{width}}}px"/>
 
−
}}}}
 
 
<div style="text-align:{{{captionposition}}};font-size:{{{fontsize}}}%">{{{caption}}}</div></div>
 
<div style="text-align:{{{captionposition}}};font-size:{{{fontsize}}}%">{{{caption}}}</div></div>
 
</includeonly>
 
</includeonly>

Latest revision as of 12:35, 26 August 2016

This is a template which allows you to easily include images in the wiki in a predetermined following format. I can be used for both images stored in the wiki as for extenal images

Wiki pictures

For images inside the wiki use the following format 

{{Image
|position = right
|margin = 5px 5px 5px 5px
|width = 250
|wikiimage = Figure_1.jpg
|captionposition = right
|fontsize = 80
|caption = Foto: credits
|link = http://www.coastalwiki.org/wiki/File:Figure_1.jpg
}}

Parameters:

  • "{{Image" calls up the template
  • Position: "left" or "right"
  • margin: determines the margin between your image and the text. The first value is the margin between the image and the text (or images) above it. The second to the right, the third below and the fourth value the margin between the image and the text (or images) to the left of it.
  • width: insert the width in px
  • wikiimage : provide the name of the wikipage storing the image (not the complete url)
  • captionposition: left, right or center
  • fontsize: in percentage relative to the normal font-size
  • caption: the caption displayed below the image
  • link: an URL link added to the image

The code as shown above renders:

insert text
Foto: credits



External pictures

For images outside the wiki use the following format 

{{Image
|position = right
|margin = 5px 5px 5px 5px
|width = 250
|source= http://www.coastalwiki.org/w/images/1/1e/Figure_1.jpg
|captionposition = right
|hover  = insert text
|fontsize = 80
|caption = Foto: credits
|link = http://www.coastalwiki.org/wiki/File:Figure_1.jpg
}}

Parameters:

  • "{{Image" calls up the template
  • Position: "left" or "right"
  • width: insert the width in px
  • source: provide the url storing the image.
  • captionposition: left, right or center
  • fontsize: in percentage relative to the normal font-size
  • caption: the caption displayed below the image
  • hover: the text you would like to have displayed upon hovering above the image
  • link: an URL link added to the image

This code renders the exact same image as the one above.


To position a singe image in the center use the code: 

{{Image
|margin = 0.4em auto 0.4em auto
|width = 250
|source= http://www.coastalwiki.org/w/images/1/1e/Figure_1.jpg
|captionposition = center
|fontsize = 80
|caption = Foto: credits
|hover = insert text
|link = http://www.coastalwiki.org/wiki/File:Figure_1.jpg
}}

which renders

Foto: credits



VLIZ picture galery

For images from the VLIZ picture galery use the following format 

{{Image
|position = right
|margin = 5px 5px 5px 5px
|width = 250
|vlizpicid=11482
|captionposition = right
|fontsize = 80
|caption = Foto: VLIZ (Coppieters)
|hover = View of the galleries of Oostende. (04.07.07)
|link=http://www.vliz.be/en/multimedia/belgian-coast?pic=11482
}}

Parameters:

  • "{{Image" calls up the template
  • Position: "left" or "right"
  • width: insert the width in px
  • vlizpicid: the id of the image in the VLIZ picture gallery
  • captionposition: left, right or center
  • fontsize: in percentage relative to the normal font-size
  • caption: the caption displayed below the image
  • hover: the text you would like to have displayed upon hovering above the image
  • link: an URL link added to the image

this renders

Foto: VLIZ (Coppieters)



Height parameter

If you which to allign more than one image next to each other and would like to make sure that each image is the same height you can make use of the height parameter. Using this property requires you omit the width property.

For example the code 

 
{{Image
|position = left
|margin = 5px 5px 5px 5px
|vlizpicid=11482
|captionposition = right
|fontsize = 80
|caption = Foto: VLIZ (Coppieters) 
|hover = View of the galleries of Oostende. (04.07.07)
|link=http://www.vliz.be/en/multimedia/belgian-coast?pic=11482
|height= 200
}}
{{Image
|position = left
|margin = 5px 5px 5px 5px
|source= http://www.coastalwiki.org/w/images/1/1e/Figure_1.jpg
|captionposition = right
|fontsize = 80
|caption = Foto: Credits
|hover = insert text
|link = http://www.coastalwiki.org/wiki/File:Figure_1.jpg
|height= 200
}}
{{Image
|position = left
|margin = 5px 5px 5px 5px
|vlizpicid= 25165
|captionposition = left
|fontsize = 80
|caption = auteur: [http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165 E. Sacré in De Zuttere (1909)]
|hover = De vismijn te Oostende. (De Zuttere 1909)
|link = http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165
|height = 200
}}

renders 3 images aligned with the same height.

Foto: VLIZ (Coppieters)
Foto: Credits


add a frame

It's possible to add a frame to the external and VLIZ picture gallery images. To add the default frame you can use the code 

{{Image
|position = left
|margin = 5px 5px 5px 5px
|vlizpicid= 25165
|captionposition = left
|fontsize = 80
|caption = auteur: [http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165 E. Sacré in De Zuttere (1909)]
|hover = De vismijn te Oostende. (De Zuttere 1909)
|link = http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165
|height = 200
frame =1
}}

Which renders



There are 3 optional parameters to customize this frame:

  • frame: Add the name of the template you wish to use. Available names are 1 (templatefor Historical fisheries in Belgium) and custom. More info on this see http://www.coastalwiki.org/wiki/Template:Image/frame/
  • frameborder: This parameter used in combination with template custom can be used to set the thickness and color of the frame. To use frames of different colors you can use HEX color codes.
  • framecolor: This parameter used in combination with template custom allows you to select different background colors you can use HEX color codes.
  • framemargin: This parameter used in combination with template custom allows you to determin the margin between the picture and the border of the frame.


The following example which includes a customized frame 

{{Image
|position = left
|margin = 5px 5px 5px 5px
|vlizpicid= 25165
|captionposition = left
|fontsize = 80
|caption = auteur: [http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165 E. Sacré in De Zuttere (1909)]
|hover = De vismijn te Oostende. (De Zuttere 1909)
|link = http://www.vliz.be/wetenschatten/beeldbank.php?album=1218&pic=25165
|height = 200
|frame =custom
|frameborder = 3px solid #0059b3
|framecolor =  #00ff55
|framemargin = 5
}}

would render the following




Retrieved from "https://www.coastalwiki.org/w/index.php?title=Template:Image&oldid=72108"