Timber\Image

If TimberPost is the class you’re going to spend the most time, TimberImage is the class you’re going to have the most fun with.

PHP

<?php
$context = Timber::get_context();
$post = new TimberPost();
$context['post'] = $post;
// lets say you have an alternate large 'cover image' for your post stored in a custom field which returns an image ID
$cover_image_id = $post->cover_image;
$context['cover_image'] = new TimberImage($cover_image_id);
Timber::render('single.twig', $context);

Twig

<article>
	<img src="{{cover_image.src}}" class="cover-image" />
	<h1 class="headline">{{post.title}}</h1>
	<div class="body">
		{{post.content}}
	</div>
	<img src="{{ Image(post.custom_field_with_image_id).src }}" alt="Another way to initialize images as TimberImages, but within Twig" />
</article>

HTML

<article>
	<img src="http://example.org/wp-content/uploads/2015/06/nevermind.jpg" class="cover-image" />
	<h1 class="headline">Now you've done it!</h1>
	<div class="body">
		Whatever whatever
	</div>
	<img src="http://example.org/wp-content/uploads/2015/06/kurt.jpg" alt="Another way to initialize images as TimberImages, but within Twig" />
</article>

Overview

Properties

Name Type Description
file_loc string $file_loc the location of the image file in the filesystem (ex: /var/www/htdocs/wp-content/uploads/2015/08/my-pic.jpg)
id integer the ID of the image (which is a WP_Post)
caption string $caption the string stored in the WordPress database
post_status string $post_status the status of a post (“draft”, “publish”, etc.)
post_type string $post_type the name of the post type, this is the machine name (so “my_custom_post_type” as opposed to “My Custom Post Type”)
slug string $slug the URL-safe slug, this corresponds to the poorly-named “post_name” in the WP database, ex: “hello-world”

Methods

Name Type Returns/Description
alt string alt text stored in WordPress
aspect \Timber\float
height int
img_sizes bool/string
link void
parent bool/\Timber\TimberPost
path string the /relative/path/to/the/file
src bool/string
srcset bool/string
width int

Class Methods

__construct

__construct( int/string $iid )

returns: void

Creates a new TimberImage object

Name Type Description
$iid int/string

PHP

<?php
// You can pass it an ID number
$myImage = new TimberImage(552);
//Or send it a URL to an image
$myImage = new TimberImage('http://google.com/logo.jpg');

__toString

__toString( )

returns: string the src of the file


alt

alt( )

returns: string alt text stored in WordPress

Twig

<img src="{{ image.src }}" alt="{{ image.alt }}" />

HTML

<img src="http://example.org/wp-content/uploads/2015/08/pic.jpg" alt="W3 Checker told me to add alt text, so I am" />

aspect

aspect( )

returns: \Timber\float

Twig

{% if post.thumbnail.aspect < 1 %}
    {# handle vertical image #}
    <img src="{{ post.thumbnail.src|resize(300, 500) }}" alt="A basketball player" />
{% else %}
	   <img src="{{ post.thumbnail.src|resize(500) }}" alt="A sumo wrestler" />
{% endif %}

get_pathinfo

get_pathinfo( )

returns: array

Get a PHP array with pathinfo() info from the file


get_url

DEPRECATED since 0.21.9 use src() instead

get_url( string $size="" )

returns: string

Name Type Description
$size string

height

height( )

returns: int

Twig

<img src="{{ image.src }}" height="{{ image.height }}" />

HTML

<img src="http://example.org/wp-content/uploads/2015/08/pic.jpg" height="900" />

img_sizes

img_sizes( string $size="full" )

returns: bool/string

Name Type Description
$size string a size known to WordPress (like “medium”)

Twig

<h1>{{ post.title }}</h1>
<img src="{{ post.thumbnail.src }}" srcset="{{ post.thumnbail.srcset }}" sizes="{{ post.thumbnail.sizes }}" />

HTML

<img src="http://example.org/wp-content/uploads/2018/10/pic.jpg" srcset="http://example.org/wp-content/uploads/2018/10/pic.jpg 1024w, http://example.org/wp-content/uploads/2018/10/pic-600x338.jpg 600w, http://example.org/wp-content/uploads/2018/10/pic-300x169.jpg 300w sizes="(max-width: 1024px) 100vw, 102" />

link( )

returns: void

Returns the link to an image attachment’s Permalink page (NOT the link for the image itself!!)

Twig

<a href="{{ image.link }}"><img src="{{ image.src }} "/></a>

HTML

<a href="http://example.org/my-cool-picture"><img src="http://example.org/wp-content/uploads/2015/whatever.jpg"/></a>

parent

parent( )

returns: bool/\Timber\TimberPost


path

path( )

returns: string the /relative/path/to/the/file

Twig

<img src="{{ image.path }}" />

HTML

<img src="/wp-content/uploads/2015/08/pic.jpg" />

src

src( string $size="full" )

returns: bool/string

Name Type Description
$size string a size known to WordPress (like “medium”)

Twig

<h1>{{ post.title }}</h1>
<img src="{{ post.thumbnail.src }}" />

HTML

<img src="http://example.org/wp-content/uploads/2015/08/pic.jpg" />

srcset

srcset( string $size="full" )

returns: bool/string

Name Type Description
$size string a size known to WordPress (like “medium”)

Twig

<h1>{{ post.title }}</h1>
<img src="{{ post.thumbnail.src }}" srcset="{{ post.thumnbail.srcset }}" />

HTML

<img src="http://example.org/wp-content/uploads/2018/10/pic.jpg" srcset="http://example.org/wp-content/uploads/2018/10/pic.jpg 1024w, http://example.org/wp-content/uploads/2018/10/pic-600x338.jpg 600w, http://example.org/wp-content/uploads/2018/10/pic-300x169.jpg 300w" />

url

DEPRECATED since 0.21.9 use src() instead

url( string $size="" )

returns: string

Name Type Description
$size string

width

width( )

returns: int

Twig

<img src="{{ image.src }}" width="{{ image.width }}" />

HTML

<img src="http://example.org/wp-content/uploads/2015/08/pic.jpg" width="1600" />

wp_upload_dir

wp_upload_dir( )

returns: void


get_post_custom

get_post_custom( mixed $iid )

returns: array

Name Type Description
$iid mixed

This class extends \Timber\Post

This class implements \Timber\CoreInterface