Template:Image frame: Difference between revisions

From bg3.wiki
Jump to navigation Jump to search
(Created page with "<includeonly>{{#lvardef: clip-path|{{#switch:{{{border-shape|diamond}}} | diamond = polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) | rounded = xywh(0 0 100% 100% round 15%); | #default = {{{border-shape}}} }}}}<div style=" display: inline-block; height: calc({{{height|100px}}} + 2*{{{border-width|4px}}}); width: calc({{{height|100px}}} + 2*{{{border-width|4px}}}); clip-path: {{#lvar:clip-path}}; background: {{{border-color|black}}}; "> <div style=" position: a...")
 
No edit summary
Line 1: Line 1:
<includeonly>{{#lvardef: clip-path|{{#switch:{{{border-shape|diamond}}}
<includeonly><!--
Image width. Defaults to a square aspect ratio if only height is provided
-->{{#lvardef: width
| {{#if:{{{width|}}}|{{{width|}}}|{{{height|100}}}
}}}}<!--
Image height. Defaults to a square aspect ratio if only width is provided
-->{{#lvardef: height
| {{#if:{{{height|}}}|{{{height|}}}|{{{width|100}}}
}}}}<!--
Border frame shape. This can be either an arbitrary clip-path or one of the predefined values
-->{{#lvardef: clip-path|{{#switch:{{{border-shape|rounded}}}
| 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%)
| rounded = xywh(0 0 100% 100% round 15%);
| #default = {{{border-shape}}}
| #default = {{{border-shape}}}
}}}}<div style="
}}}}<div style="
   display: inline-block;  
   display:   inline-block;  
   height: calc({{{height|100px}}} + 2*{{{border-width|4px}}});
   height:     calc({{#lvar:height}}px + 2*{{{border-width|4}}}px);
   width: calc({{{height|100px}}} + 2*{{{border-width|4px}}});
   width:     calc({{#lvar:width}}px  + 2*{{{border-width|4}}}px);
   clip-path: {{#lvar:clip-path}};
   clip-path: {{#lvar:clip-path}};
   background: {{{border-color|black}}};
   background: {{{border-color|black}}};
">
">
<div style="
<div style="
  position: absolute;
   margin-top:  {{{border-width|4}}}px;
   margin-top:  {{{border-width|4px}}};
   margin-left: {{{border-width|4}}}px;
   margin-left: {{{border-width|4px}}};
   width:       {{#lvar:width}}px;
   width: {{{height|100px}}};
   height:     {{#lvar:height}}px;
   height: {{{height|100px}}};
   clip-path:   {{#lvar:clip-path}};
   clip-path: {{#lvar:clip-path}};
">[[File:{{{image|{{{1|}}}}}}|{{#lvar:width}}x{{#lvar:height}}px]]</div>
">[[File:Portrait Lae'zel.png|x{{{height|100px}}}]]</div>
</div></includeonly><noinclude>
</div></includeonly><noinclude>
Renders an image cropped into a frame of arbitrary shape.
== Template data ==
<templatedata>
{
    "description": "Render an image cropped into a frame of arbitrary shape.",
    "params": {
        "1": {
            "label": "Image",
            "description": "The image file to display.",
            "aliases": ["image"],
            "type": "wiki-file-name",
            "required": true
        },
        "height": {
            "label": "Height",
            "description": "The height of the image in pixels (does not include any additional height from the border size).",
            "type": "number",
            "default": "Same value as width, if defined. 100 otherwise.",
            "suggested": true,
            "required": false
        },
        "width": {
            "label": "Width",
            "description": "The width of the image in pixels (does not include any additional width from the border size).",
            "type": "number",
            "default": "Same value as height, if defined. 100 otherwise.",
            "required": false
        },
        "border-shape": {
            "label": "Border shape",
            "description": "The shape of the border frame. It can be an arbitrary CSS clip path or use one of the predefined values.",
            "type": "string",
            "default": "rounded",
            "suggestedvalues": ["rounded", "diamond"],
            "example": "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
            "suggested": true,
            "required": false
        },
        "border-color": {
            "label": "Border color",
            "description": "The color of the border frame. This can be any CSS color descriptor.",
            "type": "string",
            "default": "black",
            "required": false
        },
        "border-width": {
            "label": "Border width",
            "description": "The thickness of the border frame in pixels.",
            "type": "number",
            "default": "4",
            "required": false
        }
    }
}
</templatedata>


== Examples ==
== Examples ==
Line 25: Line 87:
| <nowiki>
| <nowiki>
{{User:NtCarlson/Template:Foo
{{User:NtCarlson/Template:Foo
| height = 120px
| image = Portrait Lae'zel.png
| width = 120
| border-shape = diamond
| border-shape = diamond
| border-width = 4px
| border-width = 4
}}
}}
</nowiki>
</nowiki>
| <nowiki>
| <nowiki>
{{User:NtCarlson/Template:Foo
{{User:NtCarlson/Template:Foo
| height = 120px
| image = Portrait Lae'zel.png
| height = 120
| border-shape = rounded
| border-shape = rounded
| border-width = 2px
| border-width = 2
| border-color = red
| border-color = red
}}
}}
Line 40: Line 104:
| <nowiki>
| <nowiki>
{{User:NtCarlson/Template:Foo
{{User:NtCarlson/Template:Foo
| height = 120px
| 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-shape = polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
| border-width = 2px
| border-width = 2
| border-color = #3d3d3d
| border-color = #3d3d3d
}}
}}

Revision as of 17:56, 20 July 2024

Template data

Render an image cropped into a frame of arbitrary shape.

Template parameters

ParameterDescriptionTypeStatus
Image1 image

The image file to display.

Filerequired
Heightheight

The height of the image in pixels (does not include any additional height from the border size).

Default
Same value as width, if defined. 100 otherwise.
Numbersuggested
Widthwidth

The width of the image in pixels (does not include any additional width from the border size).

Default
Same value as height, if defined. 100 otherwise.
Numberoptional
Border shapeborder-shape

The shape of the border frame. It can be an arbitrary CSS clip path or use one of the predefined values.

Suggested values
rounded diamond
Default
rounded
Example
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
Stringsuggested
Border colorborder-color

The color of the border frame. This can be any CSS color descriptor.

Default
black
Stringoptional
Border widthborder-width

The thickness of the border frame in pixels.

Default
4
Numberoptional

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 

{{User:NtCarlson/Template:Foo
| image = Portrait Lae'zel.png
| height = 120
| border-shape = rounded
| border-width = 2
| border-color = red
}}

User:NtCarlson/Template:Foo 

{{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

Retrieved from "https://bg3.wiki/w/index.php?title=Template:Image_frame&oldid=209399"