Template:Image frame: Difference between revisions
Jump to navigation
Jump to search
(Fixed incorrectly setting margin when border-width = 0) |
(Added caption parameter) |
||
| Line 12: | Line 12: | ||
| basic = none | | basic = none | ||
| #default = {{{border-shape|{{{bs|}}}}}} | | #default = {{{border-shape|{{{bs|}}}}}} | ||
}}}}{{#ifexpr: {{#lvar:border-width}} > 0 | }}}}{{#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 --> | | <!--Case when the border width is > 0 which requires an outer div --> | ||
<div {{#if:{{{class|}}}|class="{{{class|}}}"}} style=" | <div {{#if:{{{class|}}}|class="{{{class|}}}"}} style=" | ||
| Line 34: | Line 35: | ||
clip-path: {{#lvar:clip-path}}; | clip-path: {{#lvar:clip-path}}; | ||
{{{style|}}}">[[File:{{{image|{{{1|}}}}}}|{{#lvar:width}}x{{#lvar:height}}px|link={{{link|{{{2|}}}}}}]]</div> | {{{style|}}}">[[File:{{{image|{{{1|}}}}}}|{{#lvar:width}}x{{#lvar:height}}px|link={{{link|{{{2|}}}}}}]]</div> | ||
}}</includeonly><noinclude>{{documentation|content= | }}{{#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). | 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). | ||
| Line 82: | Line 83: | ||
| class = bg3wiki-image-quote-image | | class = bg3wiki-image-quote-image | ||
| style = transform: rotate(180deg); | | 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> | </nowiki> | ||
| Line 159: | Line 173: | ||
"label": "Style", | "label": "Style", | ||
"description": "Any additional CSS style properties to apply to the image div.", | "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", | "type": "string", | ||
"required": false | "required": false | ||
Latest revision as of 22:34, 26 July 2024
Template documentation
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.
}}
|
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 |