Responsive sprites (relative positions using percentages)

[hllorens]

Thanks for this nice tool.

It would be great if you extend it with an option to use relative positioning. Here is the bash code I use to post process your output (NOTE: this version is only for vertical sprites, but supporting horizontal ones should be straightforward):

#!/bin/bash

IFS='
';
tech_re="^\(vertical\|horizontal\)-\(background\|imgspacer\)\$";

if [ $# -ne 2 -o `echo $2 | grep -c $tech_re` -le 0 ];then
    echo "ERROR: Two parameters required. CSS-file and Orientation-Technique."; 
    echo -e "\tCSS-file with absolute positions in background-position"; 
    echo -e "\tOrientation-Technique: $tech_re"; 
    exit -1;
fi

numimages=`grep -c "background-position" $1`;
orientation_technique=$2;
orientation=`echo $technique | cut -f 1 -d"-"`;
technique=`echo $technique | cut -f 1 -d"-"`;
numincrements=$((numimages-1));
percentage=`bc <<< "scale=4; 100/$numincrements"`;
count=0;
for line in `cat $1`;do
    if [[ $line =~ .*background-position.* ]];then
        echo "$count>> $line" >&2;
        curr_rel_percentage=`bc <<< "scale=4; $count*$percentage"`;
        if [[ $count -eq 0 ]];then
            echo -e "\tbackground-position: 0% 0%;";
        else
            #echo -e "\tbackground-position: 0% -${count}00%;"; for imgspacer
            echo -e "\tbackground-position: 0% $curr_rel_percentage%;";
        fi
        count=$((count+1));
    else
        echo "$line";
    fi
done

Let me know if I can help.

Cheers. Hector

[aslansky]

Hey @hllorens could you please have a look at sprity's how to write style processors and see if all values you would need to do that with a style processor are available? If so you could it is probably easier to write one for you then it was writing the bash script ;-)

[hllorens]

Hey @aslansky. The code is quite cryptic to me. What I want to modify is background position (as you can see above). Could you show me a very simple example for me to understand? e.g., imagine I want just add 1 to each Y value.

If I can understand how to do that, I will probably be able to do the rest.

This responsive alternative is quite useful (note that most websites are migrating to more responsive alternatives), maybe it could be added as another style processor in sprity. What do you think?

Next question will post it in sprity.

Thanks in advance for your help Hector

[hllorens]

I have moved this to sprity. Closing...