publikacja: 13 stycznia 2009, 13:00; autor: Wojciech Usarzewicz http://wpninja.pl/miniatury-w-locie-czyli-phpthumb-w-akcji/

Miniatury w locie czyli phpThumb() w akcji

Miniatury w locie czyli phpThumb() w akcji

W jednym z komentarzy na WPNinja pojawiło się pytanie:

(…) jaki plugin należy zainstalować i skonfigurować lub co należy zrobić - aby posiadać miniaturki graficzne posta (…) - tak jak w przypadku postów na wpninja.pl ?

Otóż miniaturki na naszym serwisie obsługiwane są przez skrypt phpThumb(), który dostępny jest na licencji GPL. Ponieważ jednak jego implementacja może dla zwykłych użytkowników wydawać się skomplikowana, postanowiłem dokładnie opisać całą „filozofię”.

Zanim zaczniemy

Zanim przejdziemy do właściwego kodowania, początkujący użytkownicy WordPressa powinni zaznajomić się z tak zwanymi „Custom Fields”.

Gdy już wiemy, o co chodzi z polami użytkownika, wgrywamy dowolny obrazek na serwer przez uploader WordPressa i przypisujemy go do nowego pola, które na potrzeby tego poradnika nazwiemy po prostu obrazek :).

miniatury-w-locie-czyli-phpthumb-w-akcji-01

Nowe pole użytkownika o nazwie „obrazek”

Dzięki temu zabiegowi będziemy mieli już na serwerze obrazek gotowy do dalszej obróbki.

Instalacja

Ściągnięte archiwum skryptu phpThumb() rozpakowujemy i wszystkie pliki przerzucamy do folderu, który nazwiemy przykładowo miniatury, a który umieścimy w folderze szablonu naszego bloga.

Drzewo Folderów, czyli gdzie wrzucić pliki

Drzewo folderów, czyli gdzie wrzucić pliki

Teraz musimy jeszcze nadać odpowiednie uprawnienia dla zapisu i odczytu folderu cache - 777 - i to już koniec zabawy z folderami. Czas zabrać się za ustawienia konfiguracyjne.

Konfiguracja

W utworzonym folderze miniatury odnajdujemy plik phpThumb.config.php.default i zmieniamy jego nazwę na phpThumb.config.php.

Musimy jeszcze zdecydować jak będziemy określać położenie plików - względnie czy też bezwzględnie. Preferowane wskazywanie ich położenia to właśnie względnie (czyli wskazując położenie pliku względem określonego folderu), jeśli jednak chcemy używać pełnych adresów (łącznie z http://) musimy zmienić w pliku phpThumb.config.php jedną wartość. Jest nią allow_local_http_src, którą to musimy odnaleźć i zamienić na true.

Gdy już to zrobiliśmy, możemy przystąpić do właściwej implementacji systemu.

Integracja z WordPressem

Załóżmy, że chcemy wyświetlić małą miniaturkę na stronie głównej naszego blogu. W tym celu otwieramy plik index.php i w pętli lokalizujemy miejsce, gdzie chcemy wyświetlić nasz obrazek.

Oto ogólny przykład kodu jaki powinien zostać zastosowany:

<img src="<?php bloginfo('template_url'); ?>/miniatury/phpThumb.php?src=<?php echo get_post_meta($post->ID, "obrazek", true); ?>&amp;w=130&amp;h=130&amp;zc=B" alt="" />

Parametr src przy znaczniku img każdy zna - wskazuje on na plik phpThumb.php który odpowiada za cały „front end”, czyli wynik wszystkich obliczeń wykonywanych przez skrypt. Dla pliku tego zaś istnieje kilka (kilkadziesiąt, ale to już bardziej zaawansowane) parametrów:

  • src - adres obrazka, który chcemy wyświetlić. Jest on podawany za pomocą pola użytkownika „obrazek” poprzez specjalną funkcję: 
    <?php echo get_post_meta($post->ID, "obrazek", true); ?>
  • w - szerokość obrazka podawana w pikselach,
  • h - wysokość obrazka podawana w pikselach,
  • zc- sposób przycięcia obrazka w przypadku gdyby okazało się, że tworzona miniaturka i oryginalny obraz były nieproporcjonalne względem siebie (szczegóły w instrukcji).

Z powyższego przykładu wynika więc, że nasz obrazek będzie kwadratem o boku 130 pikseli przyciętym w razie konieczności od dołu.

Należy tutaj pamiętać o odpowiednim zapisie ciągu parametrów w języku PHP, mianowicie:

Po odwołaniu do pliku i chęci wstawienia parametru, nazwę pliku od określonego parametru oddzielamy znakiem zapytania ?, a wartość parametru wpisywana jest po znaku równości =. Kolejne parametry muszą już być oddzielane „ampem”, czyli znakiem &, który w języku angielskim określany jest jako „i” :).

Miniatury - przed i po

Miniatury - przed i po

I voila, bowiem to już koniec - nasz obrazek zostanie przez skrypt zmniejszony bądź powiększony, a następnie „scachowany” do odpowiedniego folderu w celu oszczędności serwera.

W folderze docs znajdziemy dodatkowo plik phpthumb.readme.txt, w którym to opisane są wszystkie parametry jakie mogą być użyte przy wyświetlaniu obrazka.

Życzę więc miłego „miniaturkowania” i nie wahajcie się zadawać pytań, jeśli czegoś nie rozumiecie.

Update (14.01.2009)

Grzegorz zwrócił uwagę, iż w przypadku korzystania z pełnych URL’i należy uruchomić skrypt w trybie bezpieczeństwa (w wolnym tłumaczeniu). By to zrobić, musimy w pliku konfiguracyjnym phpThumb.config.php odnaleźć atrybut high_security_enabled i zmienić go na true. Następnie w kolejnej linijce high_security_password podajemy odpowiedni ciąg znaków, który będzie stanowił nasze hasło. Teraz wystarczy już odpowiednio odnieść się do obrazka w pliku szablonu za pomocą funkcji phpThumbURL();. Zmieniamy więc ten kod:

<img src="<?php bloginfo('template_url'); ?>/miniatury/phpThumb.php?src=<?php echo get_post_meta($post->ID, "obrazek", true); ?>&amp;w=130&amp;h=130&amp;zc=B" alt="" />

Na ten:

<?php $image_src = get_post_meta($post->ID, "obrazek", true); ?>
<img src="<?php echo phpThumbURL('src='.$image_src.'&h=130&w=130&zc=B'); ?>" alt="" />

PhpThumb() zajmie się już resztą, pozostaje nam więc tylko załadować plik konfiguracyjny, otwierając plik functions.php w folderze naszego szablonu i wklejając w nim:

require_once(TEMPLATEPATH . '/miniatury/phpThumb.config.php');

Uff, i teraz już wszystko działa jak należy :).

Komentarze (44)

  1. Piotr Sajnog (13 stycznia 2009, 15:15) #:

    Dla zwykłego śmiertelnika (takiego jak ja) korzystanie z Custom Fields nie wydaje się proste. Przykładem jest ten artykuł, gdzie, jak widać, trzeba się znać na składni języka PHP. Przyznaję, że rozwiązanie omówione w artykule jest efektowne i chyba skuszę się na zabawę z tym skryptem najpierw na swoim blogu doświadczalnym :)

  2. ledo (13 stycznia 2009, 15:21) #:

    właśnie coś takiego ostatnio szukałem, nawet udało mi się w sumie w podobny sposób wprowadzić miniaturki, ale Twój sposób wydaje się dużo lepszy, dzięki za post :)

  3. kavillock (13 stycznia 2009, 15:55) #:

    heh ja na swoim blogu zrobiłem miniaturki używając tylko custom fields i niewiem czym sie rózni od twojego

  4. Wojciech N. Usarzewicz (13 stycznia 2009, 16:03) #:

    Tym, że w artykule opisany jest sposób, jak stworzyć dynamiczne miniaturki, tworzone w locie z głównego dużego obrazka, dostosowując do różnych elementów strony - i tak ja na moim SajFaj.pl możesz zobaczyć, na stronie głównej są jedne obrazki, na stronie wpisów inne, a i kategorie mają inne obrazki - oczywiście mówimy tutaj o rozmiarach i cięciach. Nie sztuka wykorzystać Custom Fields do obrazków, ale tutaj chodzi o zarządzanie tymi obrazkami ;)

  5. Szymon Skulimowski (13 stycznia 2009, 17:32) #:

    Warto zaznaczyć, że z identycznej magii korzysta większość skórek premium (czyli płatnych).

  6. Wojciech N. Usarzewicz (13 stycznia 2009, 19:35) #:

    Grzegorzu wybacz, że wykorzystałem swe uprawnienia i usunąłem komentarz, ale naprawienie tego błędu może trochę potrwać (z uwagi na specyfikę mych rozwiązań), toteż póki co zachowajmy usunięty komentarz w tajemnicy :P. Jutro zaś zrobię poprawkę w artykule.

  7. Grzesiek (13 stycznia 2009, 19:17) #:

    wszystko fajnie ale jest jedno male ALE - nie wspomniales, ze phpThumb() powinien byc uzywany w trybie high_security :) w domyslnym configu (a taki niestety masz na sajfaj.pl) kazdy moze sobie skorzystac z mocy obliczeniowej Twojego serwera i resizowac swoje obrazki u Ciebie np:

    http://sajfaj.pl/wp-content/themes/SciFi4/thumbs/phpThumb.php?src=http://i1.kminek.pl/2008/11/145_okragle_rogi_css_200x250.png&h=20&w=20&zc=1&q=200

    BTW. stary layout sajfaj.pl podobal mi sie bardziej, nowy jest zbyt mocno ‘inspirowany’ Envato (Nettuts, Psdtuts and so on)

  8. Zen Vantalye (13 stycznia 2009, 20:28) #:

    Warto by sprawdzać czy podaje się obrazek w Custom Fields żeby nie mieć obowiązku umieszczania obrazka.

  9. Zacol (13 stycznia 2009, 21:49) #:

    Funkcja bardzo fajna ale trzeba mieć pomysł na zastosowanie takich miniaturek i ich zaimplementowanie w swoim themie. Nie do każdego szablonu to pasuje, a nie warto tego robić na siłe.

  10. kavillock (14 stycznia 2009, 10:22) #:

    aaa teraz zajarzyłem o co kaman - chociaż u mnie to raczej sie nieprzyda :P

  11. palmiak (14 stycznia 2009, 19:13) #:

    Warto by jednak dopisać ifa sprawdzającego czy custom field nie jest przypadkiem pusty.

    Poza tym fajna rzecz muszę przyznać.

  12. Damian (15 stycznia 2009, 1:11) #:

    Świetna rzecz, kiedyś się przyda z pewnością.

  13. ferus (16 stycznia 2009, 23:29) #:

    Cześć!
    Dzięki za artykuł, na pewno się przyda.
    Chwilowo korzystalem z custom fields dodajac recznie obrazek na ftp, ale teraz będę mógł to robić pare razy szybciej.
    Dzięki wielkie.

  14. Jacek Krużycki (21 stycznia 2009, 1:29) #:

    A ja używam WP Post Thumbnail i sobię chwalę :) bo mogę samemu cropować obrazki :)

  15. Wojciech N. Usarzewicz (21 stycznia 2009, 8:42) #:

    No tak, tylko zmienisz layout i się nagle okaże, że cropnięcia są niedopasowane do nowej wersji :)

  16. Jacek Krużycki (21 stycznia 2009, 11:27) #:

    Nie jest tak źle. Masz możliwość zrobienia 3 (albo więcej - wystarczy je dodać) „szablonów” wymiarowych :)

  17. Kret44 (4 marca 2009, 1:28) #:

    Ustawiłem wszystko wg opisu, nie działa mi jednak funkcja wyboru przycinania obrazka, bez względu na to jaki parametr bym nie wprowadził zawsze przycina mi od środka. Gdzie tkwi błąd?

  18. Szymon Skulimowski (22 kwietnia 2009, 17:46) #:

    @Grzesiek,
    Wiesz może jak zamienić w Twojej poprawionej wersji znaki & na &amp; (w ścieżce do phpThumba)? Jeśli pozostawimy & to walidatory W3C zwariują :-).

    Aktualizacja komentarza: Odpowiedź Grzegorza:
    trzeba troche zmodyfikowac funkcje:

    function phpThumbURL($ParameterString) {
$ParameterStringWithAmp = str_replace('&', '&amp;', $ParameterString);
global $PHPTHUMB_CONFIG;
return str_replace(@$PHPTHUMB_CONFIG[
'document_root'], '',
dirname(__FILE__)).DIRECTORY_SEPARATOR.'phpThumb.php?'.$ParameterStringWithAmp.'&amp;hash='.md5($ParameterString.@$PHPTHUMB_CONFIG['high_security_password']);
}

    pozniej jej argumenty podajesz normalnie, bez &amp; - np:

    '<img src="'.phpThumbURL('src=apple.jpg&w=50').'">'
  19. Artur (1 lipca 2009, 18:15) #:

    Mam takie pytanko w jaki sposób wykorzystać phpThumb, z którego często używam przy projektach (dziękuje za pomoc;)). Przy „podobnych postach” ?

  20. Artur (1 lipca 2009, 18:18) #:

    ale po „polskiemu” napisałem, oczywiście chodzi mi o to jak w jaki sposób zrobić, aby podobne wpisy wyświetlane były jako miniatury, a nie jako tekst

  21. Levre (29 lipca 2009, 19:28) #:

    Mam małe pytanie co do jednego zdania.

    „Gdy już wiemy, o co chodzi z polami użytkownika, wgrywamy dowolny obrazek na serwer przez uploader WordPressa i przypisujemy go do nowego pola, ”

    czy dane zdjecie ktore chcemy uploadowac mamy wgrac do folderu wp-content/Themes/Nasz Themes/Miniatury

    i potem w polu użytkownika wstawiamy tylko samą nazwe zdjecia np „miniaturka-1.jpg” ??

  22. Nathan Usarzewicz (29 lipca 2009, 22:23) #:

    @Levre,

    Uploader WP wgra obrazek do folderu podanego w ustawieniach bloga.

  23. Levre (30 lipca 2009, 8:21) #:

    acha czyli musimy zmienic z wp-content tak jak jest docelowo na wp-content/Themes/Nasz Themes/Miniatury

  24. Nathan Usarzewicz (30 lipca 2009, 8:29) #:

    @Levre,

    Nie nie nie, folder uploadu zostawiamy normalnie, po wgraniu obrazka WP generuje link, którego używamy dla custom field.

  25. Levre (30 lipca 2009, 9:07) #:

    aha czli np mamy taki link http://moja-domena.pl/wp-content/uploads/2009/07/zdjecie_1.jpg wtedy ten link dodajemy do custom field zas on kadruje te zdjecie i wgrywa zdjecia do miniatury/cache ??

  26. Levre (30 lipca 2009, 9:10) #:

    tylko jak patrze na ten screen ktory dałes do tego artykułu to jest tam sama nazwa zdjecia bez ścieżki (miniatury-thumbnail.png)

  27. Nathan Usarzewicz (30 lipca 2009, 9:22) #:

    To już zależy od Twojej własnej konfiguracji, w obrazku w artykule jest tylko nazwa pliku, bo tak miałem ustawiony system (obrazki były wgrywane w specifycizny sposób do subdomeny). Poza tym, reszta się zgadza :D

  28. Levre (30 lipca 2009, 10:05) #:

    za chiny mi to nie działa… Postępuje zgodnie z tym co jets napisane i wogole się nic nie wyswietla. Napisze może co robie… moze w tym tkwi bład.
    1. Przechodze do Media/dodaj nowy uploaduje plik (adres mam taki http://test.levre.pl/wp-content/uploads/2009/07/muse_by_biomachina.png)

    2. Dodaje nowy wpis w custom field nazwe daje obrazek a wartosc ten link http://test.levre.pl/wp-content/uploads/2009/07/muse_by_biomachina.png i zapisuje

    3.tworze w folderze mojego themesa folder miniatury a w nim umieszczam wszystkie pliki z paczki phpThumb() na folder cache nadaje CHMODY 777

    4. w pliku index.php w petli dodaje

    ID, „obrazek”, true); ?>
    <img src=”” alt=”” />
    (nie wiem czy w ‘src=’ mam dodac jakis link czy co?

    5.w pliku functions.php dodaje
    require_once(TEMPLATEPATH . ‘/miniatury/phpThumb.config.php’);

    Nie wiem czemu nie działa?

  29. Mercedes (6 sierpnia 2009, 17:43) #:

    Wszystko pięknie tylko co wtedy gdy nie ma żadnego obrazka ? Idzie wtedy jakoś ustawić, żeby skrypt nic nie wstawiał zamiast tego obrazka z błędem, że nie znaleziono pliku ?

  30. Nathan Usarzewicz (6 sierpnia 2009, 17:47) #:

    Trza by zerknąć do dokumentacji phpThumb i popatrzeć, czy jest takie ustawienie, ale jeśli nie ma, to wystarczy zrobić funkcję warunkową, która sprawdzi, czy pole z obrazkiem jest pełne czy puste, a jak puste to niech nie wywołuje funkcji.

  31. Mercedes (6 sierpnia 2009, 18:06) #:

    Właśnie chodzi mi o taką funkcję, jednakże nie wiem jak ją napisać.

  32. Nathan Usarzewicz (6 sierpnia 2009, 18:10) #:

    Poświęcę temu zagadnieniu kolejną część Wu-Pe-Chi Trików :D

  33. Mercedes (6 sierpnia 2009, 18:15) #:

    Ok, czekam z niecierpliwością pozdro ;-)

  34. BlackHat (16 sierpnia 2009, 12:01) #:

    Witam,
    mam problem z rozmieszczeniem tych miniaturek na stronie głównych i innych:
    http://www.wordpress.org.pl/Problem-z-ulozeniem-miniatury-i-reszty-tekstu…-t7841.html

    z góry dzięki za pomoc! :)

  35. Janusz (30 sierpnia 2009, 12:43) #:

    Wszystko jest ok online… ale lokalnie (xampp: php 5.3.) wyskakuje
    „Deprecated: Function eregi() is deprecated in C:\Documents and Settings\M&J Dreams\Pulpit\WWW\new budynie.pl\wordpress\wp-content\themes\budyn\miniatury\phpThumb.php on line 152″

    Czy jest jakaś aktualizacja phpThumb ? ewenutalnie jak zmienić funkcje eregi(), eregi_replace() na funckje preg_match(), preg_replace()… uwzględniajac obecne parametry eregi() eregi_replace() ?

  36. Nathan Usarzewicz (1 września 2009, 8:45) #:

    Aktualizacji należy szukać na oficjalnej stronie phpThumb, jeśli takiej nie ma, należy zatrudnić programistę do przepisania kodu, lub pozostać na starszym PHP (to ostatnie jest łatwe, bowiem większość firm hostingowych nie często aktualizuje bibliotekę php)

  37. krycha (31 stycznia 2010, 16:25) #:

    …może ktoś jest w temacie, jak zrobić „related posts” wraz z miniaturą (thumbnail), ale oparte na ikonach postów wprowadzonych w najnowszym WP?

    jest jakiś dobry plugin do tego?

  38. marsjaninzmarsa (5 lutego 2010, 21:05) #:

    @krzycha: Jeśli wstawiasz podobne posty przez pętlę bezpośrednio w kodzie, to wystarczy że wstawisz odpowiedni kod (przeczytaj dokładnie ten artykuł, to na pewno jakoś wywnioskujesz sama jak to zrobić) bezpośrednio do niej. Jeśli nie, to musisz zacząć, albo wyedytować kod wtyczki… ;)

  39. Koper (24 marca 2010, 15:01) #:

    A co zrobić aby zamiast wpisywania ścieżki w custom fieldzie mieć możliwość wyboru pliku z dysku?(Taki system idioto odporny - gdzie nie trzeba najpierw uploadować a potem wpisywać)

  40. Wojciech Usarzewicz (24 marca 2010, 15:05) #:

    @Koper

    Hmm, trzebaby się chyba rozglądnąć za jakąś wtyczką do zarządzania polami użytkownika, która umożliwi stworzenie takiego pola uploadu.

  41. ryan (24 marca 2010, 15:20) #:

    @Koper - autor http://www.arrastheme.com/ powinien wiedzieć. W jego themie miniaturki pojawiają się od razu. Wystarczy przy dodawaniu zdjęcia dodać „Użyj jako ikony” - choć nie wiem czy akurat ta opcja nie została dodana przy jednej z aktualizacji Wordpressa i Theme Arras po prostu ją wykorzystuje.

  42. uraharu (24 marca 2010, 17:37) #:

    dość ciekawe rozwiązanie, dzięki

  43. Koper (24 marca 2010, 20:28) #:

    To był dobry pomysł Wojtek. Wcześniej szukałem jej pod słowo kluczowe - image a nie custom fields. I znalazłem - całkiem niezły kombajn - Custom Field template. Wszystko niby gra, mam formualrz do uplodowania i nawet pliki są wygrywane ale gorzej z odnoszeniem się do nich. Wywołując nazwę pola w indexie, zwraca mi tylko ID. Znacie jakiś link do grafik z użyciem ID?

  44. Adam (25 lipca 2010, 11:24) #:

    A mogło być tak pięknie. Mój humanistyczny umysł nie ogarnia, choć opis doskonały.
    Pomoże ktoś zaimplementować, pls?

Dodaj własny komentarz

Odnośniki z innych stron (3)

Lista innych stron, które w jakiś sposób odnoszą się do opublikowanej tutaj treści:

  1. Krótkie podsumowanie: styczeń 2009

    […] Miniatury w locie czyli phpThumb() w akcji Opis skryptu tworzącego miniatury skryptu phpThumb() i integracji z WordPressem za pośrednictwem pól użytkownika. […]

  2. Automatyczne miniatury obrazków w WordPress | Notatnik @ TopBlogger

    […] notatnika TopBlogger lub zapisz się na codzienne powiadomienia mailowe.WPninja we wpisie “Miniatury w locie czyli phpThumb() w akcji“głosem Wojciecha N. Usarzewicza proponuje jeden ze sposobów, w jaki można ułatwić sobie […]

  3. „Własne pola” w treści wpisu

    […] pewnością wiesz już czym są i jak stosować je w praktyce. Teraz chciałbym Ci pokazać prosty sposób wyświetlania ich zawartość […]