-
-
Save ryanschuhler/6253893 to your computer and use it in GitHub Desktop.
This file contains hidden or 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/zsh | |
| # uses imagemagick to stich together all images in a folder and | |
| # then writes a css file with the correct offsets along with a | |
| # test html page for verification that its all good | |
| # Original script is from jaymz | |
| # https://gist.github.com/jaymzcd/342399 | |
| # | |
| # Modifications : | |
| # 1) Customized for zsch with Macports if there is something wonky | |
| # If this does not apply to you, delete the lines under Macports | |
| # and change the shebang to your proper shell | |
| # (something wonky with my setup now) | |
| # 2) Alphabetical order for width and height | |
| ##Macports | |
| macports_folder='/opt/local/bin/' | |
| for file in $macports_folder* | |
| do alias ${file##*/}'='$file | |
| done | |
| ## Actual Script | |
| if [ $# -gt 0 ] | |
| then | |
| if [ $3 ] | |
| then | |
| ext="."$3; # the extension to iterate over for input files | |
| else | |
| ext=".gif"; # the extension to iterate over for input files | |
| fi | |
| name=$1; # output will be placed in a folder named this | |
| if [ $2 ] | |
| then | |
| classname=$2"-sprite"; | |
| else | |
| classname=$1"-sprite"; | |
| fi | |
| css="$name/$classname.css"; | |
| html="$name/test.html"; | |
| rm -fr $name; | |
| mkdir $name; | |
| touch $css $html; | |
| echo "Generating sprite file..."; | |
| convert *$ext -append $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 *$ext | |
| do | |
| height=`identify -format "%[fx:h]" "$file"`; | |
| width=`identify -format "%[fx:w]" "$file"`; | |
| idname=`basename "$file" $ext`; | |
| clean=${idname// /-} | |
| echo ".$classname#$clean {" >> $css; | |
| echo -e "\tbackground-position:0 -${offset}px;" >> $css; | |
| echo -e "\theight: ${height}px;\n}" >> $css; | |
| echo -e "\twidth: ${width}px;" >> $css; | |
| echo -e "<a href=\"#\" class=\"$classname\" id=\"$clean\"></a>\n" >> $html; | |
| let offset+=$height; | |
| 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. ~jaymz"; | |
| else | |
| echo -e "There should be at least 1 argument!\n\tbuildSprite.sh output_folder classname input_extension" | |
| fi |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment