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)    
Last Updated Ratings Unique User Downloads Download Rankings
2020-12-20 (11 months ago) RSS 2.0 feedNot enough user ratingsTotal: 258 All time: 7,749 This week: 429Up
Version License PHP version Categories
picstylizer 1.3GNU General Publi...5HTML, Graphics, Utilities and Tools, F..., 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: 48
All time rank: 138717 in Argentina Argentina
Week rank: 599 Up10 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:258
This week:0
All time:7,749
This week:429Up
For more information send a message to info at phpclasses dot org.