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 build 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.

 

Post()

Working with relationships fields or getting data from another post ID can be frustrating, but not with Timber:

{% set postids = [22,45,67] %}
{% for item in postids %}
  {% set item = Post(item) %}
  <img src="{{item.thumbnail.src('thumbnail')}}" alt="{{item.thumbnail.alt}}">
  <a href="{{item.link}}"><h4>{{post.title}}</h4></a>
{% endfor %}

Is all it takes to get the thumbnail, link and title on an array of postid's.

set

Used to create a (temporary) variable. You can use it to store a portion of an array for a more a readable template, or to store extra data.

{% set thumb_url = TimberImage(45).src('thumbnail') %}
<img src="{{ thumb_url }}">

attribute

The attribute function can be used to access a "dynamic" attribute of a variable.

This might be useful if you want to use a macro multiple times, but each time getting a different custom field on a post:

{% macro custom_format_heading( global , fieldname ) %}
  <h2>{{ attribute(global.post,fieldname)|capitalize }}</h2>
  <hr style="margin-bottom:20px;">
{% endmacro %}
{% import _self as macros %}
{{macros.custom_format_heading(_context, 'companyname')}}
{{macros.custom_format_heading(_context, 'companyaddress')}}

Would allow us to restyle the way the content of the CF's 'companyname' and 'companyaddress' is rendered from one single macro, allowing us to change it across the entire site in one go.

[ error handling twig template ] Template "beaverplugins_samesection.twig" is not defined in "__string_template__2c572f4a6f2901ac0bdd601f3aa8ca34dc8cd00c4b4729bae566e614f285eecd" at line 1.
Last modified: July 1st, 2019