The SpriteSheet extension allows uploaded images to be divided into sprite sheets or custom slices to be displayed without having to use an external image editor. The resulting sprites and slices are dynamically generated using CSS.
- Project Homepage: Documentation at Github
- Mediawiki Extension Page: Extension:SpriteSheet
- Source Code: Source Code at Github
- Bugs: Issue Tracker at Github
- Licensing: SpriteSheet is released under The GNU Lesser General Public License, version 3.0.
There are two available rights that may be assigned to groups, 'edit_sprites' and 'spritesheet_rollback'. The 'edit_sprites' permission gives the ability to edit sprite sheets, sprites, slices, assign names, and delete. The 'spritesheet_rollback' allows the ability to rollback changes from the change log.
Default permissions:
$wgGroupPermissions['autoconfirmed']['edit_sprites'] = true; $wgGroupPermissions['sysop']['spritesheet_rollback'] = true;
The #sprite tag format accepts X and Y coordinate positions to select a section of the image in a traditional column and row format.
Basic Syntax:
{{#sprite:file=File:Example.png|column=0|row=0}}
It can also be spaced across lines for readability:
{{#sprite: file=File:Example.png |column=0 |row=0 }}
With optional resize and link:
{{#sprite: file=File:Example.png |column=0 |row=0 |resize=300 |link=ExampleArticle }}
Parameter | Description |
---|---|
file
|
Required: yes
|
column
|
Required: yes
|
row
|
Required: yes
|
resize
|
Required: no, Default: null
|
link
|
Required: no, Default: null
|
To display the sprite located at column 4, row 2:
{{#sprite: file=File:Hanamura-screenshot.jpg |column=4 |row=2 }}
The #ifsprite tag is used to display a named sprite if it exists. If the named sprite does not actually exist yet it will instead return the given wiki text.
Basic Syntax:
{{#ifsprite: file=File:Example.png |name=TestSprite |wikitext={{SpriteNotFound}} }}
Parameter | Description |
---|---|
file
|
Required: yes
|
name
|
Required: yes
|
resize
|
Required: no, Default: none
|
wikitext
|
Required: yes, Default: none
|
{{#ifsprite: file=File:Hanamura-screenshot.jpg |name=Plaque |wikitext=[http://www.example.com/ Use This Example] }}
The #slice tag takes X and Y positioning along with width and height sizing to select a section of the image. All four parameters take units in pixels(px) or percentages(%), but they all must use the same unit.
Basic Syntax:
{{#slice:file=File:Example.png|x=0|y=0|width=10|height=10}}
It can also be spaced across lines for readability:
{{#slice: file=File:Example.png |x=0 |y=0 |width=10 |height=10 }}
With optional resize and link:
{{#slice: file=Example.png |x=0 |y=0 |width=10 |height=10 |resize=300 |link=ExampleArticle }}
Parameter | Description |
---|---|
file
|
Required: yes
|
x
|
Required: yes
|
y
|
Required: yes
|
width
|
Required: yes
|
height
|
Required: yes
|
resize
|
Required: no, Default: null
|
link
|
Required: no, Default: null
|
{{#slice: file=File:Hanamura-screenshot.jpg |x=27.88 |y=32.31 |width=25.62 |height=25.55 }}
The #ifslice tag is used to display a named slice if it exists. If the named slice does not actually exist yet it will instead return the given wiki text.
Basic Syntax:
{{#ifslice: file=File:Image_Name.png |name=SliceTest |wikitext={{SpriteNotFound}} }}
Parameter | Description |
---|---|
file
|
Required: yes
|
name
|
Required: yes
|
resize
|
Required: no, Default: none
|
wikitext
|
Required: yes, Default: none
|
{{#ifslice: file=File:Hanamura-screenshot.jpg |name=Plaque |wikitext=[http://www.example.com/ Use This Example] }}
After a sprite or slice has been selected a pop up will open under the tag preview. This allows a custom name to be set for the selection that can be recalled later. It uses the same #sprite and #slice parser tags with the "name" parameter instead of specifying the positioning.
{{#sprite:file=File:Hanamura-screenshot.jpg|name=Plaque}}
{{#sprite:file=File:Hanamura-screenshot.jpg|name=Plaque|resize=800}}
{{#slice:file=File:Hanamura-screenshot.jpg|name=Plaque}}
{{#slice:file=File:Hanamura-screenshot.jpg|name=Plaque|resize=500}}