Extension:SmoothGallery

From MediaWiki.org
Jump to: navigation, search
MediaWiki extensions manual - list
Crystal Clear action run.png
SmoothGallery

Release status: stable

Implementation Tag, Parser function, Skin
Description Allows users to give a delimited list of images, and output a css/javascript gallery
Author(s) Mathias Lidal (MathiasLidaltalk)
Latest version 1.1i (2012-01-19)
MediaWiki 1.7+ (or 1.6+, see Installation notes)
Database changes no
License GPL v2 +
Download
README
Example none
Tags
<sgallery>
Hooks used
ParserFirstCallInit

OutputPageParserOutput

Translate the SmoothGallery extension if possible

Check usage and version matrix; code metrics

SmoothGallery integrates JonDesign's SmoothGallery, which is a set of Javascript and CSS that lets you make picture galleries. A number of features are available from SmoothGallery, and this extension aims to be an easy to use, and full featured integration with MediaWiki. JonDesign's SmoothGallery is released under the GPL.

Usage[edit | edit source]

Arguments[edit | edit source]

The following arguments are available to change the behavior of the gallery:

width 
A greater than zero number in pixels to modify the width of the gallery.
height 
A greater than zero number in pixels to modify the height of the gallery.
showarrows 
Set to "false" to disable the showing of the arrow buttons.
showcarousel 
Set to "false" to disable the carousel.
showinfopane 
Set to "false" to disable the infopane.
slideinfozoneslide 
Set to "false" to have the infopane fade in/out instead of sliding up and down
slideinfozoneopacity 
A number to specify the opacity of the infopane
timed 
Set to "true" to make a timed slideshow.
delay 
A greater than zero number in milliseconds to change the delay when using a timed slideshow.
fallback 
Fallback method to use when Javascript isn't available or is disabled. Options are: "image", "image-warn", or "gallery". "image" displays the first image in the list; "image-warn" displays an the first image in the list along with a warning to enable Javascript for a more useful gallery; "gallery" is the default, and displays a normal MediaWiki image gallery.

Syntax examples[edit | edit source]

Tag syntax[edit | edit source]

To make a basic gallery, put a line break delimited list inside of <sgallery></sgallery> tags like so:

<sgallery>
Image1.jpg
Image2.gif
Image3.png
</sgallery>

To make a timed slideshow without the carousel, arrow buttons, and infopane; and with a width of 600px, a height of 500px, and a delay of 4000ms; you would do the following:

<sgallery width="600" height="500" showarrows="false" showcarousel="false" showinfopane="false" timed="true" delay="4000">
Image1.jpg
Image2.gif
Image3.png
</sgallery>

To make a link called "Hey look, a link!" to a special page with the previous gallery:

<sgallery special="Hey look, a link!" width="600" height="500" showarrows="false" showcarousel="false" showinfopane="false" timed="true" delay="4000">
Image1.jpg
Image2.gif
Image3.png
</sgallery>

The extension will make thumbnails for the carousel, and for images that do not fit in the gallery. When a user clicks an image in the carousel, it will bring he/she to the image's wiki page. The infopane uses the image name as the image title, and the image's description from the image page as the description. Images that are missing or typo'd will be ignored by the gallery. If all images are missing, the gallery will output an error, listing the missing images, and ask the user to ensure all images are correct.

To add a description (starting with 1.1c) you add '|' behind the filename:

<sgallery>
Image:picture1.jpg|This is the description for picture1
Image:picture2.png|This is the description for this one
Image3.png|This is the description for number three
</sgallery>

Parser function syntax[edit | edit source]

To make a basic gallery:

{{#sgallery:
imagelist=Image1.jpg
Image2.gif
Image3.png
}}

To make a timed slideshow without the carousel, arrow buttons, and infopane; and with a width of 600px, a height of 500px, and a delay of 4000ms; you would do the following:

{{#sgallery:
|width=600
|height=500
|showarrows=false
|showcarousel=false
|showinfopane=false
|timed=true
|delay=4000
|imagelist=Image1.jpg
Image2.gif
Image3.png
}}

To add a description (starting with 1.1d) you can use the exclamation mark ({{!}}) hack behind the filename (i.e. you must have a template "Template:!" that has the content: "|"):

{{#sgallery:
imagelist=Image:picture1.jpg{{!}}This is the description for picture1
Image:picture2.png{{!}}This is the description for this one
Image3.png{{!}}This is the description for number three
}}

Requirements[edit | edit source]

Installation[edit | edit source]

It is possible to use this extension with MediaWiki 1.6, but you'll need to add a hook to includes/SkinTemplate.php called "BeforePageDisplay". Take a look at MediaWiki 1.7+ to see where you need to add it.

To install the SmoothGallery extension:

  1. Download JonDesign's SmoothGallery and untar/unzip it into a folder in your extensions directory
  2. Download the extension using the link above (or perform a SVN checkout) and drop it into your extensions folder
  3. Perform any required bugfixes mentioned below
  4. Add the following lines to your LocalSettings.php file, where $wgSmoothGalleryExtensionPath is the relative URL to the SmoothGallery directory (i.e. browser-path, not the path on the server filesystem), and $wgSmoothGalleryDelimiter is the delimiter between multiple images (the default is \n):
require_once( "$IP/extensions/SmoothGallery/SmoothGallery.php" );
$wgSmoothGalleryExtensionPath = "/mediawiki/extensions/smoothgallery";
$wgSmoothGalleryDelimiter = "\n";

Fixing bugs[edit | edit source]

Fix the javascript edit toolbar[edit | edit source]

There is a MediaWiki bug in skins/common/wikibits.js that causes issues when you use Mootools.js (which SmoothGallery uses). The problem description and solution can be found here. This bug has been marked fixed, and should be included in MediaWiki 1.10+.

Fix the jd.gallery.css[edit | edit source]

The jd.gallery.css that comes from SmoothGallery has an issue when you set showarrows="false". Change:

.jdGallery a.open
{
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
}

to:

.jdGallery a.open
{
        left: 0;
        top: 0;
        /*
        width: 100%;
        height: 100%;
        */
}

Roadmap[edit | edit source]

1.2a[edit | edit source]

  • Selectively turn off HistoryManager for nintendo dsi and iphone os
  • Fetch image list via AJAX, and preload images using SmoothGallery's built in preloader

Changelog[edit | edit source]

1.1i
  • Removed use of deprecated LanguageGetMagic hook
1.1h
  • Fixed bug when sgallery was used as a tag
  • Fixed bug with use of the parser to recursively parse tags
  • Fixed bug with descriptions. Descriptions can now be displayed, and wikitext can be used in them.
1.1g
  • Fixed backwards compatability with MediaWiki less than 1.16alpha
1.1f
  • Update internationalization code for MediaWiki 1.16alpha+
1.1e
  • Fixed image description issue
1.1d
  • Updated to be compatible to MediaWiki 1.14+
  • sgallery can now be used as a parser function
    • sgallery Parser Function changes contributed by David Claughton <dave@eclecticdave.com>
  • Two new tag arguments are available for controlling the infopane
    • infopane sliding and opacity patch provided by David Claughton <dave@eclecticdave.com>
  • Bumped version to 1.1d
1.1c
  • Pulled out the special page and database stuff. It doesn't add much, and using wiki pages for that kind of thing is much more tested and reliable. I recommend creating a "Gallery" and "Gallery_Talk" namespace, and use those for linkable galleries.
1.1b
  • Refactored code
    • Broke apart parsing and rendering
    • Moveed most functions into the class
    • Recreated cache in database on purge
1.1a
  • Allow multiple modes of fallback when javascript isn't available including image-only, image with warning, and plain gallery.
  • Add support for SmoothGallery 2.0 features
  • Save galleries in database for use on special page
  • Allow image descriptions like regular galleries
1.0h
  • Fixed a problem with boolean values being passed incorrectly between the special page and the extension
  • Changed the way images are looked up. Images can now also be added like "Image:Imagename.jpg" instead of just "Imagename.jpg"
1.0g
  • return true at the end of addSmoothGalleryJavascriptAndCSS(); if a hook doesn't return it can cause problems for other extensions that use the same hook
1.0f
  • Changed "gmp_strval( gmp_random(1) )" to "mt_rand()" for better compatibility
1.0e
  • Added a special page so that you can link to galleries instead of embedding them into pages
    • You can use this like <sgallery special="linkname">imagesGoHere</sgallery>
    • All options available should work in the special page
    • This was tested in MediaWiki 1.6-1.9 (so it should work, tell me if not!)
1.0d
  • Parse templates before rendering html
1.0c
  • Now check to see if an image object is null before trying to make a thumbnail of it.
1.0b
  • Added a configuration option ($wgSmoothGalleryDelimiter) to choose your own delimiter
  • Changed default delimiter from , to \r (it seems a comma is a valid character in image names)
1.0a
  • Initial released version

Wikis using this extension[edit | edit source]