Template:Image frame: Difference between revisions
(Added template parameter aliases) |
(Added caption parameter) |
||
(9 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<includeonly><!-- | <includeonly><!-- | ||
Image width. Defaults to a square aspect ratio if only height is provided | Image width. Defaults to a square aspect ratio if only height is provided. | ||
-->{{#lvardef: width | {{{width|{{{w|{{{height|{{{h|100}}}}}}}}}}}}}}<!-- | -->{{#lvardef: width | {{#replace:{{{width|{{{w|{{{height|{{{h|100}}}}}}}}}}}}|px|}}}}<!-- | ||
Image height. Defaults to a square aspect ratio if only width is provided | Image height. Defaults to a square aspect ratio if only width is provided. | ||
-->{{#lvardef: height | {{{height|{{{h|{{{width|{{{w|100}}}}}}}}}}}}}}<!-- | -->{{#lvardef: height | {{#replace:{{{height|{{{h|{{{width|{{{w|100}}}}}}}}}}}}|px|}}}}<!-- | ||
Border width. If this is 0, the outer div used for the border will not be created. | Border width. If this is 0, the outer div used for the border will not be created. | ||
-->{{#lvardef: border-width | {{{border-width|{{{bw|4}}}}}}}}<!-- | -->{{#lvardef: border-width | {{#replace:{{{border-width|{{{bw|4}}}}}}|px|}}}}<!-- | ||
Border frame shape. This can be either an arbitrary clip-path or one of the predefined values | Border frame shape. This can be either an arbitrary clip-path or one of the predefined values. | ||
-->{{#lvardef: clip-path|{{#switch:{{{border-shape|{{{bs|rounded}}}}}} | -->{{#lvardef: clip-path|{{#switch:{{{border-shape|{{{bs|rounded}}}}}} | ||
| rounded = xywh(0 0 100% 100% round 15%) | | rounded = xywh(0 0 100% 100% round 15%) | ||
Line 12: | Line 12: | ||
| basic = none | | basic = none | ||
| #default = {{{border-shape|{{{bs|}}}}}} | | #default = {{{border-shape|{{{bs|}}}}}} | ||
}}}}{{#ifexpr: {{#lvar:border-width}} > 0|<div style=" | }}}}{{#if: {{{caption|}}}|<div style="width:calc({{#lvar:width}}px + 2*{{#lvar:border-width}}px)">}} | ||
{{#ifexpr: {{#lvar:border-width}} > 0 | |||
| <!--Case when the border width is > 0 which requires an outer div --> | |||
<div {{#if:{{{class|}}}|class="{{{class|}}}"}} style=" | |||
display: inline-block; | display: inline-block; | ||
height: calc({{#lvar:height}}px + 2*{{#lvar:border-width}}px); | height: calc({{#lvar:height}}px + 2*{{#lvar:border-width}}px); | ||
Line 18: | Line 21: | ||
clip-path: {{#lvar:clip-path}}; | clip-path: {{#lvar:clip-path}}; | ||
background: {{{border-color|{{{bc|black}}}}}}; | background: {{{border-color|{{{bc|black}}}}}}; | ||
{{{style|}}}"> | |||
margin | <div style=" | ||
margin: {{#lvar:border-width}}px; | |||
width: {{#lvar:width}}px; | width: {{#lvar:width}}px; | ||
height: {{#lvar:height}}px; | height: {{#lvar:height}}px; | ||
clip-path: {{#lvar:clip-path}}; | clip-path: {{#lvar:clip-path}}; | ||
">[[File:{{{image|{{{1|}}}}}}|{{#lvar:width}}x{{#lvar:height}}px]]</div> | ">[[File:{{{image|{{{1|}}}}}}|{{#lvar:width}}x{{#lvar:height}}px|link={{{link|{{{2|}}}}}}]]</div> | ||
{{# | </div> | ||
| <!--Case when the border width is 0 so omit the outer div --> | |||
<div {{#if:{{{class|}}}|class="{{{class|}}}"}} style=" | |||
width: {{#lvar:width}}px; | |||
height: {{#lvar:height}}px; | |||
clip-path: {{#lvar:clip-path}}; | |||
{{{style|}}}">[[File:{{{image|{{{1|}}}}}}|{{#lvar:width}}x{{#lvar:height}}px|link={{{link|{{{2|}}}}}}]]</div> | |||
}}{{#if: {{{caption|}}}|<div style="text-align:center">{{{caption}}}</div></div>}}</includeonly><noinclude>{{documentation|content= | |||
Render an image cropped into a frame of arbitrary shape. The shape of the border or frame is defined by a [https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path CSS clip-path] or can use one of the predefined shapes (rounded, diamond, basic). | |||
== Examples == | |||
{{Template demo | |||
| <nowiki> | |||
{{Image frame | |||
| image = Portrait Lae'zel.png | |||
| link = Lae'zel | |||
| width = 120 | |||
| border-shape = diamond | |||
| border-width = 4 | |||
}} | |||
</nowiki> | |||
| <nowiki> | |||
{{Image frame | |||
| image = Portrait Lae'zel.png | |||
| link = Lae'zel | |||
| h = 120px | |||
| bs = rounded | |||
| bw = 2px | |||
| bc = red | |||
| class = bg3wiki-image-quote-image | |||
| style = margin:20px; | |||
}} | |||
</nowiki> | |||
| <nowiki> | |||
{{Image frame | |||
| image = Portrait Lae'zel.png | |||
| link = Lae'zel | |||
| height = 120 | |||
| border-shape = polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); | |||
| border-width = 2 | |||
| border-color = #3d3d3d | |||
}} | |||
</nowiki> | |||
| <nowiki> | |||
{{Image frame|Portrait Lae'zel.png|Lae'zel|h=120|bw=0}} | |||
</nowiki> | |||
| <nowiki> | |||
{{Image frame | |||
| image = Portrait Lae'zel.png | |||
| link = Lae'zel | |||
| h = 120px | |||
| bs = rounded | |||
| bw = 0 | |||
| class = bg3wiki-image-quote-image | |||
| style = transform: rotate(180deg); | |||
}} | |||
</nowiki> | |||
| <nowiki> | |||
{{Image frame|Portrait Lae'zel.png|Lae'zel|caption=[[Lae'zel]]|h=120|bw=0}} | |||
</nowiki> | |||
| <nowiki> | |||
{{Image frame | |||
| image = Portrait Lae'zel.png | |||
| link = Lae'zel | |||
| height = 120px | |||
| border-shape = basic | |||
| border-width = 0 | |||
| caption = This is a long caption that will require wrapping. | |||
}} | |||
</nowiki> | |||
}} | |||
== Template data == | == Template data == | ||
<templatedata> | <templatedata> | ||
Line 37: | Line 111: | ||
"type": "wiki-file-name", | "type": "wiki-file-name", | ||
"required": true | "required": true | ||
}, | |||
"2": { | |||
"label": "Link", | |||
"description": "Clicking the image redirects to this link instead of the image file.", | |||
"aliases": ["link"], | |||
"type": "wiki-page-name", | |||
"suggested": true, | |||
"required": false | |||
}, | }, | ||
"height": { | "height": { | ||
Line 80: | Line 162: | ||
"type": "number", | "type": "number", | ||
"default": "4", | "default": "4", | ||
"required": false | |||
}, | |||
"class": { | |||
"label": "Class", | |||
"description": "A CSS class to apply to the image div.", | |||
"type": "string", | |||
"required": false | |||
}, | |||
"style": { | |||
"label": "Style", | |||
"description": "Any additional CSS style properties to apply to the image div.", | |||
"type": "string", | |||
"required": false | |||
}, | |||
"caption": { | |||
"label": "Caption", | |||
"description": "A caption or other text to place under the image.", | |||
"type": "string", | |||
"required": false | "required": false | ||
} | } | ||
} | } | ||
} | } | ||
</templatedata> | </templatedata>}} | ||
[[Category:Templates]] | |||
}} | |||
</noinclude> | </noinclude> |
Latest revision as of 23:34, 26 July 2024
Render an image cropped into a frame of arbitrary shape. The shape of the border or frame is defined by a CSS clip-path or can use one of the predefined shapes (rounded, diamond, basic).
Examples
Markup | Renders as |
---|---|
{{Image frame | image = Portrait Lae'zel.png | link = Lae'zel | width = 120 | border-shape = diamond | border-width = 4 }} | |
{{Image frame | image = Portrait Lae'zel.png | link = Lae'zel | h = 120px | bs = rounded | bw = 2px | bc = red | class = bg3wiki-image-quote-image | style = margin:20px; }} | |
{{Image frame | image = Portrait Lae'zel.png | link = Lae'zel | height = 120 | border-shape = polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); | border-width = 2 | border-color = #3d3d3d }} | |
{{Image frame|Portrait Lae'zel.png|Lae'zel|h=120|bw=0}} | |
{{Image frame | image = Portrait Lae'zel.png | link = Lae'zel | h = 120px | bs = rounded | bw = 0 | class = bg3wiki-image-quote-image | style = transform: rotate(180deg); }} | |
{{Image frame|Portrait Lae'zel.png|Lae'zel|caption=[[Lae'zel]]|h=120|bw=0}} | |
{{Image frame | image = Portrait Lae'zel.png | link = Lae'zel | height = 120px | border-shape = basic | border-width = 0 | caption = This is a long caption that will require wrapping. }} |
Template data
Render an image cropped into a frame of arbitrary shape.
Parameter | Description | Type | Status | |
---|---|---|---|---|
Image | 1 image | The image file to display. | File | required |
Link | 2 link | Clicking the image redirects to this link instead of the image file. | Page name | suggested |
Height | height h | The height of the image in pixels (does not include any additional height from the border size).
| Number | suggested |
Width | width w | The width of the image in pixels (does not include any additional width from the border size).
| Number | optional |
Border shape | border-shape bs | The shape of the border frame. It can be an arbitrary CSS clip path or use one of the predefined values.
| String | suggested |
Border color | border-color bc | The color of the border frame. This can be any CSS color descriptor.
| String | optional |
Border width | border-width bw | The thickness of the border frame in pixels. Set this to 0 to disable the border entirely.
| Number | optional |
Class | class | A CSS class to apply to the image div. | String | optional |
Style | style | Any additional CSS style properties to apply to the image div. | String | optional |
Caption | caption | A caption or other text to place under the image. | String | optional |