Miniatury i przycinanie zdjęć – wtyczka Post Thumbnails Editor

Dla każdego zdjęcia, jakie dodajemy do strony opartej o WordPressa, generowane są automatycznie trzy miniatury o następujących nazwach: miniatura, średni rozmiar i duży rozmiar. Dzięki temu rozwiązaniu, umieszczając zdjęcie na stronie, możemy wybrać wersję w mniejszej rozdzielczości, przez co strona będzie ładowała się szybciej.

Niestety często okazuje się, że automatycznie generowane miniatury, nie do końca spełniają nasze oczekiwania. Następuje tzw. przycinanie, w wyniku którego, osoby widoczne na zdjęciach tracą głowy, ręce i nogi :) Można jednak temu zaradzić!

Miniatury i przycinanie zdjęć

Rozmiary miniatur można zdefiniować, wybierając z głównego menu Ustawienia->Media. Można tutaj ustawić wysokość i szerokość, a dla miniatury także przycinanie do podanych wymiarów.

Ustawienia rozmiarów obrazków w WordPressie

Zaznaczając opcję przycinania mamy pewność, że każda miniatura będzie dokładnie takiego rozmiaru, jaki zdefiniowaliśmy. Niestety, w przypadku zdjęć, których proporcje odbiegają mocno od proporcji miniatury, może to spowodować np. ścięcie o głowę.
Na czym polega przycinanie miniatur w WordPressie

Z drugiej strony, jeżeli wyłączymy przycinanie, system będzie zachowywał cały obrazek (skalując do pierwszego, krótszego boku), co może jednak zepsuć nam layout strony. Na podstronie z listą ostatnich wpisów, gdzie przy każdym z nich znajduje się zdjęcie (ikona wpisu), wyłączenie przycinania spowoduje, że każde zdjęcie będzie innego rozmiaru, przez co strona będzie wyglądała na chaotyczną.

Co zatem zrobić jeżeli mamy zdjęcia różnych wymiarów i chcemy dodać je do strony? Jeżeli włączymy przycinanie to widoczna na zdjęciu Petra Kvitova straci głowę, jeżeli go nie zaznaczymy, to prawdopodobnie rozleci nam się wygląd strony.

Wtyczka Post Thumbnail Editor

Z pomocą przychodzi wtyczka Post Thumbnail Editor, dzięki której możemy uzyskać pełną kontrolę nad każdą miniaturą, automatycznie generowaną przez WordPressa. Za jej pomocą sam możesz wybrać, który fragment oryginalnego zdjęcia, będzie pojawiał się na stronie.

Po instalacji wtyczki, przechodzimy do biblioteki mediów (Media->Biblioteka). Na liście, przy każdym zdjęciu, pojawiła się nowa opcja o nazwie Thumbnails.

thumbnails_media_wpsamurai_pl

Aby zmienić dowolną miniaturę, na pierwszej zakładce o nazwie Crop, zaznacz na liście interesujący Cię rozmiar. Do dyspozycji są zawsze trzy podstawowe (thumbnail = miniatura, medium = średni rozmiar, large = duży rozmiar). W zależności od ustawień szablonu, lista ta może być rozszerzona o dodatkowe pozycje. Po wybraniu rozmiaru do zmiany, z prawej strony pojawi się podgląd aktualnej wersji (zdjęcie z przyciętą głową).

Post Thumbnail Editor

Teraz na oryginalnym zdjęciu wystarczy zaznaczyć fragment, który chcemy, aby pojawił się na miniaturze. W przypadku miniatur, które zostały zdefiniowane jako przycinane, wtyczka będzie zachowywała odpowiednie proporcje i nie pozwoli nam zaznaczyć obszaru o innych wymiarach.

Gdy już wybraliśmy odpowiedni fragment zdjęcia klikamy na przycisk Crop, znajdujący się pod obrazkiem. Wtyczka dla pewności, pokaże nam jeszcze, jak będzie ostatecznie wyglądała miniatura. Aby zatwierdzić zmiany, klikamy przycisk zapisu.
Post Thumbnail Editor - proponowana zmiana
W ten sposób otrzymaliśmy elegancki podgląd nawet ze zdjęcia, które nie jest proporcjonalne do zdefiniowanych wymiarów miniatury.

Porównanie obu wersji:

Petra Kvitova przed korekcją  Petra Kvitova - miniatura po korekcie

Podsumowanie

Na koniec kilka uwag:

  1. Zmiana miniatury za pomocą wtyczki Post Thumbnails Editor, nie wpłynie na wielkość oryginalnego zdjęcia.
  2. Zmiana wielkości miniatur w menu Ustawienia->Media, nie wpływa na zdjęcia dodane już do strony. Nowe wymiary będą generowane tylko dla nowych zdjęć. Jeżeli chcesz wygenerować nowe wymiary dla zdjęć dodanych wcześniej, możesz skorzystać np. z wtyczki Ajax Thumbnail Rebuild.
  3. Gdy stosujesz wtyczkę Post Thumbnails Editor, pamiętaj aby ponownie nie generować automatycznie wszystkich miniatur (np. za pomocą Ajax Thumbnail Rebuild), bo stracisz wszystkie ręcznie ustawione wersje.
  4. Dodatkowe ustawienia wtyczki Post Thumbnails Editor, można znaleźć wybierając z menu Ustawienia->Post Thumbnail Editor.
  5. Zdjęcie wykorzystane do przykładów pochodzi ze strony petrakvitova.net.

9 Comments Miniatury i przycinanie zdjęć – wtyczka Post Thumbnails Editor

  1. WMB

    Poproszę więcej artykułów dla początkujących i średnio zaawansowanych.
    Fajne tematy i wszystko ciekawie się zapowiada.
    Będę częściej zaglądał.

    Reply
  2. Michał

    Dzień dobry,

    bardzo dobry wpis, ale nie rozwiązuje mojego problemu. Otóż do niedawna miałem motyw, który po dodaniu zdjęcia wpisu poprzez opcję „Ustaw ikonę wpisu”, umieszczał to zdjęcie także we wpisie, jako ilustrujące go. Było to bardzo wygodne, bowiem wpis ze zdjęciem, kiedy się w niego wejdzie wygląda wg mnie atrakcyjniej. Teraz zmieniłem motyw na inny. Mimo, że obsługuje on opcję „Ustaw ikonę wpisu”, to jednak nie wyświetla mi zdjęcia wewnątrz konkretnych wpisów. Jak sobie z tym poradzić? Jest jakaś wtyczka?

    Z góry dziękuję za pomoc.

    Michał

    Reply
    1. Paweł Wawrzyniak

      Cieszę się, że artykuł się podobał:)

      Sama możliwość ustawienia ikony wpisu nie zawsze oznacza, że zdjęcie będzie widoczne na stronie wpisu. Wszystko zależy od tego jak wymyślił to sobie twórca motywu. Aby to sprawdzić zacząłbym od spojrzenia w kod pliku single.php w poszukiwaniu wywołania funkcji the_post_thumbnail.

      Druga możliwość jest taka, że nowy motyw szuka miniatury konkretnego rozmiaru, która nie została wygenerowana podczas używania poprzedniego motywu. Tutaj znowu rozwiązaniem będzie sprawdzenie kodu pliku single.php. W takiej sytuacji możliwe, że pomogłoby przegenerowanie miniatur za pomocą wtyczki Ajax Thumbnail Rebuild.

      Reply
  3. Kamil

    Pomocny artykuł jak i cały blog. Pozdrawiam!

    Reply
  4. Kamil

    Zainstalowałem ten plugin, ale mam problem, po zaznaczeniu fragmentu zdjęcia i kliknięciu crop and save dalej jestem w oknie Post Thumbnails Editor a jak je zamknę to wykadrowana fotka nie pojawia się w edytorze wpisu. Mam WordPressa 3.9.

    Reply
  5. Paweł Wawrzyniak

    Po zapisaniu zmian powinna pojawić Ci się lista wszystkich miniatur dla danego obrazka (cały czas na zakładce View/Zobacz).
    Napisałeś, że klikasz w przycisk „Crop and save” pod zdjęciem. Proszę kliknij Opcje pod obrazkiem i spróbuj odznaczyć fifkę „crop and save”. Wówczas przycisk „Crop and save” zamieni się na „Crop/Przycinanie”. Od tej chwili wtyczka powinna pokazywać miniaturę obrazka i możliwość jej zapisu, tak jak to opisywałem.

    Wtyczkę sprawdzałem z WordPressem 3.9 i działa bez problemów (a nawet została przetłumaczona na język polski).

    Reply
  6. ciastek

    Hej,

    Trafiłam na Twój Post poszukując rozwiązania swojego problemu, ale nie wiem do końca czy tu chodzi w moim problemie: Czy wiesz może w jaki sposób ustawić jednakowy rozmiar zdjęć na stronie głównej bloga w WordPress (theme: Simply Read)? – rozmiar do którego miniatura automatycznie przycinałaby się przy każdym wpisie?

    Czy jest do tego jakąś wtyczka?

    Czy trzeba zapisać w jakieś określonej rozdzielczości/rozmiarze zdjęcie przez wrzuceniem?

    Siedzę na tym 2 dzień, bezskutecznie:( Chętnie wyślę adres bloga na PM, bo zdesperowana bardzo już jestem:)

    Z góry dziękuję!

    Reply
    1. Paweł Wawrzyniak

      Z tego co widzę w kodzie motywu, to powinien on przycinać automatycznie obrazki do mniejszych rozmiarów (tworzyć miniatury). Nie wiem do końca w czym masz problem. Chcesz, aby te obrazki miały inne wymiary?

      Reply
  7. SpeX

    Jestem ciekaw, czy autorzy wtyczek do re-generowania miniatur, mogą jakoś omijać miniatury wygenerowane przez tą wtyczkę? W końcu wordpress posiada pełno filtrów itp.

    Reply

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *