Skip to content

Instantly share code, notes, and snippets.

@markomarkovic
Forked from jaymzcd/buildSprite.sh
Last active December 24, 2015 22:09
Show Gist options
  • Save markomarkovic/6870946 to your computer and use it in GitHub Desktop.
Save markomarkovic/6870946 to your computer and use it in GitHub Desktop.
#!/usr/bin/env bash
# Uses GraphicsMagick to stich together all images in a folder and
# generates a CSS file with the correct offsets along with a
# test HTML page for verification
if [ $# -gt 0 ]
then
if [ $3 ]
then
ext="."$3; # the extension to iterate over for input files
else
ext=".png"; # the extension to iterate over for input files
fi
destDir=$1; # output will be placed in a folder named this
if [ $2 ]
then
className=$2;
else
className=$1;
fi
cssFile="$destDir/$className.css";
htmlFile="$destDir/$className.html";
rm -fr $destDir;
mkdir -p $destDir;
touch $cssFile $htmlFile;
echo "Generating sprite file...";
gm convert *$ext -append $destDir/$className$ext;
echo "Sprite complete! - Creating css & test output...";
echo -e "<html>\n<head>\n\t<link rel=\"stylesheet\" href=\"`basename $cssFile`\" />\n\t<style type=\"text/css\">.$className { margin: 10px; border: 10px solid #eee; }</style>\n</head>\n<body>\n\t<h1>Sprite test page</h1>\n" >> $htmlFile
echo -e ".$className {\n\tbackground:url('$className$ext') no-repeat top left; display:inline-block;\n}" >> $cssFile;
counter=0;
offset=0;
for file in *$ext
do
width=`gm identify -format "%w" "$file"`;
height=`gm identify -format "%h" "$file"`;
idname=`basename "$file" $ext`;
clean=${idname// /-}
echo ".$className-$clean {" >> $cssFile;
echo -e "\tbackground-position:0 -${offset}px;" >> $cssFile;
echo -e "\twidth: ${width}px;" >> $cssFile;
echo -e "\theight: ${height}px;\n}" >> $cssFile;
echo -e "<a href=\"#\" class=\"$className $className-$clean\"></a>\n" >> $htmlFile;
let offset+=$height;
let counter+=1;
echo -e "\t#$counter done";
done
echo -e "<h2>Full sprite:</h2>\n<img src=\"$className$ext\" />" >> $htmlFile;
echo -e "</body>\n</html>" >> $htmlFile;
echo -e "\nComplete! - $counter sprites created, css written & test page output. ~jaymz";
else
echo -e "Usage: buildSprite.sh <output directory> [class name] [input extension (without the dot)]"
fi
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment