Created
May 12, 2011 15:06
-
-
Save catesandrew/968688 to your computer and use it in GitHub Desktop.
Build sprite with user controlled list of images and an optional 10px spacing between images using Imagemagick's montage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#!/bin/bash | |
# -- Generate html test page -- | |
# | |
# uses imagemagick to stich together all images supplied and | |
# then writes a css file with the correct offsets along with a | |
# test html page for verification that its all good. the big | |
# difference between this script and the other is that you | |
# dictate which files are included in the sprite, and that you | |
# can add a 10px horizontal spacing between the images. i gave | |
# up using the geometry feature of montage and opted to use | |
# a blank 1x10 blank png instead to get the desired effect. | |
# | |
if [ $# -gt 0 ] | |
then | |
PNG_BLANK="blank1x10.png" | |
# create the string of files | |
list_of_files="file1.png file2.png file3.png file4.png" | |
# declare the array | |
declare -a FILES | |
FILES=(`echo ${list_of_files// / }`) | |
ELEMENT_COUNT=${#FILES[@]} | |
INDEX=$ELEMENT_COUNT | |
while [ "$INDEX" -gt "-1" ] | |
do # List all the elements in the array. | |
echo ${FILES[$INDEX]} | |
# ${FILES[INDEX]} also works because it's within ${ ... } brackets. | |
let "J = ($INDEX + 1) * 2" | |
((J--)) | |
FILES[$J]="$PNG_BLANK" | |
((J--)) | |
FILES[$J]=${FILES[$INDEX]} | |
let "INDEX = $INDEX - 1" | |
# Or: | |
# ((INDEX--)) | |
done | |
let "J = ($ELEMENT_COUNT + 1) * 2" | |
((J--)) | |
unset FILES[$J] | |
if [ $3 ] | |
then | |
ext="."$3; # the extension to save the output file | |
else | |
ext=".png"; | |
fi | |
name=$1; # output will be placed in a folder named this | |
if [ $2 ] | |
then | |
classname=$2"-sprite"; | |
else | |
classname="sprite"; | |
fi | |
css="$name/$classname.css"; | |
html="$name/test.html"; | |
rm -fr $name; | |
mkdir $name; | |
touch $css $html; | |
echo "Generating sprite file..."; | |
montage +frame +shadow +label -tile 1x -gravity West -background transparent -geometry +0+0 ${FILES[@]} $name/$classname$ext; | |
echo "Sprite complete! - Creating css & test output..."; | |
echo -e "<html>\n<head>\n\t<link rel=\"stylesheet\" href=\"`basename $css`\" />\n</head>\n<body>\n\t<h1>Sprite test page</h1>\n" >> $html | |
echo -e ".$classname {\n\tbackground:url('$classname$ext') no-repeat top left; display:inline-block;\n}" >> $css; | |
counter=0; | |
offset=0; | |
for file in $list_of_files | |
do | |
width=`identify -format "%[fx:w]" "$file"`; | |
height=`identify -format "%[fx:h]" "$file"`; | |
idname=`basename "$file" $ext`; | |
clean=${idname// /-} | |
echo ".$classname#$clean {" >> $css; | |
echo -e "\tbackground-position:0 -${offset}px;" >> $css; | |
echo -e "\twidth: ${width}px;" >> $css; | |
echo -e "\theight: ${height}px;\n}" >> $css; | |
echo -e "<a href=\"#\" class=\"$classname\" id=\"$clean\"></a>\n" >> $html; | |
let offset+=$height; | |
let offset+=10; | |
let counter+=1; | |
echo -e "\t#$counter done"; | |
done | |
echo -e "<h2>Full sprite:</h2>\n<img src=\"$classname$ext\" />" >> $html; | |
echo -e "</body>\n</html>" >> $html; | |
echo -e "\nComplete! - $counter sprites created, css written & test page output."; | |
else | |
echo -e "There should be at least 1 argument!\n\tbuildSprite.sh output_folder classname output_extension" | |
fi |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment