Template:SmartWrap: Difference between revisions

Latest revision as of 03:39, 26 July 2025

Call this template when you want to place an image of a circular object on the right side of a page. Normally MediaWiki will assume that an image should be treated as a box and will wrap any nearby text around it accordingly. This template will tell the browser to wrap the text assuming that the image is a circle, so that text can run past the borders of the image where appropriate.

Sample usage: {{SmartWrap|[[Image:Something.png]]|shadow=yes}}

Parameters:

place: Set this to "left", "center" or "right" to set the alignment; "center" is the default.
shape: Set this to "circle" to get a circular shadow, as seen on Music/CD. A box shadow is the default.
shadow: If set to "yes", the image will have a soft gray shadow underlying it on all sides. The shadow can be customized with these additional parameters:
- off_x: How far to the right to offset the shadow, in rem.
- off_y: How far to down to offset the shadow, in rem.
- blur: The blur radius for the shadow, in rem (default 1). Essentially how diffuse the shadow should be.
- spread: The spread for the shadow, in px (default 9). This refers to how far the shadow should spread out before it begins to blur.
- color: Self-explanatory (default #dadada).

@@ Line 1: / Line 1: @@
-<includeonly><div style="float:right; shape-outside:circle() border-box; border-radius:50%; {{#ifeq:{{{shadow|}}}|yes|box-shadow:0rem 0rem 1rem 9px #dadada;}}">{{{1}}}</div></includeonly><noinclude>
+<includeonly>{| style="{{#ifeq:{{{place|center}}}|center|{{center}}|{{#ifeq:{{{place}}}|left|float:left|float:right}}}}; shape-outside:{{#ifeq:{{{shape|}}}|circle|circle()}} border-box; {{#ifeq:{{{shape|}}}|circle|border-radius:50%;}} {{#ifeq:{{{shadow|}}}|yes|box-shadow:{{{off_x|0}}}rem {{{off_y|0}}}rem {{{blur|1}}}rem {{{spread|9}}}px {{{color|#dadada}}};}}"
-Call this template when you want to place an image of a circular object on the right side of a page. Normally MediaWiki will assume that an image should be treated as a box and will wrap any nearby text around it accordingly. This template will tell the browser to wrap the text assuming that the image is a circle, so that text can run past the borders of the image where appropriate. See [[Music/CD]] for an example.
+|{{{1}}}
+|}</includeonly><noinclude>
+Call this template when you want to place an image of a circular object on the right side of a page. Normally MediaWiki will assume that an image should be treated as a box and will wrap any nearby text around it accordingly. This template will tell the browser to wrap the text assuming that the image is a circle, so that text can run past the borders of the image where appropriate.
 Sample usage: <tt><nowiki>{{SmartWrap|[[Image:Something.png]]|shadow=yes}}</nowiki></tt>
 Parameters:
-*'''shadow''': If set to "yes", the image will have a soft gray shadow underlying it on all sides.
+*'''place''': Set this to "left", "center" or "right" to set the alignment; "center" is the default.
+*'''shape''': Set this to "circle" to get a circular shadow, as seen on [[Music/CD]]. A box shadow is the default.
-If the template is going to be used in additional places on the wiki, it would be logical to parameterize more of the CSS attributes such as <tt>box-shadow</tt> so that the user has control over them. And wrapping is not limited to the shape of a circle; essentially all shapes are possible with CSS, such as polygons and image-based masking paths, so the template could be expanded to allow those as well.
+*'''shadow''': If set to "yes", the image will have a soft gray shadow underlying it on all sides. The shadow can be customized with these additional parameters:
+**'''off_x''': How far to the right to offset the shadow, in rem.
+**'''off_y''': How far to down to offset the shadow, in rem.
+**'''blur''': The blur radius for the shadow, in rem (default 1). Essentially how diffuse the shadow should be.
+**'''spread''': The spread for the shadow, in px (default 9). This refers to how far the shadow should spread out before it begins to blur.
+**'''color''': Self-explanatory (default #dadada).
 [[Category:Basic formatting templates]]</noinclude>