PHP Classes

picStylizer: Generate sprite images and CSS from image files

Recommend this page to a friend!
  Info   View files View files (12)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog (1)    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 265 This week: 1All time: 7,763 This week: 560Up
Version License PHP version Categories
picstylizer 1.3GNU General Publi...5HTML, Graphics, Tools, Files and Folders, P...
Description 

Author

This class can generate sprite images and CSS from image files.

It can traverse given directories and extract the list of images.

The class can create a new sprite image with all the found images and a CSS file to show those images as background pictures of Web page elements.

Picture of Luciano Salvino
  Performance   Level  
Name: Luciano Salvino <contact>
Classes: 11 packages by
Country: Argentina Argentina
Age: 51
All time rank: 134516 in Argentina Argentina
Week rank: 411 Up3 in Argentina Argentina Up
Innovation award
Innovation award
Nominee: 9x

Details

picStylizer

picStylizer is a PHP class that create sprite and css style file from images folder

Notice: if you want to change the image onMouseOver (hover) you have add "_hover" at the end of filename before the extention. Example:

// initial image
icon.png
// hover image
icon_hover.png

// the result css code will be:
.icon {...}
.icon:hover {...}

Usage

include("./picStylizer.php");

// Initialize Class
$pS = new picStylizer();

// define folder configuration
$config = array(
	// set the origin folder
	"origin" => array(
		"images" => "origin/images" // folder from where the script will take the images,
		"include_subfolders" => true
	),
	// set destination folder
	"destination" => array(
		"styles" => "destination/css/sprites.css", // define css style of sprites
		"sprites" => "destination/sprites/sprites.png", // define the sprite image result
		//"example" => "destination/example/sprites.html", // define the html example
		"rel_path_to_sprite_image" => "./", // define the path
		"rel_path_to_sprite_css" => "./"    // define the path
	)
);
$pS->setFoldersConfig($config);

// resize images
$pS->resizeCoefficient(0.7);

// define minization (default: true)
$pS->setMinization();

// define css style by default
$pS->setCssInit($css ='body {backgound-color:#000; color:#fff; font-size:14px;}', $class_prefix='mySprite');

// gen sprites, styles and html example
set_time_limit(1000);
$pS->getSprite($save_html=true, $redirect_to_html=true);

Results

Output source code will be like this:

<div class="sprite-each mySprite-image1"></div>
<div class="sprite-each mySprite-image2"></div>
<link rel="stylesheet" href="./sprites.css">
					↓
				body {background-color:#000;font-family:courier;color:#fff;font-size:14px;}
				.sprite-each{background-image:url("./sprites.png"); 
				.mySprite-image1 {background-position: 0 -XXX; background-repeat:no-repeat;width:XXX; height:XXX}
				.mySprite-image2 {background-position: 0 -XXX; background-repeat:no-repeat;width:XXX; height:XXX}
...

  Files folder image Files  
File Role Description
Files folder imagedestination (3 directories)
Files folder imageorigin (1 directory)
Accessible without login Plain text file composer.json Data composer
Accessible without login Plain text file LICENSE Lic. license
Plain text file picStylizer.php Class class
Accessible without login Plain text file README.md Data readme

  Files folder image Files  /  destination  
File Role Description
Files folder imagecss (1 file)
Files folder imageexample (1 file)
Files folder imagesprites (1 file)

  Files folder image Files  /  destination  /  css  
File Role Description
  Accessible without login Plain text file sprites.css Data Auxiliary data

  Files folder image Files  /  destination  /  example  
File Role Description
  Accessible without login HTML file sprites.html Doc. Documentation

  Files folder image Files  /  destination  /  sprites  
File Role Description
  Accessible without login Image file sprites.png Data Auxiliary data

  Files folder image Files  /  origin  
File Role Description
Files folder imageimages (1 file, 1 directory)

  Files folder image Files  /  origin  /  images  
File Role Description
Files folder imageicons (4 files)
  Accessible without login Image file progress_bar.png Icon image example

  Files folder image Files  /  origin  /  images  /  icons  
File Role Description
  Accessible without login Image file icon_f.png Icon image example
  Accessible without login Image file icon_g.png Icon image example
  Accessible without login Image file icon_tw.png Icon image example
  Accessible without login Image file icon_tw_hover.png Icon image example

 Version Control Unique User Downloads Download Rankings  
 100%
Total:265
This week:1
All time:7,763
This week:560Up