Optymalne zarządzanie różnymi wymiarami zdjęć przy budowie szablonu w WordPressie
Obecnie panuje „moda” na publikowanie jak największej liczby fotografii na stronach internetowych. Blogi, a właściwie ich layouty powoli zamieniają się w wielkie katalogi zdjęć. To rozwiązanie jednym się podoba innym trochę mniej, ale najbardziej kluczowym elementem jest fakt wzrostu wagi danej podstrony.
Fot: kpgolfpro, CC0 Public Domain.
Zdjęcia muszą zajmować trochę miejsca (a zwłaszcza te w dużych rozdzielczościach) co powoduje częstą frustrację kiedy strona WWW ładuje się zbyt długo. Jeżeli w witrynie internetowej wykorzystujemy fotografie o tej samej wielkości, a na stronie są one pomniejszane na przykład za pośrednictwem stylów CSS (height, width) to tutaj powinna zapalić nam się czerwona lampka. Takie rozwiązanie jest jednym z najgorszych! Powoduje to olbrzymi wzrost wagi strony WWW oraz czas w jakim się ładuje. Tego typu działanie ma realny wpływ na negatywny odbiór przez internautę danego portalu internetowego. W dzisiejszych czasach wymogiem staje się stosowanie skompresowanych fotografii oraz użycie przeróżnych skryptów do przyspieszenia wczytywania strony internetowej (np. lazy load – wczytywanie obrazków przez AJAX, kiedy ten stanie się widoczny dla internauty). Absolutnym minimum jest używanie fotografii w wymiarach takich w jakich jest ona publikowana na stronie. Inaczej mówiąc, jeśli potrzebujemy wrzucić gdzieś obrazek o wymiarach 100x100px to umieszczamy tam zdjęcie, które fizycznie ma takie wymiary, jeżeli potrzebujemy fotografię 1080x720px to również wkładamy tam zdjęcie, które ma fizycznie takie wymiary.
Różne wymiary zdjęć w motywie WordPressa
Jeśli chodzi o budowę szablonów w WordPressie to tutaj sprawa jest bardzo prosta do rozwiązania. W pliku function.php naszego motywu możemy dodać dowolny rozmiar zdjęć jaki będziemy wykorzystywać bezpośrednio na stronie WWW. Funkcja add_image_size(); powoduje, że przy wyczytywaniu każdego nowego zdjęcia, zostanie utworzone fizycznie nowa kopia fotografii o podanych wymiarach. Obrazek taki, możemy potem użyć w motywie podając zadeklarowaną nazwę dla danego rozmiaru.
Przykład:
Plik function.php:
//Nazwa wymiaru: min_thumbnail, //Rozmiar fizyczny fotografii: 80x40px, //Czy przyciąć obraz do określonej wysokości i szerokości (Hard crop): TAK. add_image_size( 'min_thumbnail', 80, 40, true );
Teraz przy załadowaniu dowolnego zdjęcia, będziemy mieli utworzoną jego dodatkową kopię o wymiarach 80x40. Możemy jej użyć jak każdego normalnego zdjęcia:
Plik index.php:
//Wyświetlenie wcześniej utworzonego specjalnego rozmiaru zdjęcia the_post_thumbnail( 'min_thumbnail' );
I gotowe, mamy wszystko pięknie zoptymalizowane. Tym sposobem, możemy sobie utworzyć dowolną liczbę rozmiarów zdjęć, które będą tworzone przy wgrywaniu fotografii na serwer za pomocą WordPress’a.
Dokumentacja funkcji add_image_size(): www.codex.wordpress.org/Function_Reference/add_image_size.
Co ze zdjęciami już wgranymi?
Opisana wyżej metoda, tworzy nam nowe rozmiary zdjęć przy wgrywaniu danego pliku na serwer, fotografie już wgrane nie są więc modyfikowane. Można to oczywiście w prosty sposób zmienić, za pomocą wtyczki Regenerate Thumbnails. Instalacja tego pluginu jak i jego obsługa jest bardzo prosta.
Należy tylko pamiętać, że zanim uruchomicie modyfikacje już wgranych zdjęć (klikniecie przycisk: „Abort Resizing Images”) musicie załadować na serwer plik function.php z dodanymi nowymi rozmiarami przez funkcję add_image_size() – oczywiście nie kasujecie wcześniej dodanych domyślnych wymiarów dla ikon wpisów itd..
Regenerate Thumbnails: www.wordpress.org/plugins/regenerate-thumbnails.
