Template:Img float/sandbox

This is the template sandbox page for Template:Img float (diff).
See also the companion subpage for test cases.

Template documentation[view] [edit] [history] [purge]

This template uses TemplateStyles:

Template:Img float/styles.css

This template uses a <span> element for formatting.
Block-based templates and paragraph breaks cannot be nested inside it.

See H:DIVSPAN for details.

Usage

Creates floating image and caption.

{{Img float
 | style    =
 | above    =
 | file     =
 | class    = 
 | width    = 
 | align    = 
 | polygon  = 
 | cap      = 
 | capalign = 
 | alt      = 
}}

Parameters

style: add css style attributes. If you change font size by percent you should also change line-height. For example if you want font-size to be 80%: | style = font-size: 80%; line-height: 80%;
above: add text above picture
file: The file name (without the "File:" prefix) (mandatory parameter)
class: The file's CSS class (optional)
width: The width of the image (optional, default 150px)
align: The alignment of the image on the page ("left", "right" or "center/centre"; default "right")
polygon: Polygon shape outline to allow text to wrap closer to the image if the image is not a rectangle (optional, co-ordinates as comma separated pairs)
cap: The image caption (optional). Do not use any <div> or div-based templates such as {{smaller block}} if the template is located in the middle of a paragraph as Mediwiki will add a paragraph break.
capalign: The image caption text alignment ("left", "right" or "center"; default "center")
alt: Image alt-text, ie. for mouse-over text box or for use with a screenreader for the visually impaired (required for accessibility)

Because this is a span-based template (to allow it to "float" within paragraphs without breaking the paragraph), it is disallowed to use block formatting (for example {{center}} or {{smaller block}}) in the captions.

Example

Image on right

Example

{{Img float
 | file     = The Kinematics of Machinery Fig 1.png
 | width    = 250px
 | align    = right
 | cap      = Fig. 2.
}}
{{lorem ipsum}}

Fig. 2.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image on left

Example

{{Img float
 | file     = The Kinematics of Machinery Fig 1.png
 | width    = 250px
 | align    = left
 | cap      = Fig. 2.
}}
{{lorem ipsum}}

Fig. 2.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Left aligned image caption

Example

{{Img float
 | file     = The Kinematics of Machinery Fig 1.png
 | width    = 250px
 | align    = right
 | cap      = Fig. 2. On the left.
 | capalign = left
}}
{{lorem ipsum}}

Fig. 2. On the left.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image on right with above text

Example

{{Img float
 | style = 
 | above = Fig. 2
 | file     = The Kinematics of Machinery Fig 1.png
 | width    = 250px
 | align    = right
 | cap      = This is image of kinematics of machinery fig 1.
}}
{{lorem ipsum}}

Fig. 2

This is image of kinematics of machinery fig 1.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image in centre

Example

{{lorem ipsum}}
{{Img float
 | file = The Kinematics of Machinery Fig 1.png
 | width = 250px
 | align = center
 | cap = Fig. 2.
}}
{{lorem ipsum}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Fig. 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image in centre without template

Alternatively, don't use a template for this, just insert the image followed by the caption like this:

Example

{{lorem ipsum}}
[[File:The Kinematics of Machinery Fig 1.png|center|250px]]
{{c|Fig.2}}

{{lorem ipsum}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Fig.2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Polygon shape outlines

If the image is not a rectangle, and you want text to wrap closer to the image, use the polygon parameter. This parameter uses CSS polygon syntax: comma separated pairs of co-ordinates, either given as a percentage (e.g. 20%, 50%).

Note: Pixel values (e.g. 10px, 25px) may appear to work, but they will result in the text being wrapped incorrectly on the mobile interface if the image is scaled to fit the screen (which will happen on most phone screens if the image is wider than about 350px). Therefore, prefer the relative percentage sizes where possible.

Note: this sets the CSS shape-outside style, which overrides the margin-box for text-wrapping. This means if you set margins in the style parameter, they will be ignored if you also set polygon.

Example

{{img float
 |file = Select Popular Tales from the German of Musaeus (drop cap, page 1).jpg
 |align = left
 |width = 300px
 |polygon = 0 0, 100% 0, 100% 34%, 60% 34%, 60% 58%, 36% 58%, 36% 100%, 0 100%
}}
{{lorem ipsum}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Caution: divs break paragraphs and cause linter errors

This template is a span-based template, which means it can "float" within a paragraph without breaking the surrounding text into two paragraphs.

However this means that you cannot use any div-based formatting within the cap field.

Example

{{lorem ipsum}}
{{Img float
 | file     = The Kinematics of Machinery Fig 1.png
 | width    = 250px
 | cap      = {{smaller block|This is a div-based template and will break the paragraph where the template is inserted.}}
}}
'''Break!''' {{lorem ipsum}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a div-based template and will break the paragraph where the template is inserted.

Break! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Parameter		Description	Type	Status
align	`align`	no description	Unknown	optional
capalign	`capalign`	no description	Unknown	optional
width	`width`	no description	Unknown	optional
polygon	`polygon`	no description	Unknown	optional
style	`style`	no description	Unknown	optional
above	`above`	no description	Unknown	optional
file	`file`	no description	Unknown	optional
class	`class`	no description	Unknown	optional
alt	`alt`	no description	Unknown	optional
cap	`cap`	no description	Unknown	optional
float	`float`	no description	Unknown	optional