# Image

## Properties

<table><thead><tr><th width="210.99042407660738">Property</th><th width="457"></th><th>Type</th></tr></thead><tbody><tr><td>ID</td><td>Post ID</td><td>int</td></tr><tr><td>alt</td><td>Return alt value</td><td>string</td></tr><tr><td>cache_path</td><td>Only for remote image, return cache path</td><td>string</td></tr><tr><td>caption</td><td>Return caption value</td><td>string</td></tr><tr><td>date</td><td>Formatted post created date, see <a href="https://developer.wordpress.org/reference/functions/mysql2date/">mysql2date</a></td><td>string</td></tr><tr><td>date_gmt</td><td>Formatted post created gmt date, see <a href="https://developer.wordpress.org/reference/functions/mysql2date/">mysql2date</a></td><td>string</td></tr><tr><td>description</td><td>Post content</td><td>string</td></tr><tr><td>extension</td><td>File extension (.jpg, .png, ... )</td><td>string</td></tr><tr><td>file</td><td>Return relative file path</td><td>string</td></tr><tr><td>file_content</td><td>Return file content, usefull for svg</td><td>string</td></tr><tr><td>focus_point</td><td>Return focus point, available when using <a href="https://fr.wordpress.org/plugins/wp-smartcrop/">WP Smartcrop</a> plugin</td><td>array</td></tr><tr><td>height</td><td>Image height</td><td>int</td></tr><tr><td>link</td><td>Return image link</td><td>string</td></tr><tr><td>meta(<em>name</em>)</td><td>Get post meta</td><td>mixed</td></tr><tr><td>custom_fields(<em>name</em>)</td><td>Get ACF value</td><td>mixed</td></tr><tr><td>mime_type</td><td>Image mime type</td><td>string</td></tr><tr><td>modified</td><td>Formatted post modified date, see <a href="https://developer.wordpress.org/reference/functions/mysql2date/">mysql2date</a></td><td>string</td></tr><tr><td>modified_gmt</td><td>Formatted post modified gmt date, see <a href="https://developer.wordpress.org/reference/functions/mysql2date/">mysql2date</a></td><td>string</td></tr><tr><td>filesize</td><td>Return image file size in bytes</td><td>int</td></tr><tr><td>src</td><td>Return image src</td><td>string</td></tr><tr><td>title</td><td>Image title</td><td>string</td></tr><tr><td>width</td><td>Image width</td><td>int</td></tr></tbody></table>

## Examples

#### Process remote image

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

```twig
{% 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
<?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](https://image.intervention.io/v2) 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

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

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

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

#### Generate an advanced picture template

Return resized and compressed picture HTML

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

Output

```html
<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>
```