Image_url

Image_url

{% image_url %}

Resolves the URL for an image with the desired presets and other settings applied.

{% image_url output_to_template? [[var, set, or assign]? variable]? output_to_template? = image attributes? %}

{% image_url
output_to_template
 
If included the image_url will be output directly to the template.
var, set, or assign
 
Optional. Specify either "var", "set" or "assign" to change which scope this image_url is stored on. "var" is the default behavior.
variable
output_to_template
 
If included the image_url will be output directly to the template.
=
image
 
Image object or its name/guid
attributes
 
Key:value pairs. May use the variable arguments syntax. Additional options for the image URL. Currently only supports presets
%}

attributes

preset
 
One or more image presets to apply to the image. May either be preset objects or space-separated preset codes. May be included multiple times to include multiple presets

Related

{% image_preset %}

{% images %}

{% image %}

{{ url }}

Field containing a URL.

{{ image_preset }}

{{ images }}

Contains multiple images.

{{ image }}

{% set_canonical_url %}

Sets the canonical URL for the current page, which is output by default as part of an HTML page's {{ automatic_markup }}.

Examples

Demonstrates how to image_url.

Image_url

Copy
Template: {% image_url output_to_template = entity.image %}
Output: "https://domain.com/path/to/img.jpg"

Demonstrates how to image_url altered.

Image_url altered

Copy
Template: {% capture imageCode %}thumb-{{size}} border-{{bordercolor}}{% endcapture %}
{% image_url img_path output_to_template = img extension:"png" preset:"transparent20" preset:"border10" imageCode %}
Output: "https://domain.com/path/to/altered/img.jpg"

Demonstrates how to image_url with presets.

Image_url with presets

Copy
Template: {% image_url img_path = page.banner_image name:"home-banner" preset:"banner-size" preset:"sepia-simple" %}
<a href="{{img_path}}"><img src="{{img_path}}" class="thumb" /></a>
Output: <a href="https://domain.com/path/to/altered/img.jpg"><img src="https://domain.com/path/to/altered/img.jpg" class="thumb" /></a>