Image

Single image entity

Properties

Property		Type
ID	Post ID	int
alt	Return alt value	string
cache_path	Only for remote image, return cache path	string
caption	Return caption value	string
date	Formatted post created date, see mysql2date	string
date_gmt	Formatted post created gmt date, see mysql2date	string
description	Post content	string
extension	File extension (.jpg, .png, ... )	string
file	Return relative file path	string
file_content	Return file content, usefull for svg	string
focus_point	Return focus point, available when using WP Smartcrop plugin	array
height	Image height	int
link	Return image link	string
meta(name)	Get post meta	mixed
custom_fields(name)	Get ACF value	mixed
mime_type	Image mime type	string
modified	Formatted post modified date, see mysql2date	string
modified_gmt	Formatted post modified gmt date, see mysql2date	string
filesize	Return image file size in bytes	int
src	Return image src	string
title	Image title	string
width	Image width	int

Examples

Process remote image

Allowed mime type : image/jpeg, image/jpg, image/gif, image/png

{% set image = Image('https://path-to-remote/image.jpg') %}
{{ image|resize(1280, 680, {insert:['/newsletter/dots.png','bottom-right', 10, 10]}}) }}

Invalidate image cache ( for remote )

Remote image are stored in cache for 30 days, in a controller or an action, you can force cache invalidation

<?php
Image::invalidateCache('https://path-to-remote/image.jpg', true);

Resize an image

Resize an image, and apply filters

<img src="{{ post.thumbnail|resize(1280, 680, {invert:true, flip: true, ext:'jpg'}) }}" alt="{{ post.thumbnail.alt }}"/>

Filter list

Resize implements Image intervention methods

• gcd

• resize

• insert

• colorize

• blur

• flip

• brightness

• invert

• mask

• gamma

• rotate

• text

• pixelate

• greyscale

• rectangle

• circle

• limitColors

{{ post.thumbnail|resize(1280, 680, {insert:['/newsletter/dots.png','bottom-right', 10, 10]}}) }}

Generate an image placeholder

Generate a transparent image pixel in base64

<img src="{{ pixel(800,600) }}"/>

Generate a placeholder image using https://placehold.jp

<img src="{{ placeholder(800,600) }}"/>

Generate an advanced picture template

Return resized and compressed picture HTML

{{ post.thumbnail|picture(1280, 680, {'max-width: 420px':[420,665], 'max-width: 768px':[768,820]})|raw }}

Output

<picture>
    <source media="(max-width: 420px)" srcset="/uploads/image-420x665.webp" type="image/webp"/>
    <source media="(max-width: 420px)" srcset="/uploads/image-420x665.jpg" type="image/jpeg"/>
    <source media="(max-width: 768px)" srcset="/uploads/image-768x820.webp" type="image/webp"/>
    <source media="(max-width: 768px)" srcset="/uploads/image-768x820.jpg" type="image/jpeg"/>
    <source srcset="/uploads/image-1280x680.webp" type="image/webp"/>
    <img src="/uploads/image-1280x680.jpg" alt="My text alt" loading="lazy" width="1280" height="680"/>
</picture>