publikacja: 13 stycznia 2009, autor: , komentarze 53 https://wpninja.pl/artykuly/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 :).

Dodaj własny komentarz

Odnośniki z innych stron

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ść […]

  4. Miniaturki w WordPress bez Custom Fields | Interaktywni.net

    […] Miniatury w locie czyli phpThumb() w akcji Tagi: miniaturki, timthumbs, WordPress, zdjęcia [+] Share & Bookmark • Twitter […]