Icons_Sprites_Usage

Icons/Sprites usage

In the default theme for phpMyAdmin 3.5+ the major parts of phpMyAdmin's icons are now also available as CSS Sprites. This change significantly reduces the number of files the clients browser has to request from the server, which results in the page being loaded quicker.

For developers

There are two new sprite-aware functions available in phpMyAdmin. One for PHP and one for JavaScript and both of them are called PMA_getImage(). They will return an IMG tag for the requested image and are aware of which image is available as a sprite and which one isn't.

PHP

Prototype

string PMA_getImage(string $filename[, string $alternate[, array $attributes]]);

Sample usage

echo PMA_getImage('b_drop.png'); echo PMA_getImage('b_drop.png', __("Delete something")); echo PMA_getImage('b_drop.png', __("Delete something"), array('class' => 'hide', 'id' => 'jsonly'));

Overriding attributes

The $alternate parameter sets both the 'alt' and the 'title' attributes in the IMG tag, but if you need to set only one of the two there are two ways to override. An example of how to only set the 'alt' attribute:

echo PMA_getImage('b_drop.png', __("Delete something"), array('title' => "")); echo PMA_getImage('b_drop.png', "", array('alt' => __("Delete something")));

JS

Prototype

object PMA_getImage(string $filename[, string $alternate[, object $attributes]]);

This is what you might expect back after calling this function:

{ toString: function() { // returns the IMG tag }, attr: function(string name) { // returns the value of the requested attribute }, isSprite: true // or false }

Sample usage

var myImage = PMA_getImage('b_edit.png'); var myImage = PMA_getImage('b_edit.png', PMA_messages['strEdit']); var myImage = PMA_getImage('b_exit.png', "", {'alt': PMA_messages['strEdit']});

// Once you have an image object, you can query it for attributes // and use those to replace an existing image $img.attr('src', myImage.attr('src')); $img.attr('class', myImage.attr('class'));

// Or you can use the image directly var buffer = myImage.toString();

// Creating a jQuery object var $myObj = $(PMA_getImage('b_edit.png').toString());

For themers

If you wish to use sprites in your theme, you can checkout the latest version of phpMyAdmin from Git, copy your theme into the 'themes' folder and follow the instructions for maintainers below to generate the sprites.

For maintainers

Regenerating the sprites

Note that this will regenerate the sprites for all the themes that are found in the 'themes' folder.

Prerequisites

• A linux shell
• Imagemagick
• pngcrush (optional, but recommended)

Usage

The ./scripts/generate-sprites script takes one argument, the path to the root folder of the phpMyAdmin. So you might call it like this:

cd /path/to/phpmyadmin ./scripts/generate-sprites .

or

/home/username/phpmyadmin/scripts/generate-sprites /home/username/phpmyadmin

Category:Devel