Using an image gallery with MediaWiki

From MediaWiki.org
Jump to navigation Jump to search

You can use an imageboard to upload and store images for MediaWiki in addition or instead of using the MediaWiki upload methods.

Advanages of using an imageboard to store images for a wiki:

  • Easier to mass upload, sort, and manage images
  • Better for casual uploads or for uploading images that might not be used in articles, such as humor images or memes
  • Using this method, the ability to thumbnail images from the imageboard
Directions
  1. Install Extension:Widgets
  2. Install a Coppermine image gallery that has an extension for providing the file path URL of images to everyone
  3. Add the CSS, widget, and template code below
  4. Modify the templates and widgets to accept images from your imageboard

You can also use this to thumbnail images from another website that you did not create, such as in this example with images from Dakka Dakka:

Source[edit]

The source code of these templates and widgets is availible under the GNU General Public License.

Template:Imgthumb

<div class="imgthumb" style="width: {{{2}}}px;">
{{#widget:imgboard|url={{{1}}}|width={{{2}}}}}<br>{{{3}}}
</div>
<noinclude>
{| style="border: 1px solid #2E2E2E;" |
|Created by <span class="plainlinks">[http://mediawiki.org/wiki/User:Inquisitor_Ehrenstein Inquisitor Ehrenstein]</span>
|}
</noinclude>

Template:Imgboard

{{#widget:imgboard|url={{{1}}}|width={{{2}}}}}
<noinclude>
{| style="border: 1px solid #2E2E2E;" |
|Created by <span class="plainlinks">[http://mediawiki.org/wiki/User:Inquisitor_Ehrenstein Inquisitor Ehrenstein]</span>
|}
</noinclude>

Widget:Imgboard

<a href='http://yourdomain.tld/albums/userpics/10001/<!--{$url|escape:'urlpathinfo'}-->'><img src='http://yourdomain.tld/albums/userpics/10001/<!--{$url|escape:'urlpathinfo'}-->' width="<!--{$width|escape:'html'}-->"></a>
<noinclude>
{| style="border: 1px solid #2E2E2E;" |
|Created by <span class="plainlinks">[http://mediawiki.org/wiki/User:Inquisitor_Ehrenstein Inquisitor Ehrenstein]</span>
|}
</noinclude>

CSS

/* Imageboard thumbnails - http://www.mediawiki.org/wiki/Using_an_image_gallery_with_MediaWiki */

.imgthumb {
     background: #F9F9F9;
     border: #CCCCCC;
     float: right;
     padding: 5px;
}

Modifying for your imageboard and wiki[edit]

  • Change yourdomain.tld to the domain of your imageboard. If you have a folder between your domain and the /albums/ folder, you should add it to the widget.
  • Change the background and border colors in the CSS if you have a Vector skin that is modified in colors from the default, in order for it to match the color of the regular thumbnails