Module to generate images.Overview
For a random image, use {{$image.url}}. This will not return the image directly but a URL pointing to an image from one of two demo image providers "Picsum" and "LoremFlickr". You can request an image specifically from one of two providers using {{$image.urlLoremFlickr}} or {{$image.urlPicsumPhotos}}.For a random placeholder image containing only solid color and text, use {{$image.urlPlaceholder}} (uses a third-party service) or {{$image.dataUri}} (returns a SVG string).For a random user avatar image, use {{$image.avatar}}.This module previously also contained methods for specifically themed images like "fashion" or "food", but these are now deprecated. If you need more control over image type, you can request categorized images using {{$image.urlLoremFlickr}}, use an image provider directly or provide your own set of placeholder images.
avatar#
Generates a random avatar image url.
avatarGitHub#
Generates a random avatar from GitHub.
avatarLegacy#
Generates a random avatar from https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar.
dataUri#
Generates a random data uri containing an URL-encoded SVG image or a Base64-encoded SVG image.| Name | Type | Default | Description |
|---|
| color | string | {{$color.rgb}} | TThe color of the image. Must be a color supported by svg. |
| height | number | {{$number.int(min=1,max=3999)}} | The height of the image. |
| type | 'svg-uri' | 'svg-base64' | {{$helpers.arrayElements(['svg-uri','svg-base64'])}} | The width of the image. |
| width | number | {{$number.int(min=1,max=3999)}} | The width of the image. |
url#
Generates a random image url.| Name | Type | Default | Description |
|---|
| height | number | {{$number.int(min=1,max=3999)}} | The height of the image. |
| width | number | {{$number.int(min=1,max=3999)}} | The width of the image. |
urlLoremFlickr#
| Name | Type | Default | Description |
|---|
| category | string | | Category to use for the image. |
| height | number | {{$number.int(min=1,max=3999)}} | The height of the image. |
| width | number | {{$number.int(min=1,max=3999)}} | The width of the image. |
urlPicsumPhotos#
| Name | Type | Default | Description |
|---|
| blur | 0 | 10 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | {{$number.int(max=10)}} | Whether the image should be blurred. 0 disables the blur. |
| grayscale | boolean | {{$datatype.boolean}} | Whether the image should be grayscale. |
| height | number | {{$number.int(min=1,max=3999)}} | The height of the image. |
| width | number | {{$number.int(min=1,max=3999)}} | The width of the image. |
urlPlaceholder#
| Name | Type | Default | Description |
|---|
| backgroundColor | string | {{$color.rgb(prefix=' ',format='hex')}} | The background color of the image. |
| format | 'gif' | 'jpeg' | 'jpg' | 'png' | 'webp' | {{$helpers.arrayElement(['gif','jpeg','jpg','png','webp'])}} | The format of the image. |
| height | number | {{$number.int(min=1,max=3999)}} | The height of the image. |
| text | number | {{$color.rgb(prefix=' ',format='hex')}} | The text to display on the image. |
| textColor | string | {{$number.int(min=1,max=3999)}} | TThe text color of the image. |
| width | number | {{$number.int(min=1,max=3999)}} | The width of the image. |
Modified at 2025-06-25 07:57:16
