Difference between revisions of "Images - Mediawiki"

From Help Wiki
(Image Galleries)
m (subst applied to Template:TwoColumn)
 
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
==Image Basics==
+
 
 +
<div class="container-fluid">
 +
<div class="row">
 +
<div class="col-md-8">
 +
<div class="lead">
 +
Learn the basic wiki syntax for embedding images. Remember, you can also use the [[Visual Editor - Mediawiki|Visual Editor]] for a quick and easy way to embed images.
 +
</div>
 +
 
 +
[[Image:Tesla portrait.gif|thumb|right|150px|portrait of Nicola Tesla]]
 +
==Image Basic Syntax==
 
Displaying images in wiki pages is a 2 step process:
 
Displaying images in wiki pages is a 2 step process:
 
#Upload the image file by clicking the '''Upload file''' link in the Toolbox navigation. ''(note: you must use '''.jpg''', '''.gif''' and '''.png''' type image files). For more on uploading files see [[Uploading Files - Mediawiki|Uploading Files]]
 
#Upload the image file by clicking the '''Upload file''' link in the Toolbox navigation. ''(note: you must use '''.jpg''', '''.gif''' and '''.png''' type image files). For more on uploading files see [[Uploading Files - Mediawiki|Uploading Files]]
#In the page you want the image to be displayed in, place a link to the image file using the following syntax ''(note: replace filename.jpg with the name of your file)'' '''<nowiki>[[Image:filename.jpg]] or [[Image:filename.jpg|alt text]]</nowiki>''' to include alternate text with your image.
+
#In the page you want the image to be displayed in, place a link to the image file using the following syntax ''(note: replace filename.jpg with the name of your file)'' '''<nowiki>[[File:filename.jpg]] or [[File:filename.jpg|alt text]]</nowiki>''' to include alternate text with your image.
 
+
[[Image:Tesla portrait.gif|thumb|right|150px|portrait of Nicola Tesla]]
+
  
  
Line 10: Line 17:
 
==Extended image syntax==
 
==Extended image syntax==
 
There are many additional ways you can control how images are displayed.
 
There are many additional ways you can control how images are displayed.
<pre>[[Image:{name}|{type}|{location}|{size}|{caption}]]</pre>
+
<pre>[[File:{name}|{type}|{location}|{size}|{caption}]]</pre>
  
  
Line 16: Line 23:
 
This image uses the following syntax. Note the size refers to the width only in pixels.
 
This image uses the following syntax. Note the size refers to the width only in pixels.
  
  <nowiki>[[Image:Tesla portrait.gif|thumb|right|150px|portrait of Nicola Tesla]]</nowiki>
+
  <nowiki>[[File:Tesla portrait.gif|thumb|right|150px|portrait of Nicola Tesla]]</nowiki>
  
 
==Image Galleries==
 
==Image Galleries==
Line 33: Line 40:
  
 
Which produces:
 
Which produces:
 
+
{{anchor|gallery|image gallery}}
 
<gallery>
 
<gallery>
 
Image:Tesla portrait.gif
 
Image:Tesla portrait.gif
Line 44: Line 51:
 
Notice that there are no brackets except for links within captions. Captions are optional. Images are separated by new lines.
 
Notice that there are no brackets except for links within captions. Captions are optional. Images are separated by new lines.
  
'''Further reading:'''
+
; See also:
 +
*For a complete guide to the image extended syntax see: [http://en.wikipedia.org/wiki/Wikipedia:Extended_image_syntax Mediawiki Extended Image Syntax]
 +
*To alter the image link see [http://meta.wikimedia.org/wiki/Help:Navigational_images navigational images]
  
There are even more ways to work with images in Mediawiki. For a complete guide see:
 
[http://en.wikipedia.org/wiki/Wikipedia:Extended_image_syntax Mediawiki Extended Image Syntax]
 
  
 +
<!-- end col-md-8 -->
 +
</div>
 +
<div class="col-md-1"></div>
 +
<div class="col-md-3 sidebar">
 +
{{Mediawiki Help}}
 +
{{GetHelp}}
  
 +
<!-- end col-md-3-->
 +
</div>
 +
<!-- end row-->
 +
</div>
 +
<!-- end container-->
 +
</div>
 +
<!-- Generator=Template:TwoColumn -->
 +
__NOTOC__
 +
__NOEDITSECTION__
 
  [[category:Mediawiki]]
 
  [[category:Mediawiki]]

Latest revision as of 17:01, 14 August 2017

Learn the basic wiki syntax for embedding images. Remember, you can also use the Visual Editor for a quick and easy way to embed images.

portrait of Nicola Tesla

Image Basic Syntax

Displaying images in wiki pages is a 2 step process:

  1. Upload the image file by clicking the Upload file link in the Toolbox navigation. (note: you must use .jpg, .gif and .png type image files). For more on uploading files see Uploading Files
  2. In the page you want the image to be displayed in, place a link to the image file using the following syntax (note: replace filename.jpg with the name of your file) [[File:filename.jpg]] or [[File:filename.jpg|alt text]] to include alternate text with your image.


Extended image syntax

There are many additional ways you can control how images are displayed.

[[File:{name}|{type}|{location}|{size}|{caption}]]


Example: This image uses the following syntax. Note the size refers to the width only in pixels.

[[File:Tesla portrait.gif|thumb|right|150px|portrait of Nicola Tesla]]

Image Galleries

The basic syntax is:

<gallery>
Image:Tesla portrait.gif
Image:Tesla portrait.gif|Captioned
Image:Tesla portrait.gif
Image:Tesla portrait.gif|[[Links]] can be put in captions.
Image:Tesla portrait.gif
</gallery>

Which produces:

Notice that there are no brackets except for links within captions. Captions are optional. Images are separated by new lines.

See also