Use an Image From a URL With Timber

Most of the time when creating a WordPress website based on Timber I am working with local images that were added through the WordPress media library or uploaded using an ACF image field. You use these with the help of the get_image() function of Timber.

But sometimes it can come in handy to work with images from an URL source – be it from another site or even your own server.

Here is how to do that with the get_external_image() function:

$context = Timber::context();

// Lets say you have an external image that you want to use in your theme

$context['cover_image'] = Timber::get_external_image($url);

Timber::render('single.twig', $context);

Then in your twig file you can use the typical filters and properties:

<img src="{{ cover_image.src }}" class="cover-image" />

Helpful documentation for further information: Timber\externalImage and work with external images.

Clone All Files From a Single Git Branch Without Git History

When starting a new WordPress theme project I usually create a new Git repository for my custom theme to be stored in. Into that I want to clone the files of the starter theme I am using (Flynt), but without that project’s Git history (.git directory). Here are two ways to do that:

Use Git Commands to Clone Without History

I have my new repo locally at ~/code/new-theme and want to clone the next branch of the public https://github.com/flyntwp/flynt repo into that:

cd ~/code/new-theme
mkdir tempclonedir
cd tempclonedir
git clone --depth=1 --single-branch --branch next https://github.com/flyntwp/flynt . 
rm -rf .git
cd ..
mv tempclonedir/{.,}* .
rm -r tempclonedir

Of course you can combine these commands into a one-liner like so:

cd ~/code/new-theme && mkdir tempclonedir && cd tempclonedir && git clone --depth=1 --single-branch --branch next https://github.com/flyntwp/flynt .  && rm -rf .git && cd .. && mv tempclonedir/{.,}* . && rm -r tempclonedir

Using degit to Clone Single Git Branch

Alternatively you can use degit to make the same task easiert. It’s a Node.js package maintained by Rich Harris, the creator of Svelte.

First install degit globally:

npm install -g degit

Then to do the same as above run the following command:

cd ~/code/new-theme
degit https://github.com/flyntwp/flynt#next

Note: if you are cloning into a new git repo (that already has a hidden .git directory and therefore isn’t empty) you have to append the “–force” parameter.

Automatic Text Excerpt / Truncated Texts with Twig

Today I had to create a grid of cards for a search page. To ensure a consistent layout I wanted the excerpt texts to be cut off, if necessary, at certain length.

This can be done easily when using the truncate filter in the Twig template engine for PHP:

toLongText|truncate(14)

The number 14 stands for the number of words after which the text will be cut off and an ellipsis is added.

HTML5 Video Autoplay in Mobile Safari

For autoplay to work on Mobile Safari with a native HTML video element you need to also set the “playsinline” attribute. Otherwise the video wouldn’t start to play automatically:

<video muted loop autoplay playsinline preload="auto">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support playing this video.
</video>

The playsinline attribute is actually a standard HTML attribute, I learned today. I did not encounter any problems with autoplay in other browsers besides within Mobile Safari though.