Contents:
Coming soon.
Add the following entry to your composer.json:
{ "require": { "pminnieur/sprites": "dev-master" }}
Clone Sprites git repository:
git clone git://github.com/pminnieur/sprites.git
Download composer.phar file and install dependencies:
wget -nc http://getcomposer.org/composer.phar
php composer.phar install
Run sprites executable from bin directory:
php bin/sprites
A simple configuration of a Sprites\ProcessorInterface requires a Sprites\Configuration instance
<?php
use Sprites\Configuration;
use Sprites\Processor\DynamicProcessor;
use Imagine\Gd\Imagine;
use Imagine\Image\Color;
$imagine = new Imagine();
$config = new Configuration();
$config->setImagine($imagine);
$config->setColor(new Color('fff', 100));
$config->setImage('web/images/icons.png');
$config->setStylesheet('web/css/icons.css');
$config->getFinder()->name('*.png')->in('web/images/icons');
$config->setSelector(".icon.{{filename}}{background-position:{{pointer}}px 0px}\n");
$processor = new DynamicProcessor();
$processor->process($config);
// ...
The following sections describe all the configuration options available on a Sprites\Configuration instance.
<?php
$config->setImagine($imagine);
$config->getImagine();
The Imagine\ImagineInterface instance to use.
<?php
$config->setOptions($options);
$config->getOptions();
An array of options for the Imagine\Image\ManipulatorInterface::save() method.
Note
Each Imagine\ImageInterface adapter has its own subset of options.
<?php
$config->setFinder($finder);
$config->getFinder();
The Symfony\Component\Finder\Finder instance used to find files for your sprites.
Note
To unleash the full power of this component, read the Finder documentation.
<?php
$config->setImage($path);
$config->getImage();
The path to the target image sprite.
Note
If the directory does not exist yet, it will automatically be created.
<?php
$config->setColor($color);
$config->getColor();
The Imagine\Image\Color instance to use as background color.
<?php
$config->setProcessor($processor);
$config->getProcessor();
The name of the Sprites\Processor\ProcessorInterface to use. This configuration value is only needed if you use the Sprites\Generator and may be guessed automatically, depending if you set a fixed width or not.
Note
Sprites already supports two different kind of processors:
<?php
$config->setWidth($width);
$config->getWidth();
A fixed width for each image in the sprite. This configuration value is only used in the Sprites\Processor\FixedProcessor and speeds up generating the image sprite.
Note
The Sprites\Processor\FixedProcessor could optionally resize your images if they exceed the fixed width.
<?php
$config->setStylesheet($path);
$config->getStylesheet();
The path to the target stylesheet.
Note
If the directory does not exist yet, it will automatically be created.
<?php
$config->setSelector($selector);
$config->getSelector();
A string parsed for each image, to be used as the CSS in the generated stylesheet.
Note
The default value of the selector is ".{{filename}}{background-position:{{pointer}}px 0px}\n".
The DynamicProcessor class is used to generate image sprites from images with a dynamic width and height.
<?php
use Sprites\Configuration;
use Sprites\Processor\DynamicProcessor;
$config = new Configuration();
// ... configure your configuration
$processor = new DynamicProcessor();
$processor->process($config);
The FixedProcessor class works similar to the DynamicProcessor. There are two main differences:
Note
The height of the image sprite is still calculated dynamically, but ideally only once (e.g. if you use famfamfam icons which usually are dimensioned in 16px x 16px, the first image sets the sprites’ height to 16px and then the height must not be adjusted again).
<?php
use Sprites\Configuration;
use Sprites\Processor\FixedProcessor;
$config = new Configuration();
$config->setWidth(16); // fixed width of 16px per image
// ... configure your configuration
$processor = new FixedProcessor(array('resize' => true));
$processor->process($config);
The Sprites\Generator class is used for batch processing multiple Sprites\Configuration instances with their corresponding Sprites\Processor\ProcessorInterface instances.
<?php
use Sprites\Configuration;
use Sprites\Generator;
use Sprites\Processor\DynamicProcessor;
use Sprites\Processor\FixedProcessor;
// ... add your processor classes
$generator = new Generator();
$config = new Configuration();
// ... configure your configuration
$generator->addConfiguration($config);
// ... add your configurations
$dynamic = new DynamicProcessor();
$generator->addProcessor($dynamic);
$fixed = new FixedProcessor();
$generator->addProcessor($fixed);
// ... add your processors
$generator->generate();
The Sprites Console is a Command Line Interface tool for simplifying the usage and generation of image sprites without the need of you actually writing a single line of PHP code.
The generate:dynamic command generates image sprites and CSS stylesheets with dynamic dimensions:
php sprites generate:dynamic --help
The generate:fixed command generates image sprites and CSS stylesheets with a fixed width dimension:
php sprites generate:fixed --help