Alfred i generowanie linków dla WordPressa

Maciej Skrzypczak

1

Dodane: 10 lat temu

Największą siłę takich aplikacji jak Alfred czy Keyboard Maestro stanowi fakt, że można (a nawet trzeba) dostosować je pod własne potrzeby. Dlatego prezentowane przeze mnie workflows powstały lub służą dla mojego użytku. Tak jest również z dzisiejszym.

Część z Was z pewnością prowadzi własne blogi. Jedną z najpopularniejszych platform do tego jest WordPress. iMagazine również jest na niej oparty. Dlatego tworząc swoje wpisy, staram się dążyć do tego, żeby od strony technicznej zajmowały mi jak najmniej czasu. Jedno z takich usprawnień zastosowałem w dziedzinie wstawianych obrazków.

Tradycyjna metoda dodawania obrazów polega na wrzuceniu ich na serwer (korzystając z wbudowanego narzędzia do tego celu), odnalezienie wrzuconego zdjęcia, skonfigurowanie opcji jego dotyczących (np. usunięcie tekstu z pola opisu, domyślnie jest tam nazwa pliku) i wstawienie do tekstu (oczywiście należy pamiętać o wcześniejszym ustawieniu kursora, inaczej odnośnik zostanie wstawiony nie wiadomo gdzie).

Moje rozwiązanie jest następujące: jeszcze zanim zdjęcia zostaną wrzucone na serwer, biorę każde i aktywuję na nim workflow, który wyciąga z niego przystosowane do wpisów rozmiary, a następnie wszystko skleca w postać kodu HTML, który wklejam do Byword, gdzie tworzę swoje wpisy. Ponieważ mam również makro w Keyboard Maestro (o którym też pewnie kiedyś napiszę), które tworzy odpowiednie miniatury zdjęć i wrzuca je na serwer automatycznie, pomijając edytor wpisów w panelu administracyjnym WordPressa strony iMagazine, mogę publikować teksty bezpośrednio z Byword.

Ale już starczy tej teorii, czas na praktykę. Opisywany przeze mnie workflow sprowadza się do następującego skryptu Shell:

QUERY="{query}"
WIDTH="620"
RWIDTH=$(echo "$WIDTH * 2" | bc)

picWidth=$(echo $(sips -g pixelWidth "$QUERY" | awk '{print $2}'))
picHeight=$(echo $(sips -g pixelHeight "$QUERY" | awk '{print $2}'))
DPI=$(sips -g dpiHeight "$QUERY" | awk '{print $2}' | sed 's/.000//g')

filename=$(basename "$QUERY")
dirpath=$(dirname "$QUERY")

cd "$dirpath"

name=${filename%.*}
name=${name// /_}
ext=${filename##*.}

mv "$filename" $name.$ext

YEAR=$(date +"%Y")
MONTH=$(date +"%m")

if (( $picWidth == 640 && $picHeight == 1136 )); then
    echo -n '<a href="http://linkstrony/'$YEAR'/'$MONTH'/'$name'.'$ext'"><img class="aligncenter size-large" src="http://linkstrony/'$YEAR'/'$MONTH'/'$name'-320x568.'$ext'" alt="" width="320" height="568" /></a>'
elif (( $picWidth == 1136 && $picHeight == 640 )); then
    echo -n '<a href="http://linkstrony/'$YEAR'/'$MONTH'/'$name'.'$ext'"><img class="aligncenter size-large" src="http://linkstrony/'$YEAR'/'$MONTH'/'$name'-568x320.'$ext'" alt="" width="568" height="320" /></a>'
elif (( $DPI == 144 && $picWidth < $RWIDTH )); then
    WIDTH=$(echo "scale=0;$picWidth/2" | bc)
    HEIGHT=$(echo "scale=0;$picHeight/2" | bc)
    echo -n '<a href="http://linkstrony/'$YEAR'/'$MONTH'/'$name'.'$ext'"><img class="aligncenter size-large" src="http://linkstrony/'$YEAR'/'$MONTH'/'$name'-'$WIDTH'x'$HEIGHT'.'$ext'" alt="" width="'$WIDTH'" height="'$HEIGHT'" /></a>'
elif (( $picWidth >= $WIDTH )); then
    HEIGHT=$(echo "scale=0;($WIDTH*$picHeight)/$picWidth" | bc)
    echo -n '<a href="http://linkstrony/'$YEAR'/'$MONTH'/'$name'.'$ext'"><img class="aligncenter size-large" src="http://linkstrony/'$YEAR'/'$MONTH'/'$name'-'$WIDTH'x'$HEIGHT'.'$ext'" alt="" width="'$WIDTH'" height="'$HEIGHT'" /></a>'
else
    echo -n '<a href="http://linkstrony/'$YEAR'/'$MONTH'/'$name'.'$ext'"><img class="aligncenter size-large" src="http://linkstrony/'$YEAR'/'$MONTH'/'$name'.'$ext'" alt="" width="'$picWidth'" height="'$picHeight'" /></a>'
fi

Zainteresowanych zapraszam do wyjaśnień kodu:

• QUERY="{query}" – zaznaczenie w Finderze jest zapisywane w Alfredzie jako zmienna {query}. Przypisujemy ją pod zmienną skryptu $QUERY.
• WIDTH="620" i RWIDTH=$(echo "$WIDTH * 2" | bc) – do zmiennej $WIDTH przypisałem maksymalną szerokość wyświetlanego zdjęcia we wpisie – czyli 620 pikseli. Dodatkowa zmienna $RWIDTH przechowuje liczbę dwa razy większą – do zastosowania w przypadku zrzutów ekranu pochodzących z MacBooków z ekranem typu Retina.
• picWidth …, picHeight … oraz DPI … – korzystając z systemowego narzędzia sips pobieram szerokość, wysokość oraz DPI wskazanego obrazu przypisując te wartości pod odpowiednie zmienne.
• filename=$(basename "$QUERY") oraz dirpath=$(dirname "$QUERY") – zmienną $QUERY rozbijam na dwa elementy – plik ($filename) oraz ścieżkę do folderu, w którym znajduje się ten plik ($dirpath).
• cd "$dirpath" – ustawiam ścieżkę działania skryptu na katalog zawierający zdjęcie – $dirpath.
• name=${filename%.*} oraz ext=${filename##*.} – z pliku $filename wyodrębniamy jego nazwę ($name) i rozszerzenie ($ext).
• name=${name// /_} – jeśli nazwa pliku zawiera spacje, ta linijka kodu zamieni je w podkreślniki.
• mv "$filename" $name.$ext – zmiana nazwy, która ma zauważalny efekt tylko wtedy, gdy plik w starej nazwie posiadał spacje.
• YEAR=$(date +"%Y") oraz MONTH=$(date +"%m") – za pomocą systemowego narzędzia date ustawiam dwie zmienne pobierające odpowiednio rok ($YEAR) i miesiąc ($MONTH) w formie liczbowej (np. listopad zapisany jako 11). Jest to potrzebne do utworzenia prawidłowego linku, pod którym będą się znajdować pliki po wrzuceniu na serwer.

Tu się na chwilę zatrzymamy. Na stronie iMagazine działa skrypt, który wykrywa rozdzielczość ekranu i na tej podstawie jako podgląd serwuje obrazy w zwykłej rozdzielczości lub w retinie (jeśli takie są dostępne). Zdjęcia większe niż maksymalna szerokość ($WIDTH) muszą więc być zmniejszone. Tu pojawia się problem. Weźmy na przykład zrzut ekranu iPhone’a 5 (bo takiego właśnie posiadam). Jego rozdzielczość to 640×1136 pikseli jest więc szerszy tylko o 20 pikseli od wartości maksymalnej. Proporcjonalne zmniejszenie do 620 pikseli i wstawienie takiego obrazu do wpisu sprawi, że zrzut będzie wyglądać nienaturalnie duży. W związku z tym, jeśli jakiś zrzut ma ppi o wartości 144 (czyli retinowej), to w takim wypadku maksymalna szerokość wynosi 1240 pikseli. Jednak link wstawiony do wpisu musi odnosić się do pliku nie-retinowego, więc retinowy obrazek trzeba traktować, jakby nim nie był, jego rozmiary należy pomniejszyć dwa razy. Trochę zawile to brzmi, ale w rzeczywistości nie jest tak źle. ;) Wracając do przykładu zrzutu iPhone’a, powinien być zmniejszony do rozmiarów 320×568 pikseli, żeby we wpisie był naturalnej wielkości. Zresztą ze zrzutami z iPhone’ów jest dziwna sprawa, ponieważ nie są zapisywane z ppi wynoszącym 144 a 72. Dlatego też dalsza część nieomówionego kodu musiała być rozbita na parę wyjątków:

• if (( $picWidth == 640 && $picHeight == 1136 )) … oraz elif (( $picWidth == 1136 && $picHeight == 640 )) … – w przypadku, jeśli mam do czynienia ze zrzutami z mojego iPhone’a.
• elif (( $DPI == 144 && $picWidth < $RWIDTH )) … – w przypadku jeśli zrzut ekranu jest retinowy (ustalone na podstawie wartości ppi wynoszącej 144), ale jego szerokość jest mniejsza niż maksymalna dopuszczalna ($RWIDTH). W takim przypadku następują dwie operacje: WIDTH=$(echo "scale=0;$picWidth/2" | bc) oraz HEIGHT=$(echo "scale=0;$picHeight/2" | bc) – które zmniejszają wartości rozmiaru o połowę przy pomocy systemowego narzędzia bc.
• elif (( $picWidth >= $WIDTH )) … – w przypadku, gdy szerokość przekracza maksymalną dozwoloną¹. Wtedy też musimy obliczyć, jaka będzie wysokość obrazka po jego zmniejszeniu przy pomocy tej linijki – HEIGHT=$(echo "scale=0;($WIDTH*$picHeight)/$picWidth" | bc)
• else … – w przypadku, gdy nie zostały spełnione żadne z powyższych warunków, czyli de facto wtedy, gdy jakiś obrazek nie jest retinowy i jego szerokość jest mniejsza od maksymalnej.

W zależności od tego, pod który warunek będzie pasował dany plik, wygenerowany zostanie kod HTML wyświetlający obrazek, który jednocześnie będzie klikalnym linkiem przekierowującym do oryginalnego pliku. Schemat takiego kodu (wywoływanego komendą echo, żeby mógł być przekazany dalej do elementu kopiującego go do schowka systemowego) przedstawia się następująco:

<a href="http://linkstrony/ROK/MIESIAC/nazwapliku.rozszerzenie"><img class="aligncenter size-large" src="http://linkstrony/ROK/MIESIAC/nazwapliku-SZEROKOSCxWYSOKOSC.rozszerzenie" alt="" width="SZEROKOSC" height="WYSOKOSC" /></a>

Następnie pozostaje tylko wkleić kod w odpowiednie miejsce we wpisie.

Jeśli chcielibyście podejrzeć sam workflow, poniżej możecie znaleźć odnośnik do jego pobrania.

Nazwa: Pobierz rozmiary
Pobieranie: link

Wszystkie artykuły z serii poświęconej workflows do Alfreda^* możecie znaleźć pod tym linkiem.

^*Do prawidłowego działania workflows wymagany jest Alfred 2 z wykupioną licencją Powerpack.

Maciej Skrzypczak

Użytkownik sprzętu z nadgryzionym jabłkiem, grafik komputerowy, Redaktor iMagazine.pl. Mastodon: mcskrzypczak@c.im