Template:Image frame: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
(Suppress the outer div if the border width is 0) |
||
| Line 13: | Line 13: | ||
| diamond = polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) | | diamond = polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) | ||
| #default = {{{border-shape}}} | | #default = {{{border-shape}}} | ||
}}}}<div style=" | }}}}{{#ifexpr: {{{border-width|4}}} > 0|<div style=" | ||
display: inline-block; | display: inline-block; | ||
height: calc({{#lvar:height}}px + 2*{{{border-width|4}}}px); | height: calc({{#lvar:height}}px + 2*{{{border-width|4}}}px); | ||
| Line 19: | Line 19: | ||
clip-path: {{#lvar:clip-path}}; | clip-path: {{#lvar:clip-path}}; | ||
background: {{{border-color|black}}}; | background: {{{border-color|black}}}; | ||
"> | ">|}}<div style=" | ||
<div style=" | |||
margin-top: {{{border-width|4}}}px; | margin-top: {{{border-width|4}}}px; | ||
margin-left: {{{border-width|4}}}px; | margin-left: {{{border-width|4}}}px; | ||
| Line 27: | Line 26: | ||
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> | ||
</div></includeonly><noinclude> | {{#ifexpr: {{{border-width|4}}} > 0|</div>|}}</includeonly><noinclude> | ||
== Template data == | == Template data == | ||
<templatedata> | <templatedata> | ||
| Line 109: | Line 108: | ||
| border-width = 2 | | border-width = 2 | ||
| border-color = #3d3d3d | | border-color = #3d3d3d | ||
}} | |||
</nowiki> | |||
| <nowiki> | |||
{{User:NtCarlson/Template:Foo | |||
| image = Portrait Lae'zel.png | |||
| height = 120 | |||
| border-width = 0 | |||
}} | }} | ||
</nowiki> | </nowiki> | ||
}} | }} | ||
</noinclude> | </noinclude> | ||
Revision as of 19:32, 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
}}
|