Wikipedia:Extended image syntax: Difference between revisions
Content deleted Content added
→Brief syntax: + "(slang: langtag)". |
|||
| (36 intermediate revisions by 9 users not shown) | |||
Line 5:
==Brief syntax==
In brief, the [[Syntax (programming languages)|syntax]] for displaying an image is:
:<code><nowiki>[[File:</nowiki>'''''Name'''''|'''''Type'''''<wbr>|'''''Border'''''<wbr>|'''''Location'''''<wbr>|'''''Alignment'''''<wbr>|'''''Size'''''<wbr>|link='''''Link'''''<wbr>|alt='''''Alt'''''<wbr>|page='''''Page'''''<wbr>|lang='''''Langtag'''''<wbr>|'''''Caption'''''<nowiki>]]</nowiki></code>.
The other details:
Line 16:
* can be placed in any order, except for '''''Caption'''''.
; ''Type'' :
; ''Location'' :
▲; ''Border'' : "<code>border</code>". Put a small border around the image.
; ''Alignment'' :
; ''Size'' :
▲; ''Location'' : "<code>right</code>", "<code>left</code>", "<code>center</code>" or "<code>none</code>". Determine the horizontal placement of the image on the page. This defaults to "<code>right</code>" for thumbnails and framed images.
▲; ''Alignment'' : "<code>baseline</code>", "<code>middle</code>", "<code>sub</code>", "<code>super</code>", "<code>text-top</code>", "<code>text-bottom</code>", "<code>top</code>", or "<code>bottom</code>". Vertically align the image with respect to adjacent text. This defaults to "<code>middle</code>".
▲; ''Size'' : "<code>upright</code>" or "<code>upright=<var>'''factor'''</var></code>". Scale a thumbnail from its default size by the given factor (default 0.75), rounding the result to the nearest multiple of 10 pixels. The "<code>upright</code>" option must be used along with the "<code>thumb</code>" or "<code>frameless</code>" parameter. Alternatively, and only where absolutely necessary, users' preferences may be disregarded and the size of the image fixed by specifying a size in pixels: "'''Width'''<code>px</code>" or "<code>x</code>'''Height'''<code>px</code>" or "'''Width'''<code>x</code>'''Height'''<code>px</code>". Scale the image to be no greater than the given width or height, keeping its aspect ratio. Scaling up (i.e. stretching the image to a greater size) is disabled when the image is framed.
; ''Link'' : Link the image to a different resource, or to nothing.
; ''Alt'' : Specify the [[alt attribute|alt text]] for the image. This is intended for visually impaired readers. See [[WP:ALT]] for how this should typically differ from the caption.
; ''Page'': Specify a page other than 1 to use for the thumbnail image in multipaged files.
; ''Langtag'' : Specify the [[IETF language tag]] (slang: langtag) for <code>switch</code>-translated [[SVG]] (Scalable Vector Graphics) files. Some SVG files are multilingual; this parameter specifies which language to use. The langtag should be all lowercase (e.g., <code>zh-hans</code> rather than <code>zh-Hans</code>). Defaults to current Wikipedia language in article namespace or <code>en</code> in other namespaces. See {{tl2|sister=Commons:|Translate}}.
;
==Detailed syntax==▼
▲; (Caption text) : Not a keyword, the actual caption text. Must be last option. This is visible if "thumb" attribute is used, but may be displayed on [[mouseover]] in other cases.
The image syntax begins with
Do not terminate with the code <code style="color: #a00">|]]</code>; this will be taken as an ''empty'' caption and override any ''real'' caption before it.
▲==Detailed syntax==
▲The image syntax begins with "<code><nowiki>[[</nowiki></code>", contains components separated by "<code>|</code>", and ends with "<code><nowiki>]]</nowiki></code>". The "<code><nowiki>[[</nowiki></code>" and the first "<code>|</code>" (or, if there is no "<code>|</code>", the terminating "<code><nowiki>]]</nowiki></code>") must be on the same line; other spaces and line breaks are ignored if they are next to "<code>|</code>" characters or just inside the brackets. Spaces or line breaks are not allowed just before the "<code>=</code>" in the following options, and may have undesirable side effects if they appear just after the "<code>=</code>". Do not terminate with the code <code style="color: #a00">|]]</code>; this will be taken as an empty caption and override any real caption.
===Type===
One of these options may be specified to control whether or not the image is scaled and/or given a border. For options that automatically scale the image, it's usually to 220px; logged-in users can modify this (at "Thumbnail size" under {{myprefs|Appearance|Files}}). This is important to users with (e.g.) limited vision. If this is too large or small the [[#Size|upright attribute]] can be used. Specifying a fixed size in pixels overrides all of this, but is unfriendly to users who need a larger image.
; <code>thumb</code> (or '''<code>thumbnail</code>''') : Automatically scale the image, and put a box around it. Show a caption if specified. Float the image on the right unless overridden with the [[#Location|location attribute]]. With an operand, e.g.
; <code>frame</code> : Preserve the original image size, and put a box around the image. Show any caption below the image. Float the image on the right unless overridden with the location attribute. <small> Note: Any size options specified will be ignored and flagged as a 'bogus file option' by the Linter.</small>
; <code>frameless</code> : Automatically scale the image up or down. Place it inline with the text unless overridden with the location attribute.
Line 55 ⟶ 48:
; <code>center</code> : Place the image in the center of the page. The article text that follows the image is placed below the image.
; <code>none</code> : Place the image on the left side of the page. The article text that follows the image is placed below the image.
; Nothing specified, and neither <code>thumb</code> nor <code>frame</code> : The image is placed inline with the text,
===Vertical alignment===
Line 99 ⟶ 92:
; ''(nothing specified)'' : For thumbnails, use the size specified in preferences for logged in users, and use a size determined by resolution for users who are not logged in. For non-thumbnails, use the native size of the image.
; <code>upright</code> {{nobold|or}} <code>upright=</code>''factor'' : Adjust a thumbnail's size to ''factor'' times the default thumbnail size, rounding the result to the nearest multiple of 10. For instance,
: The <code>upright</code> option only works with the <code>thumb</code> or <code>frameless</code> parameter (see [[#Type|Type]]).
; ''Width''<code>px</code> : (''E.g.'' <code>100px</code>) Scale the image to make it the specified number of pixels in width, and scale the height to retain the original aspect ratio.
Line 118 ⟶ 111:
===Alt text and caption===
Zero or more of these options may be specified to control the ''alt text'', ''link title'', and ''caption'' for the image. Captions may contain embedded wiki markup, such as links or formatting. See [[Wikipedia:Captions]] for discussion of appropriate caption text. See [[Wikipedia:Alternative text for images]] for discussion of appropriate alt text. Internet Explorer displays the link title as a tooltip but other browsers may not.{{Update inline|date=June 2024|reason=Internet Explorer is obsolete.}}
Hint: to force the caption to be written (underneath the picture) and not just appear as "hover text" even when you wish to resize the image, specify "<code>thumb</code>". If you specify "<code>frame</code>" the caption does appear but any resizing (such as "<code>125px</code>") is ignored.
Line 138 ⟶ 131:
; <code>class=</code> : Used to insert any HTML classes for image. This has an effect only for some specific classes listed in [[Wikipedia:Catalogue of CSS classes]], or some classes produced by [[Wikipedia:TemplateStyles|TemplateStyles]].
*The special class <code>class=notpageimage</code> will exclude the image from being selected by the [[:mw:Extension:PageImages|Page Images]] algorithm.<sup>([[phab:T301588]])</sup>
*<code>class=skin-invert</code> will cause the image's colors to be inverted in [[mw:Reading/Web/Accessibility for reading/Updates/2024-04|dark mode]]. <code>class=skin-invert-image</code> will only invert the image and not the caption.
===Page===
Line 459 ⟶ 453:
Only item 7 is linked here.
== Superimposing images ==
==Cancelling floating-around-image mode==<!-- This section is linked from [[George Fox]] -->▼
Images can be overlaid or superimposed using {{t|Superimpose}}, {{t|Superimpose2}} or {{t|Overlaid images}}.
{{Superimpose
| base = US_Locator_Blank.svg
| base_width = 288px
| base_alt = Located in north central Colorado, which is just west of the center of the U.S.
| base_caption = United States Locator Map
| float = Red pog.svg
| float_width = 10px
| x = 95
| y = 80
}}
==Cropping images==
After having had an image floating next to text, putting further text below it and again using the full width can be done with the following markup. This blocks an image from appearing next to the material following this markup, possibly due to [[aesthetics|aesthetic]] reasons or a change in topics.▼
Images can be [[Cropping (image)|cropped]] using {{t|CSS image crop}} or {{t|Annotated image}}.
{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
|Location = center
|Description = A drop of dew on grass (focus on the drop)
}}
▲==Cancelling floating-around-image mode==<!-- This section is linked from [[George Fox]] -->
▲After having had an image floating next to text, putting further text below it and again using the full width can be done with the following markup. This blocks an image from appearing next to the material following this markup, possibly due to [[aesthetics|aesthetic]] reasons or a change in topics.
==VR images==
Line 571 ⟶ 585:
==See also==
* [[Wikipedia:Images]] – For an overview of images in Wikipedia
* [[Help:Pictures]]
* [[Wikipedia:Picture tutorial]]
* [[Wikimedia Commons]] ([[:commons:Main Page|Commons Main Page]]), a free [[multimedia]] [[Digital library|repository]], that you can use directly in Wikipedia and the other [[Wikimedia Foundation|Wikimedia project]]s. You can [[upload]] new images or use the stored ones.
| |||