WikiDefender
7,902
edits
Changes
no edit summary
<onlyinclude>
<div style="display: flex; flex: {{{width|15vw}}}; justify-content: space-between; padding-left: 40px; padding-right: 40px; align-items: center; text-align: center;">
[[{{{gif_image|File:Blank GIF.gif}}}|270px]] <br/>
'''{{{namedescription|Description?}}}'''
</div>
</onlyinclude>
<noinclude>
=== Template Purpose ===
* To help with creating a gallery of gifs that can be responsive enough to various page sizes instead of getting pushed out of the page horizontally (or being squished if it's in mobile portrait view).
* In order for the responsiveness to fully work, the template '''must''' be wrapped in a div style element containing flex properties. ''(As shown below)
''
{| style="width:48%;"
|-
|style="display: flex; justify-content: center;" |<!---
---><code style="width: 90%; white-space: pre-wrap; align-content: center;"><!---
---><nowiki>
<div style="display: flex; flex-wrap: wrap; width:100%;">
{{GIF Gallery}}
</div>
</nowiki><!---
---></code>
|}
===Base Template Text Parameters===
{| border="1" class="wikitable TemplateDocumentation"
|-
! Parameter !! Required !! Description !! Default
|-
| gif_image || {{yes}} || The GIF image file. || '''https://wiki.dungeondefenders2.com/images/e/ec/Blank_GIF.gif'''
|-
| description || {{yes}} || Description of the presented GIF image. || Description?
|}
===Examples===
{| style="width:100%;"
|-
|
{| style="width:100%; margin-top: -263px;"
! style="font-size:150%; width: 50%;" | Wiki Text <br> <small>- Base Template Text</small>
|-
| style="display: flex; justify-content: center;" |<!---
---><code style="width: 90%; white-space: pre-wrap; align-content: center;"><!---
---><nowiki>
{{GIF Gallery
| gif_image = File:Lava Beast Left Swipe Attack.gif
| description = Lava Beast Left Melee Swipe.
}}
</nowiki><!---
---></code>
|}
||
{| style="width:100%;"
! style="font-size:150%; width: 50%;" | Wiki Text <br> <small>- Multiple Images with Div Style Wrapper</small>
|-
| style="display: flex; justify-content: center;" |<!---
---><code style="width: 90%; white-space: pre-wrap; align-content: center;"><!---
---><nowiki>
<div style="display: flex; flex-wrap: wrap; width:100%;">
{{GIF Gallery
| gif_image = File:Lava Beast Left Swipe Attack.gif
| description = Lava Beast Left Melee Swipe.
}}
{{GIF Gallery
| gif_image = File:Lava Beast Right Swipe Attack.gif
| description = Lava Beast Right Melee Swipe.
}}
{{GIF Gallery
| gif_image = File:Lava Beast Headbutt Attack.gif
| description = Headbutt Attack.
}}
{{GIF Gallery
| gif_image = File:Lava Beast Projectile Attack.gif
| description = Projectile Attack.
}}
</div>
</nowiki><!---
---></code>
|}
|}
{| style="font-size:150%; width: 100%; text-align: center;"
|-
| '''Result''' <br> <small> '''- Multiple Images with Div Style Wrapper''' </small>
|}
<div style="display: flex; flex-wrap: wrap; width:100%;">
{{GIF Gallery
| gif_image = File:Lava Beast Left Swipe Attack.gif
| description = Lava Beast Left Melee Swipe.
}}
{{GIF Gallery
| gif_image = File:Lava Beast Right Swipe Attack.gif
| description = Lava Beast Right Melee Swipe.
}}
{{GIF Gallery
| gif_image = File:Lava Beast Headbutt Attack.gif
| description = Headbutt Attack.
}}
{{GIF Gallery
| gif_image = File:Lava Beast Projectile Attack.gif
| description = Projectile Attack.
}}
</div>
__NOEDITSECTION__
</noinclude>
