Template:Quote fancy: Difference between revisions
(Completed move) |
mNo edit summary |
||
(8 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
<!-- Import template-specific CSS --> | <!-- Import template-specific CSS --> | ||
<templatestyles src="Quote fancy/style.css" /> | <templatestyles src="Quote fancy/style.css" /> | ||
<!-- The template uses a 3x3 grid layout with the quote and author attribution fixed in the | <!-- The template uses a 3x3 grid layout with the quote and author attribution fixed in the | ||
center and center bottom positions respectively. Depending on the image-position param | center and center bottom positions respectively. Depending on the image-position param | ||
and whether the user is on mobile, the image will be placed in the west, east, or north | and whether the user is on mobile, the image will be placed in the west, east, or north | ||
positions. --> | positions. --> | ||
<div style=" | <div | ||
class="bg3wiki-fancy-quote" | |||
style="justify-content:{{#ifeq:{{{image-align|center}}}|edge|space-between|center}}" | |||
> | |||
<!-- Quote image --> | <!-- Quote image --> | ||
{{#if:{{{image|}}}| {{Image frame | {{#if:{{{image|}}}| {{Image frame | ||
| image = {{{image|}}} | | image = {{{image|}}} | ||
| link = {{{link|}}} | | link = {{#ifeq: {{{link|}}}|{{PAGENAME}}||{{{link|}}}}} | ||
| height = {{{height|80}}} | | height = {{{height|80}}} | ||
| border-shape = {{{image-border-shape|rounded}}} | | border-shape = {{{image-border-shape|rounded}}} | ||
| border-width = {{{image-border-width|0}}} | | border-width = {{{image-border-width|0}}} | ||
| border-color = {{{image-border-color|}}} | | border-color = {{{image-border-color|}}} | ||
| | | class = bg3wiki-fancy-quote-image-{{{image-position|left}}} | ||
}}}} | }}}} | ||
<!-- Formatted quote --> | <!-- Formatted quote --> | ||
<blockquote style="font-size:{{{font-size| | <blockquote style="font-size:{{{font-size|110%}}};" class="bg3wiki-fancy-quote-blockquote-{{{image-position|left}}}" > | ||
<div style="display:flex;align-items:center> | <div style="display:flex;align-items:center> | ||
<!-- Starting quotation mark. Aligned with the top-left corner of the quote text --> | <!-- Starting quotation mark. Aligned with the top-left corner of the quote text --> | ||
Line 31: | Line 32: | ||
</blockquote> | </blockquote> | ||
<!--- Optional author or attribution for the quote. Aligned with the bottom-right of the quote --> | <!--- Optional author or attribution for the quote. Aligned with the bottom-right of the quote --> | ||
{{#if:{{{author|}}}|<div class="bg3wiki-fancy-quote-author>— {{{author|}}}</div>}} | {{#if:{{{author|}}}|<div class="bg3wiki-fancy-quote-author">— {{{author|}}}</div>}} | ||
</div> | {{#ifeq:{{{image-position|left}}}|left|<div style="grid-column:3"></div>}} | ||
</div></includeonly><noinclude>{{documentation|content= | </div></includeonly><noinclude>{{documentation|content= | ||
Display a fancily formatted quote with an (optional) accompanying image. | Display a fancily formatted quote with an (optional) accompanying image. This is a parent template used as a basis for other more specific quote templates. These are: | ||
* {{t link|Quote character}}: Display character quotes with automatic handling of the character portrait. | |||
In addition, the following quote template displays a set of predefined quotes. They are intended for use on their specific pages only rather than general purpose templates. | |||
* {{t link|Quote ability}}: Display the quote corresponding to an [[ability]] (Strength, Dexterity, etc.). | |||
* {{t link|Quote background}}: Display the quote corresponding to a [[background]]. | |||
* {{t link|Quote class}}: Display the quote corresponding to a [[Classes|class/subclass]]. | |||
* {{t link|Quote deity}}: Display the quote corresponding to a [[deity]]. | |||
* {{t link|Quote race}}: Display the quote corresponding to a [[race]], both playable and non-playable. | |||
* {{t link|Quote skill}}: Display a quote corresponding to a [[Skills|skill]]. | |||
Refer to | == See also == | ||
Refer to {{t link|Image frame}} for the template used to render the image. | |||
This template has an associated stylesheet at [[Template:Quote fancy/style.css]]. | This template has an associated stylesheet at [[Template:Quote fancy/style.css]]. | ||
Line 43: | Line 53: | ||
{{Template demo | {{Template demo | ||
| style = list | | style = list | ||
| caption 1 = This is the default appearance for a quote with an image. | |||
| <nowiki> | | <nowiki> | ||
{{Quote fancy | {{Quote fancy | ||
Line 50: | Line 61: | ||
}} | }} | ||
</nowiki> | </nowiki> | ||
| caption 2 = This example demonstrates some of the optional style parameters that can be adjusted. | |||
| <nowiki> | | <nowiki> | ||
{{Quote fancy | {{Quote fancy | ||
Line 56: | Line 68: | ||
| 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 = 80 | ||
| font-size = 120% | | font-size = 120% | ||
| align = | | image-align = edge | ||
}} | }} | ||
</nowiki> | </nowiki> | ||
| caption 3 = For quotes of this style, see {{t link|Quote class}}. | |||
| <nowiki> | | <nowiki> | ||
{{Quote fancy | {{Quote fancy | ||
Line 66: | Line 79: | ||
| image = Class Barbarian Badge Icon.png | | image = Class Barbarian Badge Icon.png | ||
| image-position = right | | image-position = right | ||
| image-align = edge | |||
| height = 160 | | height = 160 | ||
| font-size = 120% | | font-size = 120% | ||
| link = Barbarian | | link = Barbarian | ||
}} | }} | ||
</nowiki> | </nowiki> | ||
| caption 4 = For quotes of this style, see {{t link|Quote character}}. | |||
| <nowiki> | | <nowiki> | ||
{{Quote fancy | {{Quote fancy | ||
Line 80: | Line 94: | ||
| height = 60 | | height = 60 | ||
| font-size = 100% | | font-size = 100% | ||
| image-border-shape = diamond | | image-border-shape = diamond | ||
| image-border-width = 4 | | image-border-width = 4 | ||
Line 125: | Line 138: | ||
"default": "130%" | "default": "130%" | ||
}, | }, | ||
"align": { | "image-align": { | ||
"label": " | "label": "Image alignment", | ||
"description": " | "description": "How to align the image with the quote. Either centered along with the quote (default) or kept at the edge.", | ||
"type": "string", | "type": "string", | ||
"suggestedvalues": [" | "suggestedvalues": ["center", "edge"], | ||
"default": " | "default": "center" | ||
}, | }, | ||
"image-position": { | "image-position": { |
Latest revision as of 17:17, 30 July 2024
Display a fancily formatted quote with an (optional) accompanying image. This is a parent template used as a basis for other more specific quote templates. These are:
- {{Quote character}}: Display character quotes with automatic handling of the character portrait.
In addition, the following quote template displays a set of predefined quotes. They are intended for use on their specific pages only rather than general purpose templates.
- {{Quote ability}}: Display the quote corresponding to an ability (Strength, Dexterity, etc.).
- {{Quote background}}: Display the quote corresponding to a background.
- {{Quote class}}: Display the quote corresponding to a class/subclass.
- {{Quote deity}}: Display the quote corresponding to a deity.
- {{Quote race}}: Display the quote corresponding to a race, both playable and non-playable.
- {{Quote skill}}: Display a quote corresponding to a skill.
See also
Refer to {{Image frame}} for the template used to render the image.
This template has an associated stylesheet at Template:Quote fancy/style.css.
Examples
This is the default appearance for a quote with an image.
Markup{{Quote fancy | 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
This example demonstrates some of the optional style parameters that can be adjusted.
Markup{{Quote fancy | 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 = 80 | font-size = 120% | image-align = edge }}Renders as
For quotes of this style, see {{Quote class}}.
Markup{{Quote fancy | 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 | image-align = edge | height = 160 | font-size = 120% | link = Barbarian }}Renders as
For quotes of this style, see {{Quote character}}.
Markup{{Quote fancy | 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 Knuth's Magnificent Kerning | height = 60 | font-size = 100% | image-border-shape = diamond | image-border-width = 4 | image-border-color = black }}Renders as
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 |
Image alignment | image-align | How to align the image with the quote. Either centered along with the quote (default) or kept at the edge.
| 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 |