Command-line CSS spriting / Stoyan's phpied.com
What?
So the imagemagick command is generally something like:
$ convert image1.png image2.png image3.png -append result/result-sprite.png
But we can also replace the list of images with *s:
$ convert * -append result-sprite.png
Or as in the previous case, limiting to *.gif and *.png.
How about a horizontal sprite? All it takes is changing -append to +append:
$ convert *png *gif +append result/result-sprite-horizon.png
The result:
Also note how the source images can be any format - GIF, PNG, JPEG and the result is PNG. Actually I'd recommend always trying PNG8 first:
$ convert *png *gif -append PNG8:result/result-sprite-horizon.png
CSS positions
Imagemagick to the rescue. `identify` gives you the basic image info:
$ identify 1.png
1.png PNG 16x16 16x16+0+0 DirectClass 8-bit 260b
`identify` also has a `-format` option and supports *. So getting all the info in a neat form is easy:
$ identify -format "%g - %f\n" *
16x16+0+0 - 1.png
16x16+0+0 - 2.gif
6x6+0+0 - dot.png
10x16+0+0 - phoney.gif
16x16+0+0 - tw.gif
%f is filename and %g is geometry.
\n is a new line as you would expect and sometimes - is just a -.
So if you want to figure out the Y position of the fifth element, well, it's the sum of the heights of the previous: 16+16+6+16
.last {
width: 16px;
height: 16px;
background: url(result-sprite.png) 0 -54px
}
Some complicated math! 'scuse me while I ask my second grader if she can handle it
And some smushing
Or how about.... smush.it on the command line:
$ curl http://www.smushit.com/ysmush.it/ws.php
?img=http://www.phpied.com/files/sprt/result/result-sprite.png
Result is JSON:
{"src":"http:\/\/www.phpied.com\/files\/sprt\/result\/result-sprite.png",
"src_size":1759,
"dest":"http:\/\/smushit.zenfs.com\/results\/5a737623\/smush\/%2Ffiles%2Fsprt%2Fresult%2Fresult-sprite.png",
"dest_size":1052,
"percent":"40.19",
"id":""}
Oh looky, almost half the filesize. Let me at it! Copy the `dest` URL:
$ curl http:\/\/smushit.zenfs.com\/results\/5a737623\/
smush\/%2Ffiles%2Fsprt%2Fresult%2Fresult-sprite.png > result/smushed-sprite.png
CSS Sprites generation tool / Stoyan's phpied.com
$cmd = 'convert ' . implode(' ', $coord)
. ' -background none -mosaic -bordercolor none -border '
. $half . 'x' . $half
. ' ' . $output_dir . '/result.' . $this->output_format;
system($cmd, $ret);
return $ret === 0;