Template:Quote fancy: Difference between revisions
(Linked stylesheet) |
(Switched to using Template:Image frame) |
||
Line 4: | Line 4: | ||
<div style="justify-content:{{{align|left}}}; flex-direction:{{#ifeq:{{{image-position|}}}|right|row-reverse|row}}" class="bg3wiki-image-quote"> | <div style="justify-content:{{{align|left}}}; flex-direction:{{#ifeq:{{{image-position|}}}|right|row-reverse|row}}" class="bg3wiki-image-quote"> | ||
<!-- Quote image --> | <!-- Quote image --> | ||
{{#if:{{{image|}}}| | {{#if:{{{image|}}}| {{Image frame | ||
| image = {{{image|}}} | |||
| link = {{{link|}}} | |||
| height = {{{height|80}}} | |||
| border-shape = {{{image-border-shape|rounded}}} | |||
| border-width = {{{image-border-width|0}}} | |||
| border-color = {{{image-border-color|}}} | |||
}}}} | |||
<!-- Container for the quote and the author/attribution if present --> | <!-- Container for the quote and the author/attribution if present --> | ||
<div style="display: flex; flex-direction: column;"> | <div style="display: flex; flex-direction: column;"> | ||
Line 23: | Line 30: | ||
</div></includeonly><noinclude>{{documentation|content= | </div></includeonly><noinclude>{{documentation|content= | ||
Display a quote with an accompanying image which are vertically aligned with each other. | Display a quote with an accompanying image which are vertically aligned with each other. | ||
Refer to [[Template:Image frame]] for the template used to render the image. | |||
This template has an associated stylesheet at [[Template:ImageQuote/style.css]]. | This template has an associated stylesheet at [[Template:ImageQuote/style.css]]. | ||
Line 42: | Line 51: | ||
| author = In-game racial description of [[Scrying Eye]]s | | author = In-game racial description of [[Scrying Eye]]s | ||
| link = Scrying Eye | | link = Scrying Eye | ||
| height = | | height = 60 | ||
| font-size = 120% | | font-size = 120% | ||
| align = center | | align = center | ||
Line 53: | Line 61: | ||
| image = Class Barbarian Badge Icon.png | | image = Class Barbarian Badge Icon.png | ||
| image-position = right | | image-position = right | ||
| height = | | height = 160 | ||
| font-size = 120% | | font-size = 120% | ||
| link = Barbarian | | link = Barbarian | ||
| align = center | | align = center | ||
}} | |||
</nowiki> | |||
| <nowiki> | |||
{{ImageQuote | |||
| quote = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | |||
| image = Portrait Gale.png | |||
| link = Gale | |||
| author = [[Gale]], casting a powerful spell | |||
| height = 60 | |||
| font-size = 100% | |||
| align = center | |||
| image-border-shape = diamond | |||
| image-border-width = 4 | |||
| image-border-color = black | |||
}} | }} | ||
</nowiki> | </nowiki> | ||
Line 75: | Line 97: | ||
"description": "Add an image to go along with the quote.", | "description": "Add an image to go along with the quote.", | ||
"type": "wiki-file-name", | "type": "wiki-file-name", | ||
"example": "Portrait Lae'zel.png" | "example": "Portrait Lae'zel.png", | ||
"suggested": true | |||
}, | |||
"link": { | |||
"label": "Link", | |||
"description": "Clicking the image will link to the specified page instead of the image file.", | |||
"type": "wiki-page-name", | |||
"example": "Lae'zel", | |||
"suggested": true | |||
}, | }, | ||
"author": { | "author": { | ||
Line 89: | Line 119: | ||
"example": "100%, 1.1em", | "example": "100%, 1.1em", | ||
"default": "130%" | "default": "130%" | ||
}, | }, | ||
"align": { | "align": { | ||
"label": "Alignment", | "label": "Alignment", | ||
"description": "Horizontal alignment of the quote", | "description": "Horizontal alignment of the quote.", | ||
"type": "string", | "type": "string", | ||
" | "suggestedvalues": ["left", "right", "center"], | ||
"default": "left" | "default": "left" | ||
}, | }, | ||
"image-position": { | "image-position": { | ||
"label": "Image position", | "label": "Image position", | ||
"description": "Position of the image relative to the quote", | "description": "Position of the image relative to the quote.", | ||
"type": "string", | "type": "string", | ||
" | "suggestedvalues": ["left", "right"], | ||
"default": "left" | "default": "left" | ||
}, | |||
"image-border-width": { | |||
"label": "Image border width", | |||
"description": "Width in pixels of the border around the image. Set to 0 to completely disable this.", | |||
"type": "number", | |||
"default": "0" | |||
}, | |||
"image-border-shape": { | |||
"label": "Image border shape", | |||
"description": "Shape of the border frame which crops the image. This can be an arbitrary CSS clip-path or a predefined value. Refer to [[Template:Image frame]] for details. The default value of basic disables this.", | |||
"type": "string", | |||
"suggestedvalues": ["rounded", "diamond", "basic"], | |||
"example": "circle(60% at 50% 50%)", | |||
"default": "basic" | |||
}, | |||
"image-border-color": { | |||
"label": "Image border color", | |||
"description": "Color of the image border. This can be a CSS color descriptor.", | |||
"type": "string", | |||
"example": "#3d3d3d", | |||
"default": "black" | |||
}, | }, | ||
"height": { | "height": { | ||
"label": "Height", | "label": "Height", | ||
"description": "The height of the image", | "description": "The height of the image in pixels.", | ||
"type": "string", | "type": "string", | ||
"example": "60px, | "example": "60px, 50", | ||
"default": " | "default": "80" | ||
} | } | ||
}, | }, |
Revision as of 21:02, 20 July 2024
Display a quote with an accompanying image which are vertically aligned with each other.
Refer to Template:Image frame for the template used to render the image.
This template has an associated stylesheet at Template:ImageQuote/style.css.
Examples
{{ImageQuote | quote = The operations of these huge steel juggernauts are powered by engines of churning hellfire. | image = Portrait Steel Watcher.png | link = Adamantine Golem }}Renders as
Page Template:ImageQuote/style.css has no content.
{{ImageQuote | quote = These levitating eyes transmit all that they see to the one who created them. | image = Portrait Scrying Eye.png | author = In-game racial description of [[Scrying Eye]]s | link = Scrying Eye | height = 60 | font-size = 120% | align = center }}Renders as
Page Template:ImageQuote/style.css has no content.
{{ImageQuote | quote = The strong embrace the wild that hides inside - keen instincts, primal physicality, and most of all, an unbridled, unquenchable rage. | image = Class Barbarian Badge Icon.png | image-position = right | height = 160 | font-size = 120% | link = Barbarian | align = center }}Renders as
Page Template:ImageQuote/style.css has no content.
{{ImageQuote | quote = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | image = Portrait Gale.png | link = Gale | author = [[Gale]], casting a powerful spell | height = 60 | font-size = 100% | align = center | image-border-shape = diamond | image-border-width = 4 | image-border-color = black }}Renders as
Page Template:ImageQuote/style.css has no content.
Template data
Display a quote with an accompanying image which are aligned with each other
Parameter | Description | Type | Status | |
---|---|---|---|---|
Quote | quote | The quote | String | required |
Image | image | Add an image to go along with the quote.
| File | suggested |
Link | link | Clicking the image will link to the specified page instead of the image file.
| Page name | suggested |
Author | author | The author or context of the quote | String | optional |
Font size | font-size | Size of the font used for the quote.
| String | optional |
Alignment | align | Horizontal alignment of the quote.
| String | optional |
Image position | image-position | Position of the image relative to the quote.
| String | optional |
Image border width | image-border-width | Width in pixels of the border around the image. Set to 0 to completely disable this.
| Number | optional |
Image border shape | image-border-shape | Shape of the border frame which crops the image. This can be an arbitrary CSS clip-path or a predefined value. Refer to [[Template:Image frame]] for details. The default value of basic disables this.
| String | optional |
Image border color | image-border-color | Color of the image border. This can be a CSS color descriptor.
| String | optional |
Height | height | The height of the image in pixels.
| String | optional |