Timber Logo

Timber\Image

If TimberPost is the class you're going to spend the most time, Timber\Image is the class you're going to have the most fun with.

PHP

<?php
$context = Timber::context();
$post = new Timber\Post();
$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 Timber\Image($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 #

NameTypeDescription
file_locstring$file_loc the location of the image file in the filesystem (ex: /var/www/htdocs/wp-content/uploads/2015/08/my-pic.jpg)
idintegerthe ID of the image (which is a WP_Post)
captionstring$caption the string stored in the WordPress database
post_statusstring$post_status the status of a post ("draft", "publish", etc.)
post_typestring$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")
slugstring$slug the URL-safe slug, this corresponds to the poorly-named "post_name" in the WP database, ex: "hello-world"

Methods #

NameTypeReturns/Description
altstringalt text stored in WordPress
aspect\Timber\float
heightint
img_sizesbool/string
linkvoid
parentbool/\Timber\TimberPost
pathstringthe /relative/path/to/the/file
srcbool/string
srcsetbool/string
widthint

Class Methods #

__construct #

__construct( bool/int/string $iid )

returns: void

Creates a new Timber\Image object

NameTypeDescription
$iidbool/int/string

PHP

<?php
// You can pass it an ID number
$myImage = new Timber\Image(552);
//Or send it a URL to an image
$myImage = new Timber\Image('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

NameTypeDescription
$sizestring

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

NameTypeDescription
$sizestringa size known to WordPress (like "medium")

Twig

<h1>{{ post.title }}</h1>
<img src="
{{ post.thumbnail.src }}" srcset="{{ post.thumbnail.srcset }}" sizes="{{ post.thumbnail.img_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

NameTypeDescription
$sizestringa 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

NameTypeDescription
$sizestringa size known to WordPress (like "medium")

Twig

<h1>{{ post.title }}</h1>
<img src="
{{ post.thumbnail.src }}" srcset="{{ post.thumbnail.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

NameTypeDescription
$sizestring

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

NameTypeDescription
$iidmixed

This class extends \Timber\Post

This class implements \Timber\CoreInterface