Timber

Insights

Development insights, client advice and news from Go Tripod

As developers, we have a seemingly endless supply of tools at our disposal thanks to the hard work and generosity of the wider development community who, by and large, share their hard work in the hope of making their peers&#8217; lives that little bit easier.
At Go Tripod we&#8217;re always on the lookout for new ways to streamline our processes and improve the quality of our work. Task runners are a great example of this.
Utilising JavaScript, programs like <a href="https://gulpjs.com/" target="_blank" rel="noopener">Gulp</a> and <a href="https://gruntjs.com/" target="_blank" rel="noopener">Grunt</a> can automate all kinds of labour-intensive tasks including, for example:
<ul>
<li>compiling, concatenating and compressing assets (eg. images, <abbr data-tooltip="Cascading Style Sheets">CSS</abbr>, <abbr data-tooltip="JavaScript">JS</abbr>)</li>
<li>live browser reloading for speedy development and testing</li>
<li>auto-prefixing for optimal browser support</li>
</ul>
With these jobs running automatically in the background we&#8217;re able to focus entirely on the task at hand. This increases productivity and makes sure the code we&#8217;re writing is as performant and compatible as it can be.
Our current build tool of choice is a modified version of the excellent <a href="https://github.com/ahmadawais/WPGulp" target="_blank" rel="noopener">WPGulp</a> by WordPress aficionado, <a href="https://ahmadawais.com/" target="_blank" rel="noopener">Ahmad Awais</a>. It does most of the things we need out of the box but since we use <a href="https://www.upstatement.com/timber/" target="_blank" rel="noopener">Timber</a> to separate logic from styling I&#8217;ve amended it to watch <code>.twig</code> files as well as <code>.php</code> files.
<div id="attachment_434" style="width: 640px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-434" decoding="async" loading="lazy" class="size-full wp-image-434" src="https://content.gotripod.com/images/2018/07/Screen-Shot-2018-07-17-at-09.29.26.png" alt="" width="630" height="411" srcset="https://content.gotripod.com/wp-content/uploads/2018/07/Screen-Shot-2018-07-17-at-09.29.26.png 630w, https://content.gotripod.com/wp-content/uploads/2018/07/Screen-Shot-2018-07-17-at-09.29.26-300x196.png 300w" sizes="(max-width: 630px) 100vw, 630px" />WPGulp compressing assets and watching for changes</div>
Along with a few other minor adjustments, the result is a fast and feature-packed workflow which allows us to build WordPress sites of the highest quality in record time. 💪

The best Gulp build tool for WordPress

<a href="https://www.upstatement.com/timber/" target="_blank" rel="noopener">Timber</a> has loads of useful filters built in which can make all kinds of jobs much easier. One of those jobs is resizing and cropping images, for which we can use the resize filter. The syntax is simple, as with all things <a href="https://twig.symfony.com/" target="_blank" rel="noopener">Twig</a> &#8211; we simply add the filter to our image source, passing through a width or height to resize or both to crop.
The following example will resize the image to a width of 300px while retaining its aspect ratio:
<pre><code class="language-twig">{{ item.src|resize(300) }}</code></pre>
The following example will resize the image to a height of 300px while retaining its aspect ratio:
<pre><code class="language-twig">{{ item.src|resize(0, 300) }}</code></pre>
The following example will crop the image to a width and height of 300px:
<pre><code class="language-twig">{{ item.src|resize(300, 300) }}</code></pre>
We can then define multiple sizes and pass these into a srcset attribute to make sure we’re serving a suitable image size based on the device viewport. This is especially important for mobile devices who don’t need to download and display a full HD hero image on a 320px wide screen.
The following example defines three sizes, one for mobile, tablet and desktop &#8211; devices with a viewport width of up to 480px will get the 480px wide image and so on.
<pre><code class="language-twig">srcset="{{ item.src|resize(480) }} 480w, {{ item.src|resize(1280) }}
1280w, {{ item.src|resize(1920) }} 1920w"</code></pre>
If you’re new to srcset or want to delve into it a bit deeper, <a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/" target="_blank" rel="noopener">CSS Tricks’ article</a> is a good read.

Insights

The best Gulp build tool for WordPress

Dynamically generating responsive images with Timber’s resize filter and the srcset attribute

Got an idea for a project?