# Image settings

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](https://developers.cloudflare.com/images/transform-images/transform-via-workers/) 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](https://developers.cloudflare.com/images/transform-images/transform-via-url/#fit).
* `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](https://developers.cloudflare.com/images/transform-images/draw-overlays/).
* `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:

```liquid
{% 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:

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://documentation.alpaco.email/template/input-groups/input-types/image/image-settings.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.