Difference between revisions of "Template:ImageGallery"

From Bearscape Wiki
Jump to: navigation, search
m (Slightly cleaner markup.)
(Edit to the template to not use margin and translate on the img, but instead make the div a table-cell with alignment to center the image, plus make the wrapper p tag have no margin to fix this.)
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{#css:
 
{{#css:
   .galleryImage
+
   div.galleryDiv
 
   {
 
   {
     margin: 75px !important;
+
     display: table-cell;
     transform: translate(-50%, -50%);
+
     text-align: center;
 +
    vertical-align: middle;
 
   }
 
   }
}}<gallery></gallery><ul class="gallery mw-gallery-traditional">
+
  p.pWrapper
 +
  {
 +
    margin: 0;
 +
  }
 +
}}<gallery style="display: none"></gallery><ul class="gallery mw-gallery-traditional">
 
{{
 
{{
 
   #fornumargs: number
 
   #fornumargs: number
Line 13: Line 18:
 
     |<li class="gallerybox" style="margin-right: 10px">
 
     |<li class="gallerybox" style="margin-right: 10px">
 
<div style="width: 155px">
 
<div style="width: 155px">
<div class="thumb plainlinks" style="width: 150px; height: 150px; padding: 2.5px">
+
<div class="thumb plainlinks galleryDiv" style="width: 150px; height: 150px; padding: 2.5px">
{{#ifeq: {{#sub: {{#var: value}}|0|4}} | http | [{{#var: value}} <img src="{{#var: value}}" style="max-width: 100%; max-height: 100%" class="galleryImage">] | [[File:{{#var: value}}|150x150px|class=galleryImage]]}}
+
<p class="pWrapper">
 +
{{#ifeq: {{#sub: {{#var: value}}|0|4}} | http | [{{#var: value}} <img src="{{#var: value}}" style="max-width: 150px; max-height: 150px" class="galleryImage">] | [[File:{{#var: value}}|150x150px|class=galleryImage]]}}
 +
</p>
 
</div>
 
</div>
 
     |<div class="gallerytext">
 
     |<div class="gallerytext">
Line 43: Line 50:
  
 
<pre>{{ImageGallery
 
<pre>{{ImageGallery
|http://pixabay.com/static/uploads/photo/2014/10/10/22/07/sun-483984_640.jpg
+
|http://www.cyberbotx.com/TinulothelKuroSprite.png
|A sunset
+
|A (former) staff
|http://pixabay.com/static/uploads/photo/2012/04/26/19/47/penguin-42936_640.png
+
|http://pishi.cyberbotx.com/stuff/overworld.png
|A penguin (''beware'')
+
|Overworld!
|http://pixabay.com/static/uploads/photo/2014/08/20/05/22/big-bang-422305_640.jpg
+
|http://www.cyberbotx.com/customBnG/cbxwubby1.png
 
|
 
|
 
|2014-03-29-04.png
 
|2014-03-29-04.png
Line 58: Line 65:
  
 
{{ImageGallery
 
{{ImageGallery
|http://pixabay.com/static/uploads/photo/2014/10/10/22/07/sun-483984_640.jpg
+
|http://www.cyberbotx.com/TinulothelKuroSprite.png
|A sunset
+
|A (former) staff
|http://pixabay.com/static/uploads/photo/2012/04/26/19/47/penguin-42936_640.png
+
|http://pishi.cyberbotx.com/stuff/overworld.png
|A penguin (''beware'')
+
|Overworld!
|http://pixabay.com/static/uploads/photo/2014/08/20/05/22/big-bang-422305_640.jpg
+
|http://www.cyberbotx.com/customBnG/cbxwubby1.png
 
|
 
|
 
|2014-03-29-04.png
 
|2014-03-29-04.png

Latest revision as of 07:09, 19 February 2018

This template is a replication of the built-in MediaWiki <gallery> tag, but allowing external images as well.

To utilize it, add the following to a page:

{{ImageGallery
|URL1
|COMMENT1
|URL2
|COMMENT2
...
|URLn
|COMMENTn
}}

You will need at least one URL and COMMENT combination for this to render properly. If the URL starts with http or https, it'll be assumed to be external, otherwise it'll be assumed to be local to the wiki (and must be uploaded to the wiki). If you wish to have an image in the gallery not have a comment, then just leave the COMMENT empty, but do NOT exclude the pipe symbol.

An example gallery with this template:

{{ImageGallery
|http://www.cyberbotx.com/TinulothelKuroSprite.png
|A (former) staff
|http://pishi.cyberbotx.com/stuff/overworld.png
|Overworld!
|http://www.cyberbotx.com/customBnG/cbxwubby1.png
|
|2014-03-29-04.png
|I'm stealin' Temia's image, mwahaha!
}}

(Notice how the second to last URL has no comment, but the | for the comment is still needed.)

Will render as follows: