A probléma Designer véna híján kitaláljuk, hogy csinálunk egy darab szép nagy image-et, amiből mondjuk középre rendezve n féle méretet kellene legyártani, hogy a webalkalmazásunk mindenféle iOS eszközt kiszolgáljon ikonnal, illetve startup screen grafikával.
A megoldás
Először is előkotrunk a neten egy HOWTO-t, ami elmagyarázza, hogy mi is kell mindehhez webalkalmazásunk HTML head szekciójába:<!-- iOS webapp icons --> <link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" /> <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png"> <!-- iOS webapp startup images --> <!-- iPhone --> <link rel="apple-touch-startup-image" media="(device-width: 320px)" href="/startup.png"> <!-- iPhone (Retina) --> <link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x920.png"> <!-- iPad (portrait) --> <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="apple-touch-startup-image-768x1004.png"> <!-- iPad (landscape) --> <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="apple-touch-startup-image-748x1024.png"> <!-- iPad (Retina, portrait) --> <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-1536x2008.png"> <!-- iPad (Retina, landscape) --> <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-1496x2048.png">
mkdir ~/bin cd ~/bin tar xzvf ~/Downloads/ImageMagick-x86_64-apple-darwin11.3.0.tar.gz ln -s ~/bin/ImageMagick-6.7.5 ~/bin/ImageMagick
# <imageMagick> export MAGICK_HOME="$HOME/ImageMagick" export PATH="$MAGICK_HOME/bin:$PATH" export DYLD_LIBRARY_PATH="$MAGICK_HOME/lib/" # </imageMagick>
source ~/.bash_profile
#!/bin/sh # createiOSWebappImages.sh by fns@fns.hu # created 2012.06.03 # lmdate 2012.06.03 function createImages() { ext=".png" # default source & target extension args=( "$@" ) # all the paameters in an array ac=${#args[@]} # parameter array length p=${args[0]} # basePath: 1st parameter bf=$p/${args[1]}$ext # baseFile: 2nd parameter f=${args[2]} # iconFile: 3rd parameter for (( i=3; i<$ac; i++ )) # first 3 parameters were not the member of our resizer array so start from 3rd one do str=${args[$i]} #get array element len=${#str} #get length of string xpos=`echo "$str" | sed -n "s/[x].*//p" | wc -c` # get "x" pos within string w=${str:0:(xpos-1)} #substr h=${str:(xpos):(len-xpos)} #substr f2="$p/$f$str".png echo "Resizing image; source = $bf new_size = $str target = $f2" convert $bf -resize $str -gravity center -extent $str $f2 done } # createImages() basePath="." # location of source & target files baseFile="ios-webapp-baseimage" # source file iconFile="apple-touch-icon" # target file prefix iconSizes=( 57x57 72x72 114x114 144x144 ) # target file sizes in an array startupFile="apple-touch-startup-image" # target file prefix startupSizes=( 320x460 640x920 768x1004 768x1024 1536x2008 1496x2048 ) # target file sizes in an array createImages $basePath $baseFile $iconFile "${iconSizes[@]}" createImages $basePath $baseFile $startupFile "${startupSizes[@]}"
miért nem automator workflow lett akár preview-val vagy mondjuk pixelmator pingáló alkalmazással?
OK, kimaradt a multiplatform kulcsszó.
Btw kíváncsi lennék ugyanerre Automatorral: loop mintha lenne benne, de nem tudom, hogy kezelne az tömböket.
Kiváncsi kérdés: Miért kell ide array?
Anélkül egyszerűbb…
Úgy állt kézre.