Reads directory for image files with @1x substring and creates retina-ready background-image LESS classes using Preboot's .retina-image mixin

backgroundimages.sh

#!/usr/bin/env bash

#
# backgroundimages.sh
#
# Reads directory for image files with @1x substring and
# Creates retina-ready background-image LESS classes using Preboot's .retina-image mixin
#
# Requires ImageMagick
#
# Usage:
#
#  ./backgroundimages.sh [image directory] [optional class prefix]
#
# Script outputs results to stdout. Use pipes to direct to file or clipboard.
#
# Author: Hector Guillermo Parra Alvarez (@hgparra)
# License: MIT (http://opensource.org/licenses/MIT)
# Date: 2013-09-05
#

#
# .retina-image() for those that use LESS but not Preboot (http://getpreboot.com/)
# 
# .retina-image(@file-1x, @file-2x, @width-1x, @height-1x) {
#   background-image: url("@{file-1x}");
#
#   @media
#   only screen and (-webkit-min-device-pixel-ratio: 2),
#   only screen and (   min--moz-device-pixel-ratio: 2),
#   only screen and (     -o-min-device-pixel-ratio: 2/1),
#   only screen and (        min-device-pixel-ratio: 2),
#   only screen and (                min-resolution: 192dpi),
#   only screen and (                min-resolution: 2dppx) {
#     background-image: url("@{file-2x}");
#     background-size: @width-1x @height-1x;
#   }
# }
#

filepath=$1
classname_prefix=$2

for file in $filepath/*; do
	
	filename=$(basename "$file")

	# only process image files with '@1x' extension prefix
	if [[ $filename =~ [^\s]+@1x\.(png|jpg|jpeg|gif)$ ]]; then

		# remove @1x and extension
		classname=$(echo $filename | sed -e 's/@1x\.\([a-zA-Z]\{3,4\}\)//')

		# get image dimensions via imagemagick
		dim=$(identify -format "%Wpx, %Hpx" $file)
		width=${dim%%,*}
		height=${dim##*, }

		# full image file for 2x
		file_2x=$(echo $file | sed -e 's/@1x\./@2x\./')

		# LESS output
		# FIXME: echo results in an extra space per line after first
		code="//\n
		// ${classname}\n
		//\n\n
		.${classname_prefix}${classname} {\n
			\t.retina-image(\"${file}\", \"${file_2x}\", ${dim});\n
			\twidth: ${width};\n
			\theight: ${height};\n
		}\n"

		echo -e $code
	fi
done