RSS

cSprites – A Dynamic CSS Sprite Generator in PHP5

By Adrian Mummey in php, programmingDec 5th, 2008 | 3 responses

CSS Sprites – A Background

The idea of combining images into a larger one and displaying this using CSS tricks has been around for awhile. There are a couple big benefits to doing this: First it reduces the number of HTTP requests that the browser has to make, by combining say 5 images into 1 big image, the number of image requests has been reduced by 4. This can increase the effeciency of page loading and you can see gains in the speed at which your page is loaded. Second, when working with elements like rollover images, you can “preload” all of the states of the rollover and prevent flicker when users interact with these elements.

If used properly combining image elements in sprites can be very beneficial for web developers. However it is not without its problems. One of the most obvious issues is that the sprite needs to be generated before its component images can be used, you need to know which images will be used beforehand. This is fine for things like icons and buttons that won’t change very often, but is useless for any other images that will be displayed dynamically. Although it is good for very static elements like buttons and icons, if you need to make a change to any of these image elements, the entire sprite needs to be rebuilt, the sprite AND CSS needs to be rebuilt to reflect any change to its component images. Although there exist some scripts and websites that can handle this, it can still be a tedious process.

cSprites – A New Way of Doing Things

What cSprites aims to do is to solve these problems by generating CSS sprites on the fly. The general process of doing this consists of three steps:

  1. Tell cSprites which images you want to use
  2. Process the sprites
  3. Use cSprites functions to display the images and relevant CSS code

Here is a sample of code that shows how these three steps are implemented:


<?php
//We need to include the main Sprite File which will setup the autoloading and config
require_once('Sprite.php');
Sprite::ppRegister('/images/image1.jpg');
Sprite::ppRegister('/images/image2.jpg');
Sprite::process(); //We MUST call the process function BEFORE we actually show any images
?>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
        <?php echo Sprite::getAllCssInclude(); /*This will output the complete css of all of the sprites*/ ?>
</head>
<body>
<?php echo Sprite::image_tag('/images/image1.jpg'); /*outputs a pseudo img tag using css styles*/ ?>
<?php echo Sprite::image_tag('/images/image2.jpg'); /*outputs a pseudo img tag using css styles*/ ?>
</body>
</html>

Get cSprites with SVN

svn co https://csprites.svn.sourceforge.net/svnroot/csprites csprites

  • Share/Bookmark


3 Responses to “cSprites – A Dynamic CSS Sprite Generator in PHP5”

  1. Klemen says:
    03.17.2009 at 7:36 pm

    Hi,
    my blog is heavy with images, and i tried csprites, but… somehow images don’t show up when csprites is activated (it loads much faster tho, heh).
    I tried IE and firefox, the same… There are just big blank spaces (and image gets loaded when i click the blank space).
    Mybe you could check the image code I am using? It’s powered by Lightview Plus plugin.
    Thanks

    oh, there are blank spaces even when i deactivate the lightview plugin.. thanks in advance!

    Reply
  2. cSprites - A Dynamic CSS Sprite Generator in PHP5 | mummey.org « DevEzine says:
    04.22.2009 at 7:43 am

    [...] Here is the original post: cSprites – A Dynamic CSS Sprite Generator in PHP5 | mummey.org [...]

    Reply
  3. David Kilmer says:
    10.26.2009 at 2:44 am

    Hey there – great code, i am trying to get it to work here http://bit.ly/2w9hUR
    only the top three thumb nails ( not the ‘featured’/'ad’/'featured’ row ) are set to display as sprites.
    If you go to you it, you will see they will load images, but if you refresh, it disappears. when the cSprites cache is cleared, it will show again, but like before, only once.
    When i look at the source when its showing – it shows that it loaded the right css file, and its background propertys are set with a url() , but when you refresh and look at the source , there is the clickable sprite taking up the space for the cSprite, correct css file loaded, but no url set – so no image.
    any advice you have, and if you could offer help, that would be awesome ( ill $send$ a donation )

    Let me know :D

    PS i downloaded the most recent word press plugin for this – but because my theme is so custom and the plugin only works for post content, i was grateful to find this post and am super excited to get it to work – VERY valuable code you have here )

    Reply

Leave a Reply