Template:Image frame: Difference between revisions
Jump to navigation
Jump to search
(Added basic style that doesn't use a clip-path) |
(Added template parameter aliases) |
||
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 | -->{{#lvardef: width | {{{width|{{{w|{{{height|{{{h|100}}}}}}}}}}}}}}<!-- | ||
| {{ | |||
}}}}<!-- | |||
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 | -->{{#lvardef: height | {{{height|{{{h|{{{width|{{{w|100}}}}}}}}}}}}}}<!-- | ||
| {{ | Border width. If this is 0, the outer div used for the border will not be created. | ||
}}}}<!-- | -->{{#lvardef: border-width | {{{border-width|{{{bw|4}}}}}}}}<!-- | ||
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|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%) | ||
| diamond = polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) | | diamond = polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) | ||
| basic = none | | basic = none | ||
| #default = {{{border-shape}}} | | #default = {{{border-shape|{{{bs|}}}}}} | ||
}}}}{{#ifexpr: {{ | }}}}{{#ifexpr: {{#lvar:border-width}} > 0|<div style=" | ||
display: inline-block; | display: inline-block; | ||
height: calc({{#lvar:height}}px + 2*{{ | height: calc({{#lvar:height}}px + 2*{{#lvar:border-width}}px); | ||
width: calc({{#lvar:width}}px + 2*{{ | width: calc({{#lvar:width}}px + 2*{{#lvar:border-width}}px); | ||
clip-path: {{#lvar:clip-path}}; | clip-path: {{#lvar:clip-path}}; | ||
background: {{{border-color|black}}}; | background: {{{border-color|{{{bc|black}}}}}}; | ||
">|}}<div style=" | ">|}}<div style=" | ||
margin-top: {{ | margin-top: {{#lvar:border-width}}px; | ||
margin-left: {{ | margin-left: {{#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]]</div> | ||
{{#ifexpr: {{ | {{#ifexpr: {{#lvar:border-width}} > 0|</div>|}}</includeonly><noinclude> | ||
== Template data == | == Template data == | ||
<templatedata> | <templatedata> | ||
Line 42: | Line 40: | ||
"height": { | "height": { | ||
"label": "Height", | "label": "Height", | ||
"aliases": ["h"], | |||
"description": "The height of the image in pixels (does not include any additional height from the border size).", | "description": "The height of the image in pixels (does not include any additional height from the border size).", | ||
"type": "number", | "type": "number", | ||
Line 50: | Line 49: | ||
"width": { | "width": { | ||
"label": "Width", | "label": "Width", | ||
"aliases": ["w"], | |||
"description": "The width of the image in pixels (does not include any additional width from the border size).", | "description": "The width of the image in pixels (does not include any additional width from the border size).", | ||
"type": "number", | "type": "number", | ||
Line 57: | Line 57: | ||
"border-shape": { | "border-shape": { | ||
"label": "Border shape", | "label": "Border shape", | ||
"aliases": ["bs"], | |||
"description": "The shape of the border frame. It can be an arbitrary CSS clip path or use one of the predefined values.", | "description": "The shape of the border frame. It can be an arbitrary CSS clip path or use one of the predefined values.", | ||
"type": "string", | "type": "string", | ||
Line 67: | Line 68: | ||
"border-color": { | "border-color": { | ||
"label": "Border color", | "label": "Border color", | ||
"aliases": ["bc"], | |||
"description": "The color of the border frame. This can be any CSS color descriptor.", | "description": "The color of the border frame. This can be any CSS color descriptor.", | ||
"type": "string", | "type": "string", | ||
Line 74: | Line 76: | ||
"border-width": { | "border-width": { | ||
"label": "Border width", | "label": "Border width", | ||
"description": "The thickness of the border frame in pixels.", | "aliases": ["bw"], | ||
"description": "The thickness of the border frame in pixels. Set this to 0 to disable the border entirely.", | |||
"type": "number", | "type": "number", | ||
"default": "4", | "default": "4", | ||
Line 96: | Line 99: | ||
{{User:NtCarlson/Template:Foo | {{User:NtCarlson/Template:Foo | ||
| image = Portrait Lae'zel.png | | image = Portrait Lae'zel.png | ||
| | | h = 120 | ||
| | | bs = rounded | ||
| | | bw = 2 | ||
| | | bc = red | ||
}} | }} | ||
</nowiki> | </nowiki> | ||
Line 114: | Line 117: | ||
{{User:NtCarlson/Template:Foo | {{User:NtCarlson/Template:Foo | ||
| image = Portrait Lae'zel.png | | image = Portrait Lae'zel.png | ||
| | | h = 120 | ||
| | | bw = 0 | ||
}} | }} | ||
</nowiki> | </nowiki> | ||
}} | }} | ||
</noinclude> | </noinclude> |
Revision as of 20:51, 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 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 |
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 | h = 120 | bs = rounded | bw = 2 | bc = 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 | h = 120 | bw = 0 }} |