Template:Image frame: Difference between revisions
(Added link param) |
m (Updated documentation) |
||
Line 25: | Line 25: | ||
clip-path: {{#lvar:clip-path}}; | clip-path: {{#lvar:clip-path}}; | ||
">[[File:{{{image|{{{1|}}}}}}|{{#lvar:width}}x{{#lvar:height}}px|link={{{link|{{{2|}}}}}}]]</div> | ">[[File:{{{image|{{{1|}}}}}}|{{#lvar:width}}x{{#lvar:height}}px|link={{{link|{{{2|}}}}}}]]</div> | ||
{{#ifexpr: {{#lvar:border-width}} > 0|</div>|}}</includeonly><noinclude> | {{#ifexpr: {{#lvar:border-width}} > 0|</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> | |||
{{User:NtCarlson/Template:Foo | |||
| image = Portrait Lae'zel.png | |||
| link = Lae'zel | |||
| width = 120 | |||
| border-shape = diamond | |||
| border-width = 4 | |||
}} | |||
</nowiki> | |||
| <nowiki> | |||
{{User:NtCarlson/Template:Foo | |||
| image = Portrait Lae'zel.png | |||
| link = Lae'zel | |||
| h = 120 | |||
| bs = rounded | |||
| bw = 2 | |||
| bc = red | |||
}} | |||
</nowiki> | |||
| <nowiki> | |||
{{User:NtCarlson/Template:Foo | |||
| 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> | |||
{{User:NtCarlson/Template:Foo|Portrait Lae'zel.png|Lae'zel|h=120|bw=0}} | |||
</nowiki> | |||
}} | |||
== Template data == | == Template data == | ||
<templatedata> | <templatedata> | ||
Line 92: | Line 130: | ||
} | } | ||
} | } | ||
</templatedata> | </templatedata>}} | ||
}} | |||
</noinclude> | </noinclude> |
Revision as of 20:19, 20 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 |
---|---|
{{User:NtCarlson/Template:Foo | image = Portrait Lae'zel.png | link = Lae'zel | width = 120 | border-shape = diamond | border-width = 4 }} | |
{{User:NtCarlson/Template:Foo | image = Portrait Lae'zel.png | link = Lae'zel | h = 120 | bs = rounded | bw = 2 | bc = red }} | |
{{User:NtCarlson/Template:Foo | 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 }} | |
{{User:NtCarlson/Template:Foo|Portrait Lae'zel.png|Lae'zel|h=120|bw=0}} |
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 |