Template:Quote fancy: Difference between revisions
Jump to navigation
Jump to search
(Added quotes) |
(Formatted for slightly less painful reading) |
||
| Line 1: | Line 1: | ||
<includeonly><div style="display:flex;align-items:center;justify-content:{{{align|left}}}"> | <includeonly><div style=" | ||
<span style="display: inline-block; vertical-align: middle; border: hidden; border-radius:{{{rounding|15%}}}; overflow: hidden;>{{Icon|{{{image}}}|h={{{height|80px}}}|link={{{link|}}}}}</span> | display: flex; | ||
<div style="display:flex;flex-direction:column;"><blockquote style="font-size:{{{font-size|130%}}}; margin:0px;margin-left:10px;"><div style="display:flex;align-items:center><div style="font-size:300%;opacity:20%;line-height:1em;margin-bottom:auto;margin-right: | align-items: center; | ||
{{#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> | flex-direction: row; <!-- TODO: Conditionally switch this to column for mobile --> | ||
justify-content: {{{align|left}}}; | |||
"> | |||
<!-- Quote image --> | |||
<span style=" | |||
display: inline-block; | |||
vertical-align: middle; | |||
border: hidden; | |||
border-radius:{{{rounding|15%}}}; | |||
overflow: hidden; | |||
">{{Icon|{{{image}}}|h={{{height|80px}}}|link={{{link|}}}}}</span> | |||
<div style=" | |||
display: flex; | |||
flex-direction: column; | |||
"> | |||
<blockquote style=" | |||
font-size: {{{font-size|130%}}}; | |||
margin: 0px; | |||
margin-left: 10px; | |||
"> | |||
<div style="display:flex;align-items:center> | |||
<!-- 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> | |||
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. | ||
== Examples == | == Examples == | ||
{{Template demo | {{Template demo | ||
Revision as of 03:59, 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
“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
“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
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Quote | quote | The quote | String | required |
| Image | image | Add an image to go along with the quote.
| File | optional |
| 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 |
| Rounding | rounding | The amount of rounding applied to the image.
| String | optional |
| Alignment | align | Horizontal alignment of the quote
| String | optional |
| Height | height | The height of the image
| String | optional |