Dynamic Sprite Framework with PHP: New PLUS Tutorial

Dynamic Sprite Framework with PHP: New PLUS Tutorial

Sep 9th in News by Nikola Malich

In this Nettuts+ PLUS tutorial, you will learn how to create a dynamic "Image Sprite Framework" from an icon set of your choosing. The framework will consist of the sprite image, a sprite stylesheet whose class names and properties correspond to the icons within our sprite image, and an HTML preview page - which we can use as a quick reference guide for the framework. By the end of this tutorial, you should feel comfortable creating dynamic image sprites on your own and should be able to implement and take full advantage of the many benefits this system provides.

Sign up!

PG

Author: Nikola Malich

I am an independent Web Developer who enjoys working with PHP, JavaScript, HTML, CSS and PhotoShop. I'm an enthusiast of the CodeIgniter PHP Framework as well as the jQuery JavaScript library and am hoping to learn Ruby in the near future.

sample

Join Tuts Plus

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called "TUTSPLUS". For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at nettuts+, psdtuts+, and vectortuts+! For the price of a pizza, you'll learn from some of the best minds in the business. Join today!

  • Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.


Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    Vasjen Katro September 9th

    Too bad i dont have an premium account!
    Maybe soon!

    Good one!

    Cheers

    ( Reply )
  2. PG

    sam September 9th

    it looks cool thanks for posting

    ( Reply )
  3. PG

    Yoosuf September 9th

    After a one week, gonna download and have a read

    ( Reply )
  4. PG

    Orves September 9th

    Very nice tutorial, will use it right away in a new project. Saves a lot of time and serverloads for all the separate icons.

    ( Reply )
    1. PG

      Nikola Malich September 9th

      … glad to hear that you like this technique.

      ( Reply )
  5. PG

    Juan C Rois September 9th

    I’m very new to this technique, I’m sure it will be useful to me and many others.
    Thanks for the tutorial. Keep up the good work.

    ( Reply )
    1. PG

      Nikola Malich September 9th

      … thank you for the kind words Juan. I’ve only recently discovered how powerful and useful PHP’s GD library is. Using GD can really be a huge time saver when it comes to design / development.

      ( Reply )
  6. PG

    Josh September 9th

    I noticed that the demo does not work as all the icon file names start with a capital letter, or am I doing something wrong…

    ( Reply )
    1. PG

      Nikola Malich September 9th

      … filenames can start with capital letters but they ’shouldn’t’ start with a digit as their corresponding CSS rules will be invalid.

      ( Reply )
      1. PG

        Orves September 10th

        I get the following error when publishing live;

        Warning: imagecreatefrompng(/home/deb69/domains/[domain]/public_html/sprite/icons/quartz/adobe_bridge.png) [function.imagecreatefrompng]: failed to open stream: No such file or directory in /home/deb69/domains/[domain]/public_html/sprite/sprite_builder.php on line 52

        This refers to the comment of Josh who has the same problem. Is this a PHP.ini setting or does something needs to be adjusted in your script?

        The filename on the server is Adobe_Bridge.png

      2. PG

        Orves September 10th

        I contacted my hosting provider and it is a Apache setting. All icons and iconmaps should be lowercase to make the script work on most hosts.

    2. PG

      Nikola September 10th

      … just uploaded everything to a live server to test it and you guys are correct. Sorry about that. Although I initially tested this on a live server, as I made changes to the code I only tested them locally. It turns out that I was a bit eager in converting everything to lowercase and since I’m working on a Windows PC locally this didn’t generate any errors. I’m updating everything as we speak. Basically, we’ll only be converting to lowercase when writing CSS rules or HTML class names. It’s kind of funny, but, I always convert filenames to lowercase when uploading them to my server so I had heaps of fun figuring this one out. haha

      ( Reply )
  7. PG

    etrnly September 10th

    Very Useful…! Nice job!

    ( Reply )
  8. PG

    jQeueryGlobe September 10th

    So, the final result of this tutorial is similar to spritegen.website-performance.org ?

    ( Reply )
    1. PG

      Nikola Malich September 10th

      … this is the first time I’ve seen that web utility and I haven’t had a chance to test it out yet but I would assume it’s very similar. I actually created this system as a result of being unable to find an ‘online’ Sprite Generator. In the future, I may write a tutorial on how to extend this system into a whole slew of image utilities. Nice find, though. Where were you with this info a few months ago when I was figuring out how to work transparencies in GD… haha

      ( Reply )
  9. PG

    Orves September 10th

    Nikola and others,

    The thing why the script in a live enviroment is not working is because the live enviroment I am working in is a UNIX server. Windows servers don’t care about Upper- and lowercasae names UNIX servers do.

    All icons and foldernames should be lowercase to solve the problem. When you want to use this script for one of your projects you should do a check on the files and rewrite them to lowercase.

    A script to help you on the way : http://phpweby.com/software/filerenamer

    ( Reply )
    1. PG

      Nikola Malich September 10th

      … I use a UNIX server actually. The problem was that I was greedy in converting everything to lowercase. I’ve updated the code and tutorial so that we’re only converting the appropriate strings to lower case when writing CSS rules and HTML class names. I tested it out on my live server and it works properly. Sorry about that, I was really designing this system for ‘local’ environment. Keep in mind, though, if you’re using this on a live web server you’re definitely going to want to button everything down a bit. I’d start by limiting the length of the submitted values and throwing some simple regex validation in there.

      ( Reply )
  10. PG

    Orves September 11th

    One thing to mention;

    Rule 266 change $sprite['icon_name'][] = strtolower($path_info['filename']);
    to $sprite['icon_name'][] = $path_info['filename'];

    And it works on UNIX based servers too.

    Note to mention: folders should be all lowercase because of the prep() function.

    ( Reply )
    1. PG

      Nikola Malich September 11th

      … that’s correct. I’ve already updated the code and it should have been changed by now. This is what I meant when I said I was a bit greedy in just coverting everything to lowercase.

      ( Reply )
  1. Arrow
    Gravatar

    Your Name
    September 11th