WordPress: Wszystko co powinieneś wiedzieć o przycinaniu obrazków

WordPress 3.9 przynosi nam wiele ciekawych funkcji pod maską. Niesamowitą nowością było wprowadzenie możliwości kontrolowania pozycji kadrowania przesyłanych zdjęć. Otrzymałem ostatnio kilka próśb o pomoc ze zmianą proporcji wyświetlanych obrazków, więc czemu by nie pójść o krok dalej i omówić całego mechanizmu..

Na początek — dodawanie i edycja wymiarów

Domyślnie WordPress tworzy 3 dodatkowe wersje przesyłanego obrazka. Miniaturkę, średni oraz duży rozmiar, w j. angielskim spotkamy się z referencjami “Thumbnail”, “Medium” oraz “Large”. Oryginalnemu zdjęciu przypada referencja “Full”

Konfiguracja domyślnych wartości

Możesz w bardzo prosty sposób zmienić domyślne parametry dla każdej z tych wielkości. Możesz albo udać się do: Kokpit -> Ustawienia -> Media i tam sobie skonfigurować. Możesz też zrobić to poprzez funkcje pluginów lub templatki:

update_option('thumbnail_size_w', 250);
update_option('thumbnail_size_h', 250);
update_option('thumbnail_crop', 1);

Tworzenie dodatkowych rozmiarów

Czasem zachodzi potrzeba utworzenia dodatkowych zestawów rozmiarów. Są one bardzo przydatne gdy w naszym szablonie będziemy chcieli wyświetlać zdjęcia zawsze w tych samych rozmiarach, a po jaką cholerę mamy się męczyć i wrzucać obrazki już przycięte. Tutaj przychodzi funkcja add_image_size. Wygląda ona następująco

add_image_size( $name, $width, $height, $crop );

Przykładowy kod wynikowy

add_image_size( 'moja_miniaturka', 250, 250, true );

Porada: Pamiętaj by nadawać unikalne nazwy dla każdego zestawu ;)

Nowości w 3.9 — zmiana położenia przycinania

Parametr $crop kiedyś był tylko wartością typu boolean (true lub false). Więc wcześniej mogliśmy wybrać czy chcemy przycinanie “miękkie” czy “twarde” (różnica ciut niżej). Od wersji 3.9 możemy użyć tablicy aby sprecyzować położenie obszaru przycięcia. (x i y). Zazwyczaj na środku planu ustawiamy najważniejszą część, więc niech to nam posłuży jako przykład:

add_image_size( 'moja_miniaturka', 250, 250, array( 'center', 'center' ) );

Parametr oczywiście nadal przyjmuje też wartości true/false. Składnia do tablicy jest dokładnie taka sama jak w przypadku pozycji tła w CSS’ie. Tak wiec możemy używać:

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

Co dalej?

Mamy już stworzony jakiś nowy rozmiar obrazka. No dobra, wszystko fajnie, ale bez wiedzy jak go użyć możemy sobie go w d**e wsadzić co najwyżej. Na szczęście mam dobrą, wiadomość — działa to dokładnie tak samo jak w przypadku podstawowych parametrów. Tak więc możemy użyć tego:

the_post_thumbnail( 'moja_miniaturka' );

Lub tego:

wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'moja_miniaturka') );

Różnica polega na tym, że ten pierwszy zwraca cały obrazek, a ten drugi tylko link. Chyba nie muszę tłumaczyć poco nam byłby sam link do obrazka — use Your imagination b**ch.

A co ze starymi obrazkami?

No właśnie, co? Mamy już jakiś czas bloga, zrobiliśmy sobie nowy zajebisty szablon, który wykorzystuje nasze własne typy obrazków, ale się coś pochrzaniło i nie działa tak jakbyśmy chcieli, nowe obrazki działają a stare nie… To dlatego, że obrazki są przycinane w trakcie importu, więc w skrócie będą działały tylko nowe. Zanim jednak wpadniesz w panikę i zaczniesz przerabiać swój szablon bądź kasować i wysyłać na nowo wszystkie media doczytaj do końca, bo jest rozwiązanie Twoich problemów (i nie to nie reklama jakiegoś “super” pasu z mango)…

Tu z pomocą przychodzą nam mądrzy i sprytni ludzie ze społeczności WordPressa którzy ratują resztę naszego jakże fascynującego dnia. Paru z nich wymyśliło takie wtyczki, co pozwala przerobić na nowo wszystkie obrazki z automatu. Ja osobiście korzystam od dłuższego czasu tylko z jednej, bo moim zdaniem jest najprostsza i najskuteczniejsza — tak więc podziękowania dla Alexa za wtyczkę Regenerate Thumbnails, którą serdecznie polecam ;)

Hard or Soft Crop — czyli różnice w sposobie przycinania

Idąc za maksymą “Obraz wyraża więcej niż tysiąc słów” zademonstruję działanie obu z tych metod, z krótkim wyjaśnieniem dla mniej kumatych

Hard Crop

Polega ono na tym, że obrazek jest przycinany (bez dyskusji) do ustalonych przez nas rozmiarów — włączamy tą opcję przez użycie true jako parametr $crop. W tym przypadku poskutkuje to tym, że kotek nie mieści nam się w kadrze. No cóż…

Soft Crop

Tutaj kotek wygląda tak jak powinien, no ale jednak obrazek nie ma wymiarów takich jak sobie wklepaliśmy w funkcjach. A to dlatego, że tzw. miękkie przycinanie nie kadruje nam obrazka a zmniejsza go do rozmiaru pasującego do przez nas ustalonych zachowując proporcje.

Na zakończenie

Przycinanie miękkie i twarde możemy sobie porównać do tła pulpitu lub pozycji tła w CSS’ie. Albo ustawiamy obrazek na wypełnienie, albo na dopasuj, większej filozofii tutaj nie ma ;) Należy pamiętać, że jak wrzucimy za mały obrazek to może się okazać, że nie zostanie on przycięty, bo i z czego.

Zastosowanie

Spotkałem się już kilka razy z prośbą o przycinanie obrazków w popupie do odpowiednich wymiarów hard crop’em. Jaki to ma sens? Nie wiem, ale klient nasz Pan… Generalnie z logicznego punktu widzenie hard crop ma jedno zastosowanie — miniaturki w archiwum (w ogólnym tego pojęcia znaczeniu). Natomiast do popupa użyjemy miękkiego. Dlaczego? By zyskać na szybkości i ponieważ na jaką cholerę mam klikać na powiększenie skoro i tak będę widział pół zdjęcia..

Przydatne linki

https://codex.wordpress.org/Function_Reference/the_post_thumbnail

http://codex.wordpress.org/Function_Reference/add_image_size

https://wordpress.org/plugins/regenerate-thumbnails/

Pozdrawiam i czekam na komentarze ;)