Pandify - porady jak projektować strony internetowe, darmowe materiały, liczne inspiracje web design.

Timber – 4 rzeczy, za które go pokochałem

Artykuł pojawił się 18.01.2018, autorem jest Maciek Palmowski i wpadł do kategorii WordPress

Pół roku temu dołączyłem Timber do mojego programistycznego arsenału. Poniżej spróbuję pokazać co mnie tak bardzo w nim zauroczyło.

Czym jest Timber?

Zacznijmy od tego czym jest Timber – jest to po prostu implementacja Twiga dla WordPress. Poza samą integracją wpisów, stron oraz custom post types, zawiera też integracje z ACF, WooCommerce, Co-Authors, WPML oraz WP-CLI.

Autor dodał też możliwość własnego routingu, łatwego skalowania zdjęć oraz zupełnie innego generowania menu. Kompletną dokumentację znajdziecie tutaj.

Występuje on jako plugin albo jako biblioteka.

A teraz przejdźmy do konkretów.

Porządek w kodzie

Timber wręcz zmusza do porządku – musimy rozdzielić logikę od wyglądu. Dzięki temu nie będziemy w stanie stworzyć czegoś takiego:

W prawdziwym życiu ten kod byłby pewnie bardziej zagmatwany, zawierał więcej znaczników, a ostatecznie byłby mniej czytelny.

Po instalacji Timbera powyższy przykład będzie wyglądał następująco:
plik archive.php

plik archive.twig

Dzięki Timber jest “czyściej”. Dodatkowo dzięki użyciu Twiga mniej jest bałaganu z nawiasami czy klamrami – świetnie to widać w linijce, która odpowiada za wyświetlenie wpisów.

Integracja z Advanced Custom Fields

Często wspominałem już, że ACF bardzo lubię. Dzięki Timberowi polubiłem ACF jeszcze bardziej. Czemu? Oto kilka przykładów:

W każdym przykładzie kod z użyciem Timbera jest krótszy i bardziej przejrzysty. Poza repeaterami nie trzeba zupełnie pisać get_field / the_field – wystarcza nazwa zmiennej.

Obrazki

Wspominałem już wyżej o obrazkach przy okazji ACF. Jednak przyjrzyjmy się temu tematowi troszkę bardziej, bo Timber sporo tu potrafi.

Co najważniejsze – konwersja w locie:

{{ TimberImage( post.obrazek ).src | resize( 400, 400 ) }}

I tym oto sposobem mamy obrazek o rozmiarach 400px na 400px.

Możemy oczywiście użyć rozmiarów deklarowanych za pomocą `add_image_size`:
{{ TimberImage( post.obrazek ).src( 'medium' ) }}

Moim ulubieńcem jest jednak generowanie srcset:

<img src="{{ TimberImage( post.obrazek ).src | resize( 400, 400 ) }}"
srcset="{{ TimberImage( post.obrazek ).src | resize( 400, 400 ) }} 1x,
{{ TimberImage( post.obrazek ).src | resize( 800, 800 ) }} 2x">

Poza składnią srcset, która sama w sobie powoduje troszkę bałaganu, wszystko jest jasne. Oczywiście można (a nawet należy) pójść o krok dalej i sobie naszykować sobie na bazie tego powtarzalną funkcję.

Polecam też zajrzeć na stronę dokumentacji.

Filtry Twiga

Jednym z największych koszmarów w PHP jest dla mnie moment kiedy muszę jakiś string wielokrotnie obrobić. Dla przykładu, wyobraźmy sobie, że muszę:

  • upewnić się, że nie ma spacji na początku i końcu – trim
  • zamienić spacje na myślniki – str_replace
  • zrobić z tego md5 – md5

I zawsze mam dylemat czy wolę gubić się w ilości nawiasów czy wolę zmarnować kilka linijek:

W Timberze co prawda najpierw będę musiał sobie  przygotować brakujący filtr do Twiga (md5), ale później to już czysta przyjemność:

Podsumowanie

Mam nadzieję, że powyższymi przykładami zainteresowałem niektórych do spróbowania Timbera. Większy ład i mniej powtórzeń powodują, że aż chce się kodować.

A Wy próbowaliście Timbera albo innego systemu templatek (np. Blade)? Jakie są Wasze spostrzeżenia?

Maciek Palmowski

Jestem programistą - hobbystycznie i zawodowo (pracuję w WPMU Dev). Kiedy jednak odejdę od klawiatury jeżdżę na rowerze, biegam albo gram w gry.

Bądź na bieżąco!

Jeżeli chcesz otrzymywać informacje o najnowszych wpisach na blogu Pandify.pl zapisz się do naszego newslettera za pomocą poniższego formularza. Obiecujemy nie wysyłać nic więcej.