Difference between revisions of "Template:Collapse image"

From OpenGeofiction Encyclopedia
Jump to: navigation, search
(max width 100%)
(width parameter changed into multifunctional size parameter)
 
Line 1: Line 1:
<includeonly><div style="width:max-content;max-width:100%;position:relative;overflow:hidden;border:1px solid #a2a9b1"><div class="mw-collapsible" id="mw-customcollapsible-{{{id|100}}}"><div style="display:inline-flex;align-items:center;padding-left:7px;padding-right:7px;padding-top:2px;padding-bottom:2px">'''{{{caption|Expand}}}'''<span style="padding:3px"></span>[[File:Font Awesome 5 solid chevron-corner.svg|12px]]</div></div><div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-{{{id|100}}}" style="line-height:0">[[File:{{{file}}}{{#if:{{{width|}}}|{{!}}{{{width}}}px|}}]]</div>
+
<includeonly><div style="width:max-content;max-width:100%;position:relative;overflow:hidden;border:1px solid #a2a9b1"><div class="mw-collapsible" id="mw-customcollapsible-{{{id|100}}}"><div style="display:inline-flex;align-items:center;padding-left:7px;padding-right:7px;padding-top:2px;padding-bottom:2px">'''{{{caption|Expand}}}'''<span style="padding:3px"></span>[[File:Font Awesome 5 solid chevron-corner.svg|12px]]</div></div><div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-{{{id|100}}}" style="line-height:0">[[File:{{{file}}}{{#if:{{{size|}}}|{{!}}{{{size}}}|}}]]</div>
 
<div style="z-index:1;position:absolute;top:0;left:0">[[File:{{{file}}}]]</div>
 
<div style="z-index:1;position:absolute;top:0;left:0">[[File:{{{file}}}]]</div>
 
<div class="mw-customtoggle-{{{id|100}}}" style="z-index:2;position:absolute;top:0;left:0;display:inline-flex;align-items:center;padding-left:7px;padding-right:7px;padding-top:2px;padding-bottom:2px">'''{{{caption|Expand}}}'''<span style="padding:3px"></span>[[File:Font Awesome 5 solid chevron-corner.svg|12px]]</div></div></includeonly><noinclude>
 
<div class="mw-customtoggle-{{{id|100}}}" style="z-index:2;position:absolute;top:0;left:0;display:inline-flex;align-items:center;padding-left:7px;padding-right:7px;padding-top:2px;padding-bottom:2px">'''{{{caption|Expand}}}'''<span style="padding:3px"></span>[[File:Font Awesome 5 solid chevron-corner.svg|12px]]</div></div></includeonly><noinclude>
Line 7: Line 7:
 
Use the template as follows:
 
Use the template as follows:
 
<pre>
 
<pre>
{{Collapse image|file=Vinnmark map.png|width=800|caption=Map of Vinnmark|id=1}}
+
{{Collapse image|file=Vinnmark map.png|size=800px|caption=Map of Vinnmark|id=1}}
 
</pre>
 
</pre>
 
* The <code>file</code> parameter is mandatory.
 
* The <code>file</code> parameter is mandatory.
* The <code>width</code> parameter specifies the expanded image's width in pixels. This parameter is optional, without it will default to the image's native size.
+
* The <code>size</code> parameter specifies the expanded image's size, similar to specifying the size of a normal wiki image. So e.g.<code>800px</code> would specify a width of 800 pixels or <code>x300px</code> would specify a height of 300 pixels. The parameter is optional, without it will default to the image's native size.
 
* The <code>caption</code> parameter is also optional, without it will default to "Expand".
 
* The <code>caption</code> parameter is also optional, without it will default to "Expand".
 
* The <code>id</code> parameter needs to be set to a unique value for every time this template is used on the same page. All templates with the same id would otherwise collapse together when one of them is clicked. If this template only occurs once on a page, it can be omitted.
 
* The <code>id</code> parameter needs to be set to a unique value for every time this template is used on the same page. All templates with the same id would otherwise collapse together when one of them is clicked. If this template only occurs once on a page, it can be omitted.
 
==Examples==
 
==Examples==
 
The above example would give the following result:
 
The above example would give the following result:
{{Collapse image|file=Vinnmark map.png|width=800|caption=Map of Vinnmark|id=1}}
+
{{Collapse image|file=Vinnmark map.png|size=800px|caption=Map of Vinnmark|id=1}}
 
This second example <code><nowiki>{{Collapse image|file=Lentia draft.png|id=2}}</nowiki></code> would result into this:
 
This second example <code><nowiki>{{Collapse image|file=Lentia draft.png|id=2}}</nowiki></code> would result into this:
 
{{Collapse image|file=Lentia draft.png|id=2}}
 
{{Collapse image|file=Lentia draft.png|id=2}}
 
</div><noinclude>
 
</div><noinclude>

Latest revision as of 20:19, 19 August 2020