Template:Image frame: Difference between revisions
Jump to navigation
Jump to search
(Suppress the outer div if the border width is 0) |
(Added basic style that doesn't use a clip-path) |
||
| Line 12: | Line 12: | ||
| rounded = xywh(0 0 100% 100% round 15%) | | rounded = xywh(0 0 100% 100% round 15%) | ||
| diamond = polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) | | diamond = polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) | ||
| basic = none | |||
| #default = {{{border-shape}}} | | #default = {{{border-shape}}} | ||
}}}}{{#ifexpr: {{{border-width|4}}} > 0|<div style=" | }}}}{{#ifexpr: {{{border-width|4}}} > 0|<div style=" | ||
| Line 59: | Line 60: | ||
"type": "string", | "type": "string", | ||
"default": "rounded", | "default": "rounded", | ||
"suggestedvalues": ["rounded", "diamond"], | "suggestedvalues": ["rounded", "diamond", "basic"], | ||
"example": "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)", | "example": "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)", | ||
"suggested": true, | "suggested": true, | ||
Revision as of 20:37, 20 July 2024
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 |
| Height | height | The height of the image in pixels (does not include any additional height from the border size).
| Number | suggested |
| Width | width | The width of the image in pixels (does not include any additional width from the border size).
| Number | optional |
| Border shape | border-shape | 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 | The color of the border frame. This can be any CSS color descriptor.
| String | optional |
| Border width | border-width | The thickness of the border frame in pixels.
| Number | optional |
Examples
| Markup | Renders as |
|---|---|
{{User:NtCarlson/Template:Foo
| image = Portrait Lae'zel.png
| width = 120
| border-shape = diamond
| border-width = 4
}}
| |
{{User:NtCarlson/Template:Foo
| image = Portrait Lae'zel.png
| height = 120
| border-shape = rounded
| border-width = 2
| border-color = red
}}
| |
{{User:NtCarlson/Template:Foo
| image = Portrait Lae'zel.png
| 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
| image = Portrait Lae'zel.png
| height = 120
| border-width = 0
}}
|