# Image Spriting in XHP

DevFeed: [Image Spriting in XHP](<https://devfeed.tech/articles/image-spriting-in-xhp-22025.md>)

Original publisher: [Read original article](<https://codebeforethehorse.tumblr.com/post/11022211307>)

Author: Codebeforethehorse

Published: 2011-10-04T15:28:00Z

Content type: tutorial

Language: en

Sources: [Stefan Parker](<https://devfeed.tech/sources/stefan-parker.md>)

Topics: [PHP](<https://devfeed.tech/topics/php.md>), [Code](<https://devfeed.tech/topics/code.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [html](<https://devfeed.tech/tags/html.md>), [image](<https://devfeed.tech/tags/image.md>), [images](<https://devfeed.tech/tags/images.md>), [php](<https://devfeed.tech/tags/php.md>), [web-development](<https://devfeed.tech/tags/web-development.md>), [xhp](<https://devfeed.tech/tags/xhp.md>)

## AI overview

This tutorial shows how to build an XHP component in PHP that abstracts image spriting. The component behaves like an HTML element, maps image sources to sprite classes, and can optionally disable spriting for individual icons.

## Source excerpt

I want to share with you a quick XHP class you can build that will greatly abstract your image spriting. Image sprites are a great way to reduce the number of resources downloaded from your server, but they can be a hassle to maintain. If you already sprite your images then you might have a class that generates the styles for your images. Your API might look something like this: ImageSprite::getSpriteHtml(ImageSprite::ICON_PHOTOS); You can sprinkle those into your rendering and it'll work just fine, but with XHP you can build a custom component that behaves more like an HTML img tag than a PHP class and generates your spriting code behind the scenes. Consider the follow XHP element: class :ui:sprite extends :x:element { attribute :img; attribute bool usesprite = true; private static $_spriteMap = array( '/icons/apps.png' => 'appIcon', '/icons/photos.png' => 'photoIcon', '/icons/users.png' => 'userIcon', ... ); protected function render() { $img = <img class="imageSprite" />; $src = $this->getAttribute('src'); if ($this->getAttribute('usesprite') && isset(self::$_spriteMap[$src])) { $img->addClass($this->_spriteMap[$src]); $src = '/images/spacer.gif'; } $img->setAttribute('src', $src); return $img; } } Your CSS would then look something like this: .imageSprite { background: url('/icons/sprite.png') no-repeat; display: inline-block; height: 16px; width: 16px; } .appIcon { background-position: 0 0; } .photoIcon { background-position: 0 -16px; height: 14px; } .userIcon { background-position: 0 -30px; width: 15px; } Now you can intermix this element with your HTML and get code that looks like this: <ul class="nave"> <li> <a href="/apps"> <ui:sprite src="/icons/apps.png" /> Apps </a> </li> <li> <a href="/photos"> <ui:sprite src="/icons/photos.png" /> Photos </a> </li> <li> <a href="/users"> <ui:sprite src="/icons/users.png" /> Users </a> </li> </ul> With the XHP element set up the way it is you can even add icons to your code before you get a chance to sprite them, or con