Template:Quote fancy: Difference between revisions

From bg3.wiki
Jump to navigation Jump to search
(Adjusted how the image and quote are aligned when the author is specified)
mNo edit summary
 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>
<includeonly>
<!-- Import template-specific CSS -->
<!-- Import template-specific CSS -->
<templatestyles src="ImageQuote/style.css" />
<templatestyles src="Quote fancy/style.css" />
<div style="justify-content:{{{align|left}}}; flex-direction:{{#ifeq:{{{image-position|}}}|right|row-reverse|row}}" class="bg3wiki-image-quote">
<!-- 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
    and whether the user is on mobile, the image will be placed in the west, east, or north
    positions. -->
<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|}}}
<!-- Add some vertical space to keep the image aligned with the quote if the author is specified -->
| class = bg3wiki-fancy-quote-image-{{{image-position|left}}}
| style = {{#if:{{{author|}}}|margin-bottom:22px;}}
}}}}
}}}}
<!-- Container for the quote and the author/attribution if present -->
<!-- Formatted quote -->
<div style="display: flex; flex-direction: column;">
<blockquote style="font-size:{{{font-size|110%}}};" class="bg3wiki-fancy-quote-blockquote-{{{image-position|left}}}" >
  <!-- Formatted quote -->
  <div style="display:flex;align-items:center>
  <blockquote class="bg3wiki-image-quote-blockquote-{{{image-position|left}}}" style="font-size:{{{font-size|130%}}}">
    <!-- Starting quotation mark. Aligned with the top-left corner of the quote text -->
    <div style="display:flex;align-items:center>
    <div class="bg3wiki-fancy-quote-begin">“</div>
      <!-- Starting quotation mark. Aligned with the top-left corner of the quote text -->
    <!-- Actual text of the quote -->
      <div class="bg3wiki-image-quote-begin">“</div>
    <div style="font-style:italic">{{{quote}}}</div>
      <!-- Actual text of the quote -->
    <!-- Ending quotation mark. Aligned with the bottom-right corner of the quote text -->
      <div style="font-style:italic">{{{quote}}}</div>
    <div class="bg3wiki-fancy-quote-end">„</div>
      <!-- Ending quotation mark. Aligned with the bottom-right corner of the quote text -->
  </div>
      <div class="bg3wiki-image-quote-end">„</div>
</blockquote>
    </div>
<!--- Optional author or attribution for the quote. Aligned with the bottom-right of the quote -->
  </blockquote>
{{#if:{{{author|}}}|<div class="bg3wiki-fancy-quote-author">— {{{author|}}}</div>}}
  <!--- Optional author or attribution for the quote. Aligned with the bottom-right of the quote -->
{{#ifeq:{{{image-position|left}}}|left|<div style="grid-column:3"></div>}}
  {{#if:{{{author|}}}|<div class="bg3wiki-image-quote-author>— {{{author|}}}</div>}}
</div>
</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 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 [[Template:Image frame]] for the template used to render the image.
== See also ==
Refer to {{t link|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:Quote fancy/style.css]].


== Examples ==
== Examples ==
{{Template demo
{{Template demo
| style = list
| style = list
| caption 1 = This is the default appearance for a quote with an image.
| <nowiki>
| <nowiki>
{{ImageQuote
{{Quote fancy
| quote = The operations of these huge steel juggernauts are powered by engines of churning hellfire.  
| quote = The operations of these huge steel juggernauts are powered by engines of churning hellfire.  
| image = Portrait Steel Watcher.png
| image = Portrait Steel Watcher.png
Line 47: Line 61:
}}
}}
</nowiki>
</nowiki>
| caption 2 = This example demonstrates some of the optional style parameters that can be adjusted.
| <nowiki>
| <nowiki>
{{ImageQuote
{{Quote fancy
| quote = These levitating eyes transmit all that they see to the one who created them.
| quote = These levitating eyes transmit all that they see to the one who created them.
| image = Portrait Scrying Eye.png
| image = Portrait Scrying Eye.png
| 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 = 60
| height = 80
| font-size = 120%
| font-size = 120%
| align = center
| image-align = edge
}}
}}
</nowiki>
</nowiki>
| caption 3 = For quotes of this style, see {{t link|Quote class}}.
| <nowiki>
| <nowiki>
{{ImageQuote
{{Quote fancy
| quote = The strong embrace the wild that hides inside - keen instincts, primal physicality, and most of all, an unbridled, unquenchable rage.
| 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 = 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
| align = center
}}
}}
</nowiki>
</nowiki>
| caption 4 = For quotes of this style, see {{t link|Quote character}}.
| <nowiki>
| <nowiki>
{{ImageQuote
{{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.
| 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
| image = Portrait Gale.png
Line 77: Line 94:
| height = 60
| height = 60
| font-size = 100%
| font-size = 100%
| align = center
| image-border-shape = diamond
| image-border-shape = diamond
| image-border-width = 4
| image-border-width = 4
Line 122: Line 138:
             "default": "130%"
             "default": "130%"
},
},
         "align": {
         "image-align": {
"label": "Alignment",
"label": "Image alignment",
"description": "Horizontal alignment of the quote.",
"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": ["left", "right", "center"],
             "suggestedvalues": ["center", "edge"],
             "default": "left"
             "default": "center"
},
},
         "image-position": {
         "image-position": {

Latest revision as of 17:17, 30 July 2024

Template documentation

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.

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
Portrait Steel Watcher.png
The operations of these huge steel juggernauts are powered by engines of churning hellfire.

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
Portrait Scrying Eye.png
These levitating eyes transmit all that they see to the one who created them.
— In-game racial description of Scrying Eyes

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
Class Barbarian Badge Icon.png
The strong embrace the wild that hides inside - keen instincts, primal physicality, and most of all, an unbridled, unquenchable rage.


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
Portrait Gale.png
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.
Gale, casting Knuth's Magnificent Kerning

Template data

Display a quote with an accompanying image which are aligned with each other

Template parameters

This template prefers block formatting of parameters.

ParameterDescriptionTypeStatus
Quotequote

The quote

Stringrequired
Imageimage

Add an image to go along with the quote.

Example
Portrait Lae'zel.png
Filesuggested
Linklink

Clicking the image will link to the specified page instead of the image file.

Example
Lae'zel
Page namesuggested
Authorauthor

The author or context of the quote

Stringoptional
Font sizefont-size

Size of the font used for the quote.

Default
130%
Example
100%, 1.1em
Stringoptional
Image alignmentimage-align

How to align the image with the quote. Either centered along with the quote (default) or kept at the edge.

Suggested values
center edge
Default
center
Stringoptional
Image positionimage-position

Position of the image relative to the quote.

Suggested values
left right
Default
left
Stringoptional
Image border widthimage-border-width

Width in pixels of the border around the image. Set to 0 to completely disable this.

Default
0
Numberoptional
Image border shapeimage-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.

Suggested values
rounded diamond basic
Default
basic
Example
circle(60% at 50% 50%)
Stringoptional
Image border colorimage-border-color

Color of the image border. This can be a CSS color descriptor.

Default
black
Example
#3d3d3d
Stringoptional
Heightheight

The height of the image in pixels.

Default
80
Example
60px, 50
Stringoptional