Style obrazów w Drupalu. Tworzenie i wykorzystanie stylów.

Style obrazów pozwalają na prostą modyfikację zdjęć. Ogólna zasada działania stylów polega na tym, że możemy stworzyć dowolną liczbę zestawów przekształceń które będą modyfikować nasz obraz.

Przekształceniami mogą być: przeskalowanie, przycięcie, obrót, zmiana kolorów czy obrót.

Aby zwiększyć liczbę dostępnych przekształceń można doinstalować moduł ImageCache Actions, który dostarcza takie przekształcenia jak: możliwość dodania znaku wodnego, przyciemnianie, rozjaśnianie, usuwanie tła, zaokrąglanie narożników i wiele więcej.

Dodanie nowego stylu

Aby dodać nowy styl trzeba przejść do części Konfiguracja -> Style obrazów (admin/config/media/image-styles)

Style obrazów w Drupalu

Aby dodać nowy styl do listy trzeba kliknąć w odnośnik Dodaj styl.

Pierwszą rzeczą jaką należy zrobić po kliknięciu, jaką należy zrobić chcąc dodać nowy styl to podanie jego nazwy.

Style obrazów w Drupalu

Jak widać na powyższym rysunku nazwa stylu jest wymagana (symbolizuje to czerwona gwiazdka) oraz musi składać się z określonych znaków. nazwa musi składać się tylko i wyłącznie ze znaków alfanumerycznych, podkreślenia i łącznika.

Ja nazwałem styl okladka_ksiazki_150x200. Po podaniu nazwy należy kliknąć w przycisk Utwórz nowy styl.

Style obrazów w Drupalu

Po podaniu nazwy i utworzeniu nowego stylu czas na dodawanie przekształceń, które będą modyfikowały obrazy.
Jak wspomniałem wyżej, lista przekształceń nie jest duża. Można ją powiększyć o nowe opcje instalując dodatkowe moduły np. ImageCache Actions.

W podstawowej wersji dostępne są następujące przekształcenia:

  • Przytnij - pozwala na przycięcie obrazu do podanego rozmiaru. Ustawianymi parametrami są szerokość i wysokość (podawane w pikselach) oraz wyrównanie w pionie i poziomie do górnej, dolnej, lewej bądź prawej krawędzi. Możliwe jest też ustawienie centrowania obrazu.

Style obrazów w Drupalu

  • Czarno biały - konwertuje obraz na skalę szarości.
  • Zmiana rozmiaru - umożliwia zmianę rozmiaru obrazka do podanej rozdzielczości bez zachowania proporcji. Ustawianymi parametrami są w tym przypadku szerokość i wysokość (rozdzielczość) podawane w pikselach.

Style obrazów w Drupalu

  • Obróć - pozwala na obracanie obrazka o dowolny kąt. Ustawianymi parametrami są kąt obrotu i kolor tła oraz opcjonalnie kąt losowy. Kąt obrotu określa ilość stopni o jakie zostanie obrócony obraz. Wartość dodatnia kąta oznacza obrót zgodnie z ruchem wskazówek zegara, ujemna w przeciwnym kierunku. Kolor tła określa kolor jaki pojawi się w "odsłoniętych" miejscach obszaru obrazka. Należy podać kolor w formacie heksadecymalnym (#FFFFFF biały, #000000 czarny). Pozostawienie pola pustego spowoduje użycie przezroczystości w formatach, które to wspierają (np. PNG lub GIF). Kąt losowy umożliwia wylosowanie rożnego kąt dla każdego obrazu. Kąt podany w polu tekstowym Kąt będzie użyty jako maksymalny.

Style obrazów w Drupalu

  • Skala - pozwala na skalowanie obrazka do podanej rozdzielczości przy zachowaniu proporcji. Ustawianymi parametrami są szerokość i wysokość podawane w pikselach oraz opcja zezwalająca na powiększanie rozmiaru.

Style obrazów w Drupalu

  • Skalowanie i przycinanie - pozwala na skalowanie obrazka do podanej rozdzielczości przy zachowaniu proporcji a następnie przycina go. Ustawianymi parametrami są szerokość i wysokość podawane w pikselach.

Style obrazów w Drupalu

Z powyższych działań wybieram skalowanie. Dzięki temu każdy obrazek będzie skalowany do podanej rozdzielczości, w moim przypadku 150x200pikseli z zachowaniem proporcji.

Style obrazów w Drupalu

Bardzo ciekawą i przydatną funkcjonalnością jest podgląd na żywo na przykładowy obrazek który odzwierciedla wygląd po zastosowaniu na nim utworzonych przekształceń.
Dla czego na powyższym obrazie przykładowy rysunek (po prawej) ma rozdzielczość 150x113 przy zastosowaniu na nim akcji skalowania (z zachowaniem proporcji) do rozdzielczości 150x200 pozostawiam do samodzielnego obadania.

Usuwanie i edycja stylów

Zakładka Style obrazów zawiera zestawione w postaci tabeli dostępne style.
Obok nazwy każdego ze stylów dostępne są opcje edycji i nazwy. Przeznaczenia nie trzeba chyba tłumaczyć.

Wykorzystanie stylów