CSS sprite class for creating sprite image and CSS code generation

CSS sprite class can generate CSS sprite image from multiple provided images.

It provides basic image manipulations, like saving image, outputting to browser, etc

This class can also generate CSS code for sprite image usage, from HTML element ID's in which image is used, that could be provided together with image.

CSS code generation facilitates CSS sprite implementations to existing website structures.

For more information about CSS sprites you can read this article: CSS sprites to speed up page loading.

Download
Example codes
Examples in action
Method list
Possible error messages
Latest changes
Rate us
Support
Awards

Download

Back to contents

PHP classes - CSS Sprite class

Example codes

Back to contents

Generate CSS styles for sprite:

<?php

/*
 * This example shows how to generate css code and use it with created CSS sprite
 */
 
//declaring class instance
include("../css_sprite.class.php");
$sprite = new spritify();

//adding test images
$sprite->add_image("../test_images/php.jpg", "jpeg");
$sprite->add_image("../test_images/php.gif", "gif");
$sprite->add_image("../test_images/elephpant.png", "elephant");

//retrieving error
$arr = $sprite->get_errors();
//if there are any then output them
if(!empty($arr))
{
    foreach($arr as $error)
    {
        echo "<p>".$error."</p>";
    }
}
else
{
    //else generate CSS code for added images
    $string = $sprite->generate_css("./image_output_example.php");
    //outputting CSS code
    echo "<style type='text/css'> n";
    echo $string;
    echo "</style> n";
}
?>
<!-- HTML elements that use CSS sprites for background using generated CSS code -->
<div id='jpeg' style=' border:1px solid green;'>
</div>
<p>&nbsp;</p>
<div id='gif' style='float: right;background-color: green; border:1px solid red;'>
</div>
<p>&nbsp;</p>
<div id='elephant' style='background-color: red; border:1px solid green;'>
</div>

Generate CSS sprite image:

<?php

/*
 * This example shows how to output image to browser or get GD image resource
 */
 
//declaring class instance
include("../css_sprite.class.php");
$sprite = new spritify();

//adding test images
$sprite->add_image("../test_images/php.jpg", "jpeg");
$sprite->add_image("../test_images/php.gif", "gif");
$sprite->add_image("../test_images/elephpant.png", "elephant");

//retrieving error
$arr = $sprite->get_errors();
//if there are any then output them
if(!empty($arr))
{
    foreach($arr as $error)
    {
        echo "<p>".$error."</p>";
    }
}
else
{
    //returns GD image resource
    //$img = $sprite->get_resource();
    
    //outputs image to browser
    $sprite->output_image();    
}
?>

Examples in action

Back to contents

Example scripts provided with package in action:

Method list

Back to contents

Get errors
Add new image to sprite
Output image to browser
Generate CSS code
Safe generated sprite image
Get image resource

Get errors

Back to method list

Method name	get_errors()
Description	Returns array with errors or empty array if there was no errors
Example output	Array ( [0] => Provided file ./image.png doesn't exist )

Add new image to sprite

Back to method list

Method name

add_image($image_path, $id="elem")

Description

Adds new image to sprite

Input parameters

string $image_path - path to image, for example "./images/head.png"

string $id - id of element in which this image will be used for CSS code generation

Output image to browser

Back to method list

Method name	output_image()
Description	Outputs image to browser like PHP generated images

Generate CSS code

Back to method list

Method name	generate_css($path = "/css_sprite.png")
Description	Generates CSS code (width, height, background-position) using element IDs provided when adding new images
Input parameters	string $path - path to created css image, for example "./images/sprite.png"
Example input	Three imags added with IDs jpeg, gif and elephant Than called generate_css("./image_output_example.php") method
Example output	#jpeg { background-image: url(./image_output_example.php); background-position: -103px 0px; width: 297px; height: 184px; } #gif { background-image: url(./image_output_example.php); background-position: 0px -184px; width: 400px; height: 298px; } #elephant { background-image: url(./image_output_example.php); background-position: -267px -482px; width: 133px; height: 117px; }

Safe generated sprite image

Back to method list

Method name	safe_image($path = "")
Description	Saves generated sprite image. If path is provided image is saved to that path (server side), if not save dialog will be opened(client side)
Input parameters	string $path - path where to save CSS image on the server side.

Get image resource

Back to method list

Method name	get_resource()
Description	Return GD image resource of generated sprite

Possible error messages

Back to contents

List of all errors and meanings

Error text	Meaning	Solution
Provided file IMAGE_PATH isn't correct image format	File you are trying to add isn't image, or has unsupported format.	Convert it to any supported format, like png, jpg or gif
Provided file IMAGE_PATH doesn't exist	File you are trying to add doesn't exist	Check your specified path and/or file/directory permissions