Gamepedia Help Wiki
(Created page with "{| style="text-align: center; width:100%;" |- |250px|link= || 300px|link= |} <div style="text-align: center; width: 100%; font-f...")
 
(37 intermediate revisions by 21 users not shown)
Line 8: Line 8:
 
</div>
 
</div>
   
This page explains the basics of '''image''' syntax when editing the wiki. You or another user must usually [[Managing files|upload an image]] before you can use it on a page. Sometimes it can become very useful to know at least a few basics of [[Image Manipulation]].<br><br>
+
This page explains the basics of '''image''' syntax when editing the wiki. You or another user must usually [[Managing files|upload an image]] before you can use it on a page. Sometimes it can become very useful to know at least a few basics of [[image manipulation]].<br/><br/>
  +
<div style="float: right; clear: right; margin: 0 1em 0 0;">
 
{{note|The maximum filesize for an image is 8 MB,<br>and the maximum size in pixels is 5000px x 5000px.}}
 
</div>
 
   
 
Images that are stored on a MediaWiki server are usually rendered by using the <code>File:</code> namespace prefix (but the legacy <code>Image:</code> namespace prefix is still supported as a synonym) as the target of a MediaWiki link. The alternate <code>Media:</code> namespace prefix is also usable to reference the original media file content (for rendering or downloading it separately, out of any MediaWiki page).
 
Images that are stored on a MediaWiki server are usually rendered by using the <code>File:</code> namespace prefix (but the legacy <code>Image:</code> namespace prefix is still supported as a synonym) as the target of a MediaWiki link. The alternate <code>Media:</code> namespace prefix is also usable to reference the original media file content (for rendering or downloading it separately, out of any MediaWiki page).
   
 
== Supported media types for images ==
 
== Supported media types for images ==
 
<div style="float: right; clear: right; margin: 0 1em 0 0;">
 
{{Note|The maximum filesize for an image is 8 MB,<br/>and the maximum size in pixels is 5000px x 5000px, or 25 megapixels.}}
 
</div>
 
The following file formats are supported by default:
 
The following file formats are supported by default:
 
* '''.jpg''' or '''.jpeg''' : bitmap image compressed in the standard '''JPEG''' format (this lossy format is most suitable for photographs).
 
* '''.jpg''' or '''.jpeg''' : bitmap image compressed in the standard '''JPEG''' format (this lossy format is most suitable for photographs).
Line 21: Line 22:
 
* '''.gif''' : bitmap image in the legacy ''Graphics Interchange Format''. Animated gifs work, too.
 
* '''.gif''' : bitmap image in the legacy ''Graphics Interchange Format''. Animated gifs work, too.
   
 
Other formats can used (but may require extra set-up beyond what is enabled by default), such as .svg, .tiff, .ogg, and .pdf.
==Examples==
 
Other formats can used on Wikimedia, and are commonly enabled elsewhere (these may require extra set-up beyond what is enabled by default):
 
* '''.svg''' : scalable image in the ''Scalable Vector Graphics'' format (specified by the ''W3 Consortium'').
 
* '''.tiff''' : Tagged image format. Often used for high-resolution archival photographs.
 
* '''.ogg''', '''.oga''', '''.ogv''' : Ogg multimedia (audio or video) Not an image format, but treated similarly.
 
* '''.pdf''' : multipaged documents in the ''Portable Document Format'' (initially specified by ''Adobe'').
 
* '''.djvu''' : multipaged bitmap documents in the ''DejaVu'' format (most often, scans of books).
 
*: Only a single page of a .pdf or .djvu file is shown at one time.
 
 
Other media types may be supported, but it may not be possible to display them inline.
 
   
 
== Rendering a single image ==
 
== Rendering a single image ==
 
 
=== Syntax ===
 
=== Syntax ===
 
<div style="float: right; clear: left; margin: 0 2em 0 0;">
 
{{Note|The image will always retain its aspect ratio, and can only be reduced (not increased)<br/>in size unless it's in a scalable media type (bitmap images cannot be scaled up).}}
 
</div>
  +
  +
The basic syntax for displaying an image is:
  +
:<nowiki>[[</nowiki>File:''filename.extension'']]
  +
 
The full syntax for displaying an image is:
 
The full syntax for displaying an image is:
<nowiki>[[</nowiki>File:''filename.extension''|''options''|''caption'']]
+
:<nowiki>[[</nowiki>File:''filename.extension''|''options''|''caption'']]
   
where ''options'' can be zero or more of the following, separated by pipes ('''|'''):
+
''Options'' can be zero or more of the following, separated by pipes (<code>|</code>):
* ''[[#Format|Format]]'' option: one of '''border''' and/or '''frameless''', '''frame''', '''thumb''' (or '''thumbnail''');
+
* ''[[Advanced images#Format|Format]]'' option: one of <code>border</code> and/or <code>frameless</code>, <code>frame</code>, <code>thumb</code> (or <code>thumbnail</code>);
 
*: Controls how the rendered image is formatted and embedded in the rest of the page.
 
*: Controls how the rendered image is formatted and embedded in the rest of the page.
* ''[[#Size and frame|Resizing]]'' option: one of
+
* ''[[Advanced images#Size and frame|Resizing]]'' option: one of
 
** ''{width}'''''px''' — Resizes the image to fit within the given maximum width in pixels, without restricting its height;
 
** ''{width}'''''px''' — Resizes the image to fit within the given maximum width in pixels, without restricting its height;
 
** '''x'''''{height}'''''px''' — Resizes the image to fit within the given maximum height in pixels, without restricting its width;
 
** '''x'''''{height}'''''px''' — Resizes the image to fit within the given maximum height in pixels, without restricting its width;
Line 47: Line 45:
 
** '''upright''' — Resizes an image to fit within reasonable dimensions, according to user preferences (suitable for images whose height is larger than width).
 
** '''upright''' — Resizes an image to fit within reasonable dimensions, according to user preferences (suitable for images whose height is larger than width).
   
 
: The default maximum size depends on the ''format'' and the internal image dimensions (according to its media type).
<div style="float: right; clear: left; margin: 0 2em 0 0;">
 
 
* ''[[Advanced images#Horizontal alignment|Horizontal alignment]]'' option: one of <code>left</code>, <code>right</code>, <code>center</code>, <code>none</code>;
{{note|The image will always retain its aspect ratio, and can only be reduced (not increased)<br>in size unless it's in a scalable media type (bitmap images cannot be scaled up).}}
 
</div>
 
 
*: The default maximum size depends on the ''format'' and the internal image dimensions (according to its media type).
 
* ''[[#Horizontal alignment|Horizontal alignment]]'' option: one of '''left''', '''right''', '''center''', '''none''';
 
 
*: Controls the horizontal alignment (and inline/block or floating styles) of the image within a text (no default value).
 
*: Controls the horizontal alignment (and inline/block or floating styles) of the image within a text (no default value).
* ''[[#Vertical alignment|Vertical alignment]] option'': one of '''baseline''', '''sub''', '''super''', '''top''', '''text-top''', '''middle''', '''bottom''', '''text-bottom''';
+
* ''[[Advanced images#Vertical alignment|Vertical alignment]] option'': one of <code>baseline</code>, <code>sub</code>, <code>super</code>, <code>top</code>, <code>text-top</code>, <code>middle</code>, <code>bottom</code>, <code>text-bottom</code>;
*: Controls the vertical alignment of a non-floating inline image with the text before or after the image, and in the same block (the default vertical alignment is '''middle''').
+
*: Controls the vertical alignment of a non-floating inline image with the text before or after the image, and in the same block (the default vertical alignment is <code>middle</code>).
* ''[[#Altering the default link target|Link]] option'': one of
+
* ''[[Advanced images#Altering the default link target|Link]] option'': one of
** '''link='''''{target}'' — Allows to change the target (to an arbitrary page title, or URL) of the generated link, activable on the rendered image surface; e.g. <code><nowiki>[[File:Hydra intro.png|40px|link=http://www.wikipedia.org]]</nowiki></code> renders as [[File:Hydra intro.png|40px|link=http://www.wikipedia.org]] (external link), or <code><nowiki>[[File:Hydra intro.png|40px|link=MediaWiki]]</nowiki></code> renders as [[File:Hydra intro.png|40px|link=MediaWiki]] (internal link).
+
** '''link='''''{target}'' — Allows to change the target (to an arbitrary page title, or URL) of the generated link, activable on the rendered image surface; e.g. <code><nowiki>[[File:Hydra intro.png|40px|link=//wikipedia.org]]</nowiki></code> renders as [[File:Hydra intro.png|40px|link=//wikipedia.org]] (external link), or <code><nowiki>[[File:Hydra intro.png|40px|link=MediaWiki]]</nowiki></code> renders as [[File:Hydra intro.png|40px|link=MediaWiki]] (internal link).
 
** '''link=''' (with an empty value) — Displays an image without any activable link; e.g. <code><nowiki>[[</nowiki>File:Example.jpg|40px|link=]]</code> renders as [[File:Hydra intro.png|40px|link=]].
 
** '''link=''' (with an empty value) — Displays an image without any activable link; e.g. <code><nowiki>[[</nowiki>File:Example.jpg|40px|link=]]</code> renders as [[File:Hydra intro.png|40px|link=]].
 
*** '''!''' If you set <code>|link=|</code> (empty), then no <code>title</code> will be rendered.
 
*** '''!''' If you set <code>|link=|</code> (empty), then no <code>title</code> will be rendered.
 
* Other specific options:
 
* Other specific options:
** '''alt='''''{alternative text}'' — Defines the alternative text (maps to the HTML attribute <code>alt="..."</code> of the generated <code>&lt;img /&gt;</code> element) of an image that will be rendered if either the referenced image cannot be downloaded and embedded, or if the support media must use the alternative description text (e.g. when using a Braille reader or with accessibility options set by the user in its browser).
+
**'''alt='''''{alternative text}'' — Defines the alternative text (maps to the HTML attribute <code>alt="..."</code> of the generated <code>&lt;img /&gt;</code> element) of an image that will be rendered if either the referenced image cannot be downloaded and embedded, or if the support media must use the alternative description text (e.g. when using a Braille reader or with accessibility options set by the user in its browser).
 
** '''page='''''{number}'' — Renders the specified page number (currently only applicable when showing a .djvu or .pdf file).
 
** '''page='''''{number}'' — Renders the specified page number (currently only applicable when showing a .djvu or .pdf file).
** '''class='''''{html class}'' — (MediaWiki 1.20+) Defines classes (maps to the HTML attribute <code>class="..."</code> of the generated <code>&lt;img /&gt;</code> element)
+
** '''class='''''{html class}'' — (MediaWiki 1.20+) Defines classes (maps to the HTML attribute <code>class="..."</code> of the generated <code>&lt;img /&gt;</code> element).
  +
 
If a parameter does not match any of the other possibilities, it is assumed to be the caption text. Caption text only shows below the image in <code>thumb</code> and <code>frame</code> formats. Caption text displayed in the <code>thumb</code> and <code>frame</code> formats may contain wiki links and other formatting. In the other options, wiki-formatting will not work though transclusion will.
  +
 
If no caption text is supplied, a caption is automatically created showing the file name. To completely remove the caption, set it to <code><nowiki><span title=""></span></nowiki></code>. For example, <code><nowiki>[[File:Hydra intro.png|40px|<span title=""></span>]]</nowiki></code> renders as [[File:Hydra intro.png|40px|<span title=""></span>]].
  +
  +
  +
<div style="text-align: center; width: 100%; font-family: montserrat; font-size: 150%; font-weight: bold; color: #BEFE6B; text-shadow: 1px 1px black;">
  +
Please, [[Advanced images|click here]], to find out more about:<br/>
  +
Formats ♦ Galleries ♦ Links
  +
</div>
  +
  +
== See also ==
  +
* [[Advanced images]]
   
  +
[[Category:Basic editing]]
If a parameter does not match any of the other possibilities, it is assumed to be the caption text. Caption text only shows below the image in '''thumb''' and '''frame''' formats. Caption text displayed in the '''thumb''' and '''frame''' formats may contain wiki links and other formatting. In the other options, wiki-formatting will not work though transclusion will.
 
   
  +
[[cs:Základní obrázky]]
If no caption text is supplied, a caption is automatically created showing the file name. To completely remove the caption, set it to <code><nowiki><span title=""></span></nowiki></code>. For example, <code><nowiki>[[File:Hydra intro.png|40px|<span title=""></span>]]</nowiki></code> renders as [[File:Hydra intro.png|40px|<span title=""></span>]].
 
  +
[[fr:Images de base]]
  +
[[pl:Podstawowe pliki]]
  +
[[ru:Базовые изображения]]
  +
[[tr:Temel resimler]]

Revision as of 10:40, 15 October 2020

C1 images C2 images

No worries, help is on its way!

This page explains the basics of image syntax when editing the wiki. You or another user must usually upload an image before you can use it on a page. Sometimes it can become very useful to know at least a few basics of image manipulation.


Images that are stored on a MediaWiki server are usually rendered by using the File: namespace prefix (but the legacy Image: namespace prefix is still supported as a synonym) as the target of a MediaWiki link. The alternate Media: namespace prefix is also usable to reference the original media file content (for rendering or downloading it separately, out of any MediaWiki page).

Supported media types for images

NOTE:
Prof hydra The maximum filesize for an image is 8 MB,
and the maximum size in pixels is 5000px x 5000px, or 25 megapixels.

The following file formats are supported by default:

  • .jpg or .jpeg : bitmap image compressed in the standard JPEG format (this lossy format is most suitable for photographs).
  • .png : bitmap image in the Portable Network Graphics format (specified by the W3 Consortium).
  • .gif : bitmap image in the legacy Graphics Interchange Format. Animated gifs work, too.

Other formats can used (but may require extra set-up beyond what is enabled by default), such as .svg, .tiff, .ogg, and .pdf.

Rendering a single image

Syntax

NOTE:
Prof hydra The image will always retain its aspect ratio, and can only be reduced (not increased)
in size unless it's in a scalable media type (bitmap images cannot be scaled up).

The basic syntax for displaying an image is:

[[File:filename.extension]]

The full syntax for displaying an image is:

[[File:filename.extension|options|caption]]

Options can be zero or more of the following, separated by pipes (|):

  • Format option: one of border and/or frameless, frame, thumb (or thumbnail);
    Controls how the rendered image is formatted and embedded in the rest of the page.
  • Resizing option: one of
    • {width}px — Resizes the image to fit within the given maximum width in pixels, without restricting its height;
    • x{height}px — Resizes the image to fit within the given maximum height in pixels, without restricting its width;
    • {width}x{height}px — Resizes the image to fit within the given width and height in pixels;
    • upright — Resizes an image to fit within reasonable dimensions, according to user preferences (suitable for images whose height is larger than width).
The default maximum size depends on the format and the internal image dimensions (according to its media type).
  • Horizontal alignment option: one of left, right, center, none;
    Controls the horizontal alignment (and inline/block or floating styles) of the image within a text (no default value).
  • Vertical alignment option: one of baseline, sub, super, top, text-top, middle, bottom, text-bottom;
    Controls the vertical alignment of a non-floating inline image with the text before or after the image, and in the same block (the default vertical alignment is middle).
  • Link option: one of
    • link={target} — Allows to change the target (to an arbitrary page title, or URL) of the generated link, activable on the rendered image surface; e.g. [[File:Hydra intro.png|40px|link=//wikipedia.org]] renders as Hydra intro (external link), or [[File:Hydra intro.png|40px|link=MediaWiki]] renders as Hydra intro (internal link).
    • link= (with an empty value) — Displays an image without any activable link; e.g. [[File:Example.jpg|40px|link=]] renders as Hydra intro.
      • ! If you set |link=| (empty), then no title will be rendered.
  • Other specific options:
    • alt={alternative text} — Defines the alternative text (maps to the HTML attribute alt="..." of the generated <img /> element) of an image that will be rendered if either the referenced image cannot be downloaded and embedded, or if the support media must use the alternative description text (e.g. when using a Braille reader or with accessibility options set by the user in its browser).
    • page={number} — Renders the specified page number (currently only applicable when showing a .djvu or .pdf file).
    • class={html class} — (MediaWiki 1.20+) Defines classes (maps to the HTML attribute class="..." of the generated <img /> element).

If a parameter does not match any of the other possibilities, it is assumed to be the caption text. Caption text only shows below the image in thumb and frame formats. Caption text displayed in the thumb and frame formats may contain wiki links and other formatting. In the other options, wiki-formatting will not work though transclusion will.

If no caption text is supplied, a caption is automatically created showing the file name. To completely remove the caption, set it to <span title=""></span>. For example, [[File:Hydra intro.png|40px|<span title=""></span>]] renders as Hydra intro.


Please, click here, to find out more about:
Formats ♦ Galleries ♦ Links

See also