Template:Image frame: Difference between revisions

From bg3.wiki
Jump to navigation Jump to search
(Suppress the outer div if the border width is 0)
(Added caption parameter)
 
(11 intermediate revisions by the same user not shown)
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 | {{#replace:{{{width|{{{w|{{{height|{{{h|100}}}}}}}}}}}}|px|}}}}<!--
| {{#if:{{{width|}}}|{{{width|}}}|{{{height|100}}}
Image height. Defaults to a square aspect ratio if only width is provided.
}}}}<!--
-->{{#lvardef: height | {{#replace:{{{height|{{{h|{{{width|{{{w|100}}}}}}}}}}}}|px|}}}}<!--
Image height. Defaults to a square aspect ratio if only width is provided
Border width. If this is 0, the outer div used for the border will not be created.
-->{{#lvardef: height
-->{{#lvardef: border-width | {{#replace:{{{border-width|{{{bw|4}}}}}}|px|}}}}<!--
| {{#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|{{{bs|rounded}}}}}}
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%)
| 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%)
| #default = {{{border-shape}}}
| basic  = none
}}}}{{#ifexpr: {{{border-width|4}}} > 0|<div style="
| #default = {{{border-shape|{{{bs|}}}}}}
}}}}{{#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 -->
<div {{#if:{{{class|}}}|class="{{{class|}}}"}} style="
   display:    inline-block;  
   display:    inline-block;  
   height:    calc({{#lvar:height}}px + 2*{{{border-width|4}}}px);
   height:    calc({{#lvar:height}}px + 2*{{#lvar:border-width}}px);
   width:      calc({{#lvar:width}}px  + 2*{{{border-width|4}}}px);
   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="
{{{style|}}}">
   margin-top: {{{border-width|4}}}px;
<div style="
  margin-left: {{{border-width|4}}}px;
   margin:     {{#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|link={{{link|{{{2|}}}}}}]]</div>
{{#ifexpr: {{{border-width|4}}} > 0|</div>|}}</includeonly><noinclude>
</div>
| <!--Case when the border width is 0 so omit the outer div -->
<div {{#if:{{{class|}}}|class="{{{class|}}}"}} style="
  width:      {{#lvar:width}}px;
  height:      {{#lvar:height}}px;
  clip-path:  {{#lvar:clip-path}};
{{{style|}}}">[[File:{{{image|{{{1|}}}}}}|{{#lvar:width}}x{{#lvar:height}}px|link={{{link|{{{2|}}}}}}]]</div>
}}{{#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).
 
== Examples ==
{{Template demo
| <nowiki>
{{Image frame
| image = Portrait Lae'zel.png
| link = Lae'zel
| width = 120
| border-shape = diamond
| border-width = 4
}}
</nowiki>
| <nowiki>
{{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;
}}
</nowiki>
| <nowiki>
{{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
}}
</nowiki>
| <nowiki>
{{Image frame|Portrait Lae'zel.png|Lae'zel|h=120|bw=0}}
</nowiki>
| <nowiki>
{{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);
}}
</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>
}}
 
== Template data ==
== Template data ==
<templatedata>
<templatedata>
Line 38: Line 111:
             "type": "wiki-file-name",
             "type": "wiki-file-name",
             "required": true
             "required": true
        },
        "2": {
            "label": "Link",
            "description": "Clicking the image redirects to this link instead of the image file.",
            "aliases": ["link"],
            "type": "wiki-page-name",
            "suggested": true,
            "required": false
         },
         },
         "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 49: Line 131:
         "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 56: Line 139:
         "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",
             "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,
Line 66: Line 150:
         "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 73: Line 158:
         "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",
            "required": false
        },
        "class": {
            "label": "Class",
            "description": "A CSS class to apply to the image div.",
            "type": "string",
            "required": false
        },
        "style": {
            "label": "Style",
            "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",
             "required": false
             "required": false
         }
         }
     }
     }
}
}
</templatedata>
</templatedata>}}
 
[[Category:Templates]]
== Examples ==
{{Template demo
| <nowiki>
{{User:NtCarlson/Template:Foo
| image = Portrait Lae'zel.png
| width = 120
| border-shape = diamond
| border-width = 4
}}
</nowiki>
| <nowiki>
{{User:NtCarlson/Template:Foo
| image = Portrait Lae'zel.png
| height = 120
| border-shape = rounded
| border-width = 2
| border-color = red
}}
</nowiki>
| <nowiki>
{{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
}}
</nowiki>
| <nowiki>
{{User:NtCarlson/Template:Foo
| image = Portrait Lae'zel.png
| height = 120
| border-width = 0
}}
</nowiki>
}}
</noinclude>
</noinclude>

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
}}
Portrait Lae'zel.png
 
{{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;
}}
Portrait Lae'zel.png
 
{{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
}}
Portrait Lae'zel.png
 
{{Image frame|Portrait Lae'zel.png|Lae'zel|h=120|bw=0}}
Portrait Lae'zel.png
 
{{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);
}}
Portrait Lae'zel.png
 
{{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.
}}
Portrait Lae'zel.png
This is a long caption that will require wrapping.

Template data

Render an image cropped into a frame of arbitrary shape.

Template parameters

ParameterDescriptionTypeStatus
Image1 image

The image file to display.

Filerequired
Link2 link

Clicking the image redirects to this link instead of the image file.

Page namesuggested
Heightheight h

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 w

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 bs

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 basic
Default
rounded
Example
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
Stringsuggested
Border colorborder-color bc

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

Default
black
Stringoptional
Border widthborder-width bw

The thickness of the border frame in pixels. Set this to 0 to disable the border entirely.

Default
4
Numberoptional
Classclass

A CSS class to apply to the image div.

Stringoptional
Stylestyle

Any additional CSS style properties to apply to the image div.

Stringoptional
Captioncaption

A caption or other text to place under the image.

Stringoptional
Subpages of this template.
Retrieved from "https://bg3.wiki/w/index.php?title=Template:Image_frame&oldid=212318"