Image settings

Image settings are the powerful features that enables you to model, filter, rotate, resize and expand on what your template needs to ensure those images looks just right, each time - without Photoshop

Image settings are some powerful features that helps you ensure the images are always the right size, right tone, right hue.

Image settings are always used in combination with an Image and is that little tag that comes after the " | image: " defined like so:

{{ ... | image: ... }}

We use Cloudflare's Image Optimization behind the scenes. It may be useful to read their documentation to learn more about the options, arguments and behaviors.

Possible settings

• width - Overwrites the width provided in Image input options and uses this value for resizing

• height - Sets the height explicitly and resizes based on this, depending on fit argument.

• dpr - Overwrites the dpr provided in Image input options and uses this value for resizing.

• fit - Affects interpretation of width and height. All resizing modes preserve aspect ratio. Read about the options here.

• background - Sets a background color for the resulting image, used together with fit=pad.

• blur - Sets a blur on the image.

• Rotate - Enables you to rotate the image.

• Gamma - Enables you to set the gamma ratio on the image.

• Contrast - Enables you to set the contrast ratio on the image.

• Draw - A feature that enables you to merge images together with the uploaded. Further explained in the subject Draw

• Repeat - A feature that enables you to repeat an image. This can be done in both directions or only one. Usually used for something like overlays ontop of an image.

• Position - A feature that enables you to position an image in its container. It can be left, right, top or bottom and indicated in pixels. Usually used for something like overlays ontop of an image.

Draw

Often you want to merge images together to form one. This can be achieved by making use of what is called a Capture in Liquid, and then inserted into a draw value, under Image settings.

A Capture can contain information like position and wether you want the image to stretch across the uploaded image it's being merged with.

Like so:

{% capture draw_play %}
  { "url": "https://asset.alpaco.email/B8URBuJNlGJnIV40Am2SUggn1r0oxY02wFcNUgzV.png", "width": 640, "fit": "cover" }
{% endcapture %}

Notice how attributes are encased in a "", if the value is a string, that too needs a "", but if it's an integer it should be without "".

Then you need to insert the Draw into an Image setting like so:

<img src="{{ my_input_group_name.my_image.url | image: width: 640, draw: draw_play }}" height="{{ my_input_group_name.my_image.height }}" />