Template:Quote fancy: Difference between revisions

From bg3.wiki
Jump to navigation Jump to search
(Use TemplateStyle for @media query)
(Massively cleaned up template with the help of external CSS)
Line 1: Line 1:
<includeonly><templatestyles src="ImageQuote/style.css" /><div class="bg3wiki-image-quote">
<includeonly><templatestyles src="ImageQuote/style.css" /><div class="bg3wiki-image-quote">
<!-- Quote image -->
<!-- Quote image -->
<span style="
[[File:{{{image}}}|x{{{height|80px}}}|link={{{link|}}}|class=bg3wiki-image-quote-image]]
  display: inline-block;
<!-- Container for the quote and the author/attribution if present -->
  vertical-align: middle;
<div style="display: flex; flex-direction: column;">
  border: hidden;
   <!-- Formatted quote -->
  border-radius:{{{rounding|15%}}};
  <blockquote class="bg3wiki-image-quote-blockquote-right" style="font-size:{{{font-size|130%}}}">
  overflow: hidden;
    <div style="display:flex;align-items:center>
">{{Icon|{{{image}}}|h={{{height|80px}}}|link={{{link|}}}}}</span>
      <!-- Starting quotation mark. Aligned with the top-left corner of the quote text -->
  <div style="
      <div class="bg3wiki-image-quote-begin">“</div>
    display: flex;
      <!-- Actual text of the quote -->
    flex-direction: column;
      <div style="font-style:italic">{{{quote}}}</div>
   ">
      <!-- Ending quotation mark. Aligned with the bottom-right corner of the quote text -->
    <blockquote style="
      <div class="bg3wiki-image-quote-end">„</div>
      font-size: {{{font-size|130%}}};
    </div>
      margin: 0px;
  </blockquote>
      margin-left: 10px;
  <!--- Optional author or attribution for the quote. Aligned with the bottom-right of the quote -->
    ">
  {{#if:{{{author|}}}|<div class="bg3wiki-image-quote-author>— {{{author|}}}</div>}}
      <div style="display:flex;align-items:center>
</div>
        <!-- Starting quotation mark. Aligned with the top-left corner of the quote text -->
        <div style="
          font-size: 300%;
          font-family: serif;
          opacity: 20%;
          line-height: 1em;
          margin-bottom: auto;
          margin-right: 8px
        ">“</div><!--
        Actual text of the quote
        --><i>{{{quote}}}</i>
        <!-- Ending quotation mark. Aligned with the bottom-right corner of the quote text -->
        <div style="
          font-size: 300%;
          font-family: serif;
          opacity: 20%;
          line-height: 1em;
          margin-top: auto;
          margin-left: 8px
        ">„</div>
      </div>
    </blockquote>
    <!--- Optional author or attribution for the quote. Aligned with the bottom-right of the text -->
    {{#if:{{{author|}}}
    | <div style="
        margin-left: auto;
        margin-right: 32px;
        margin-top: -8px;
        padding-bottom: 8px;
        margin-bottom: -2em;
        line-height: 2em
      "><small>— <b>{{{author|}}}</b></small>
      </div>
    }}
  </div>
</div></includeonly><noinclude>
</div></includeonly><noinclude>
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.

Revision as of 07:47, 20 July 2024

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

Examples

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

Portrait Steel Watcher.png

“
The operations of these huge steel juggernauts are powered by engines of churning hellfire.
„
Markup
{{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 = 60px
| rounding = 20%
| font-size = 120%
| align = center
}}
Renders as
 Page Template:ImageQuote/style.css has no content.

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

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
Fileoptional
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
Roundingrounding

The amount of rounding applied to the image.

Default
15%
Example
50%, 20px
Stringoptional
Alignmentalign

Horizontal alignment of the quote

Default
left
Example
left, right, center
Stringoptional
Heightheight

The height of the image

Default
80px
Example
60px, 4em
Stringoptional
Retrieved from "https://bg3.wiki/w/index.php?title=Template:Quote_fancy&oldid=209331"