Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

Taking your approach on designing things actually makes it fun, more natural, and overall easier.

— Dominik, Developer

Glide:Data_URL Tag

Use glide:data_url to output a manipulated image as a Data URL.

Overview

The {{ glide:data_url }} tag works in a very similar way to the standard Glide tag, except it outputs the manipulated as a Data URL.

Example

You may pass any parameters you'd normally pass to the Glide tag, like width, height and format.

{{ glide:data_url src="image.jpg" width="1280" height="800" format="webp" }}
{{
Statamic::tag('glide:data_url')
->src('image.jpg')
->width(1280)
->height(800)
->format('webp')
}}
data:image/webp;base64,R0lGODlhAgACAJEAALwWrOQqhOwqhP///yH5BAEAAAMALAAAAAACAAIAAAIDBBIFADs=

Parameters

src|path|id

string

The URL of the image when not using the shorthand syntax. (Use the shorthand syntax if you can, it's nicer.) This also accepts asset IDs, if using private assets, for example.

tag

boolean *false*

When set to true, this will output an <img> tag with the URL in the src attribute, rather than just the URL.

alt

string

When using the tag parameter, this will insert the given text into the alt attribute.

preset

string

Use a preset of pre-configured parameters. Learn more.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →