Difference between revisions of "Template:ImageGallery"
m (Trying to fix this, it isn't working as expected (but it is close).) |
(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.) |
||
| (12 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | + | {{#css: | |
| − | + | div.galleryDiv | |
| − | + | { | |
| − | + | display: table-cell; | |
| − | + | text-align: center; | |
| − | < | + | vertical-align: middle; |
| − | + | } | |
| − | < | + | p.pWrapper |
| − | + | { | |
| − | + | margin: 0; | |
| − | + | } | |
| − | + | }}<gallery style="display: none"></gallery><ul class="gallery mw-gallery-traditional"> | |
| − | |||
{{ | {{ | ||
#fornumargs: number | #fornumargs: number | ||
| Line 17: | Line 16: | ||
|{{ | |{{ | ||
#ifexpr: {{#var: number}} mod 2 | #ifexpr: {{#var: number}} mod 2 | ||
| − | | | + | |<li class="gallerybox" style="margin-right: 10px"> |
| − | <li class="gallerybox" style=" | ||
<div style="width: 155px"> | <div style="width: 155px"> | ||
| − | <div class="thumb" style=" | + | <div class="thumb plainlinks galleryDiv" style="width: 150px; height: 150px; padding: 2.5px"> |
| − | + | <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> | </p> | ||
</div> | </div> | ||
| Line 32: | Line 30: | ||
}} | }} | ||
}} | }} | ||
| − | </ul> | + | </ul><noinclude> |
| + | 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: | ||
| + | |||
| + | <pre>{{ImageGallery | ||
| + | |URL1 | ||
| + | |COMMENT1 | ||
| + | |URL2 | ||
| + | |COMMENT2 | ||
| + | ... | ||
| + | |URLn | ||
| + | |COMMENTn | ||
| + | }}</pre> | ||
| + | |||
| + | 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: | ||
| + | |||
| + | <pre>{{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! | ||
| + | }}</pre> | ||
| + | |||
| + | (Notice how the second to last URL has no comment, but the | for the comment is still needed.) | ||
| + | |||
| + | Will render as follows: | ||
| + | |||
| + | {{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! | ||
| + | }} | ||
| + | </noinclude> | ||
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:
-
A (former) staff
-
Overworld!
-
-
I'm stealin' Temia's image, mwahaha!
