Difference between revisions of "Template:GIF Gallery"

From Dungeon Defenders 2 Wiki
Jump to: navigation, search
(Created page with "<div style="display: flex; flex: {{{width|15vw}}}; justify-content: space-between; padding-left: 40px; padding-right: 40px; align-items: center; text-align: center;"> {{{gif...")
 
Line 1: Line 1:
 +
<onlyinclude>
 
<div style="display: flex; flex: {{{width|15vw}}}; justify-content: space-between; padding-left: 40px; padding-right: 40px; align-items: center; text-align: center;">
 
<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/>
 
[[{{{gif_image|File:Blank GIF.gif}}}|270px]] <br/>
−
'''{{{name|?}}}'''
+
'''{{{description|Description?}}}'''
 
</div>
 
</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>

Revision as of 05:17, 8 March 2025

Blank GIF.gif
Description?


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)

<div style="display: flex; flex-wrap: wrap; width:100%;"> {{GIF Gallery}} </div>


Base Template Text Parameters

Parameter Required Description Default
gif_image TickGreen.png The GIF image file. https://wiki.dungeondefenders2.com/images/e/ec/Blank_GIF.gif
description TickGreen.png Description of the presented GIF image. Description?

Examples

Wiki Text
- Base Template Text
{{GIF Gallery | gif_image = File:Lava Beast Left Swipe Attack.gif | description = Lava Beast Left Melee Swipe. }}
Wiki Text
- Multiple Images with Div Style Wrapper
<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>


Result
- Multiple Images with Div Style Wrapper

Lava Beast Left Swipe Attack.gif
Lava Beast Left Melee Swipe.


Lava Beast Right Swipe Attack.gif
Lava Beast Right Melee Swipe.


Lava Beast Headbutt Attack.gif
Headbutt Attack.


Lava Beast Projectile Attack.gif
Projectile Attack.


Retrieved from "https://wiki.dungeondefenders2.com/index.php?title=Template:GIF_Gallery&oldid=23612"