Skip to main content

Image

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.

Returns: string

Examples

{{$image.avatar}} // 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/65.jpg'

avatarGitHub​

Generates a random avatar from GitHub.

Returns: string

Examples

{{$image.avatarGitHub}} // 'https://avatars.githubusercontent.com/u/30238607'

avatarLegacy​

Generates a random avatar from https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar.

Returns: string

Examples

{{$image.avatarLegacy}} // 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/386.jpg'

dataUri​

Generates a random data uri containing an URL-encoded SVG image or a Base64-encoded SVG image.

Parameters

NameTypeDefaultDescription
colorstring{{$color.rgb}}TThe color of the image. Must be a color supported by svg.
heightnumber{{$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.
widthnumber{{$number.int(min=1,max=3999)}}The width of the image.

Returns: string

Examples

{{$image.dataUri}}  // 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgYmFzZVByb2ZpbGU9ImZ1bGwiIHdpZHRoPSIxNTE1IiBoZWlnaHQ9IjM1MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iIzliYmU5YiIvPjx0ZXh0IHg9Ijc1Ny41IiB5PSIxNzUiIGZvbnQtc2l6ZT0iMjAiIGFsaWdubWVudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSI+MTUxNXgzNTA8L3RleHQ+PC9zdmc+'

{{$image.dataUri(type='svg-base64')}}  // 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgYmFzZVByb2ZpbGU9ImZ1bGwiIHdpZHRoPSIyMDMxIiBoZWlnaHQ9IjI4ODAiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNkNDM5YTIiLz48dGV4dCB4PSIxMDE1LjUiIHk9IjE0NDAiIGZvbnQtc2l6ZT0iMjAiIGFsaWdubWVudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSI+MjAzMXgyODgwPC90ZXh0Pjwvc3ZnPg=='

url​

Generates a random image url.

Parameters

NameTypeDefaultDescription
heightnumber{{$number.int(min=1,max=3999)}}The height of the image.
widthnumber{{$number.int(min=1,max=3999)}}The width of the image.

Returns: string

Examples

{{$image.url}}  // 'https://picsum.photos/seed/nJK2R/2332/2694'

urlLoremFlickr​

Generates a random image url provided via https://loremflickr.com.

Parameters

NameTypeDefaultDescription
categorystringCategory to use for the image.
heightnumber{{$number.int(min=1,max=3999)}}The height of the image.
widthnumber{{$number.int(min=1,max=3999)}}The width of the image.

Returns: string

Examples

{{$image.urlLoremFlickr}}  // 'https://loremflickr.com/11/794?lock=4460902446123441'

{{$image.urlLoremFlickr(width=128)}}  // 'https://loremflickr.com/128/1314?lock=569187007940822'

{{$image.urlLoremFlickr(height=128)}}  // 'https://loremflickr.com/2575/128?lock=7327202370111549'

{{$image.urlLoremFlickr(category='nature')}}  // 'https://loremflickr.com/1911/126/nature?lock=2207830818001848'

urlPicsumPhotos​

Generates a random image url provided via https://picsum.photos.

Parameters

NameTypeDefaultDescription
blur0 | 10 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9{{$number.int(max=10)}}Whether the image should be blurred. 0 disables the blur.
grayscaleboolean{{$datatype.boolean}}Whether the image should be grayscale.
heightnumber{{$number.int(min=1,max=3999)}}The height of the image.
widthnumber{{$number.int(min=1,max=3999)}}The width of the image.

Returns: string

Examples

{{$image.urlPicsumPhotos}}  // 'https://picsum.photos/seed/eOBLomQ1/1855/2500?blur=4'

{{$image.urlPicsumPhotos(width=128)}}  // 'https://picsum.photos/seed/bCbuNt3B6U/128/2821?grayscale&blur=4'

{{$image.urlPicsumPhotos(height=128)}}  // 'https://picsum.photos/seed/XJ2rBGY/184/128?blur=7'

{{$image.urlPicsumPhotos(grayscale=true)}}  // 'https://picsum.photos/seed/kPftIofTd/1752/3352?grayscale&blur=8'

{{$image.urlPicsumPhotos(grayscale=true,blur=4)}}  / 'https://picsum.photos/seed/7FxoLqG/48/412?grayscale&blur=4'

{{$image.urlPicsumPhotos(blur=4)}}  //. 'https://picsum.photos/seed/DNM5Ncdzk/388/538?blur=4'

urlPlaceholder​

Generates a random image url provided via https://via.placeholder.com/.

Parameters

NameTypeDefaultDescription
backgroundColorstring{{$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.
heightnumber{{$number.int(min=1,max=3999)}}The height of the image.
textnumber{{$color.rgb(prefix=' ',format='hex')}}The text to display on the image.
textColorstring{{$number.int(min=1,max=3999)}}TThe text color of the image.
widthnumber{{$number.int(min=1,max=3999)}}The width of the image.

Returns: string

Examples

{{$image.urlPlaceholder}} // 'https://via.placeholder.com/1168x536/7dd5df/b705ad.jpeg?text=umquam%20adsum%20sit'

{{$image.urlPlaceholder(width=128)}} // 'https://via.placeholder.com/128x1123/9fcd41/a28509.png?text=sodalitas%20audeo%20causa'

{{$image.urlPlaceholder(height=128)}}  // 'https://via.placeholder.com/210x128/429e9c/34de09.png?text=suasoria%20paens%20toties'

{{$image.urlPlaceholder(backgroundColor='000000')}}  // 'https://via.placeholder.com/1719x1836/000000/aea69b.jpg?text=cibo%20coaegresco%20deludo'

{{$image.urlPlaceholder(textColor='000000')}}  // 'https://via.placeholder.com/769x743/68aa4c/000000.png?text=perspiciatis%20cubicularis%20libero'

{{$image.urlPlaceholder(format='png')}}  // 'https://via.placeholder.com/883x687/7cfe8b/8390a0.png?text=porro%20tantillus%20curto'

{{$image.urlPlaceholder(text='lorem ipsum')}}  // 'https://via.placeholder.com/1497x1095/4b7dd6/71cdf4.png?text=lorem%20ipsum'

{{$image.urlPlaceholder(width=128,height=128,backgroundColor='000000',textColor='000000',format='png',text='lorem ipsum')}} // 'https://via.placeholder.com/128x128/000000/000000.png?text=lorem%20ipsum'