Extension:SpriteSheet

MediaWiki extensions manual

File:OOjs UI icon advanced-invert.svg SpriteSheet Release status: unmaintained
Implementation	Parser function
Description	Adds a parser functions called #sprite and #slice to display defined sections of an image without having to use an external editor.
Author(s)	Alexia E. Smith (Alexia E. Smith), Hydra Wiki Platform Team
Latest version	1.3.2 (2018-12-10)
MediaWiki	1.31+
PHP	7.0+
Database changes	Yes
License	GNU Lesser General Public License 3.0
Download	GitHub: <translate> project page</translate> <translate> git repository URL</translate> [<translate> help</translate> ] <translate> commit history</translate> <translate> Note:</translate> <translate> No [[<tvar name=1>Special:MyLanguage/Localisation#Translation resources</tvar>|localisation]] updates are provided by <tvar name=twn>translatewiki.net </tvar>.</translate>
Added rights edit_sprites spritesheet_rollback
Hooks used ParserFirstCallInit ImagePageShowTOC ImageOpenShowImageInlineBefore PageRenderingHash TitleMoveComplete LoadExtensionSchemaUpdates
Quarterly downloads
Public wikis using

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.

Installation

• <translate> <tvar name=1>Download</tvar> and place the file(s) in a directory called <tvar name=name>SpriteSheet</tvar> in your <tvar name=ext>extensions/</tvar> folder.</translate>
• <translate> Add the following code at the bottom of your <tvar name=1>LocalSettings.php </tvar> file:</translate>

  wfLoadExtension( 'SpriteSheet' );
  

• <translate> Run the [[<tvar name=update>Special:MyLanguage/Manual:Update.php</tvar>|update script]] which will automatically create the necessary database tables that this extension needs.</translate>
• File:OOjs UI icon check-constructive.svg <translate> Done</translate> – <translate> Navigate to <tvar name=special>Special:Version</tvar> on your wiki to verify that the extension is successfully installed.</translate>

Configuration

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;

Usage

Tags

#sprite - Parser Tag

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
}}

Parameters for #sprite Tag

Parameter	Description
file	Required: yes The file page containing the image to use.
column	Required: yes The X Coordinate Position of the sprite to select. Coordinates use zero based numbering.
row	Required: yes The Y Coordinate Position of the sprite to select. Coordinates use zero based numbering.
resize	Required: no, Default: null Display size in pixel width of the sprite. Note: Will not resize larger than 100% of the original size.
link	Required: no, Default: null Page name or external URL to have the sprite link to.

Example

To display the sprite located at column 4, row 2:

{{#sprite:
file=File:Hanamura-screenshot.jpg
|column=4
|row=2
}}

#ifsprite - Parser Tag

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}}
}}

Parameters for #ifsprite Tag

Parameter	Description
file	Required: yes The file page containing the image to use.
name	Required: yes The named sprite to load.
resize	Required: no, Default: none Display size in pixel width of the sprite. Note: Will not resize larger than 100% of the original size.
wikitext	Required: yes, Default: none The wiki text to parse and display if the named sprite is not found. Can be left blank to not display anything.

Example

{{#ifsprite:
file=File:Hanamura-screenshot.jpg
|name=Plaque
|wikitext=[http://www.example.com/ Use This Example]
}}

#slice - Parser Tag

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
}}

Parameters for #slice Tag

Parameter	Description
file	Required: yes The file page containing the image to use.
x	Required: yes The X position, in pixels or percentage, of the slice to cut.
y	Required: yes The Y position, in pixels or percentage, of the slice to cut.
width	Required: yes Width in in pixels or percentage starting from the Y position.
height	Required: yes Height in in pixels or percentage starting from the Y position.
resize	Required: no, Default: null Display size in pixel width of the sprite. Note: Will not resize larger than 100% of the original size.
link	Required: no, Default: null Page name or external URL to have the sprite link to.

Example

{{#slice:
file=File:Hanamura-screenshot.jpg
|x=27.88
|y=32.31
|width=25.62
|height=25.55
}}

#ifslice - Parser Tag

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}}
}}

Parameters for #ifslice Tag

Parameter	Description
file	Required: yes The file page containing the image to use.
name	Required: yes The named slice to load.
resize	Required: no, Default: none Display size in pixel width of the slice. Note: Will not resize larger than 100% of the original size.
wikitext	Required: yes, Default: none The wiki text to parse and display if the named slice is not found. Can be left blank to not display anything.

Example

{{#ifslice:
file=File:Hanamura-screenshot.jpg
|name=Plaque
|wikitext=[http://www.example.com/ Use This Example]
}}

Naming Sprites/Slices

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}}