Toolbox for Beaver Builder

Useful Timber, Twig Functions and Filters

Timber has a few tricks up its sleeve that can make your life much easier. This page is meant as a collection of useful manipulations that you can built on.

TimberImage

Perhaps one of the easiest ways to manipulate an image:

<img src="{{TimberImage(post.thumbnail).src('medium')}}">

Display the featured image (fi) of size medium if available

<img src="{{TimberImage(post.thumbnail).src('medium')|resize(300,200, 'center')}}">

Display the fi of size medium, resize to 300x200 and from center if ratio is off.
Alternatives on third parameter are: 'default', 'center', 'top', 'bottom', 'left', 'right', 'top-center', 'bottom-center'.

<img src="{{TimberImage(post.thumbnail).src('medium')|letterbox( 300,300, '#ffffff')}}">

Display the fi image of size medium, resize it to fit proportionally to a box of dimensions 300x300pixels, use #ffffff as background color for remaining pixels.

<img src="{{TimberImage(post.thumbnail).src('medium')|resize(300)}}">

Display the fi image of size medium, resize proportionally and use max width 300 pixels.

<img src="{{TimberImage(post.thumbnail).src('medium')|resize(0,300)}}">

Display the fi image of size medium, resize proportionally and use max height 300 pixels.

 
Last modified: December 21st, 2018