> For the complete documentation index, see [llms.txt](https://documentation.alpaco.email/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.alpaco.email/template/input-groups/input-types/image/image-settings.md). # 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](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. ### **Image 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. * `Radius` - Sets rounded corners on the image in pixels in numerical values (e.g., *radius: 16*). Automatically accounts for `dpr` . * `Radius_top_left` - individual control settings for top left corner radius. * `Radius_top_right` - individual control settings for top right corner radius. * `Radius_bottom_right` - individual control settings for bottom right corner radius. * `Radius_bottom_left` - individual control settings for bottom left corner radius. ### Draw Often you want to merge images together to form one. That's what the draw function does. \ Draw introduces a few more settings for how you want to place your images\ \ **Draw settings** * `Url` - Link to the url you want to place ontop of another image. * `Text` - Writes an given text ontop on an image. * `font` - set the font family for the text. * `color` - set the color for the text. * `size` - set the size for the text. Numerical values. * `Width` - Sets the width of the image. * `Height` - Sets the height of the image. * `Repeat` - Repeats the image. Set to `true`, `x` or `y` * `Top` - Place the image x pixels from the top. Numerical values. Automatically accounts for `dpr` . * `Left` - Place the image x pixels from the left. Numerical values. Automatically accounts for `dpr` . * `Bottom` - Place the image x pixels from the bottom. Numerical values. Automatically accounts for `dpr` . * `right`- Place the image x pixels from the right. Numerical values. Automatically accounts for `dpr` * `opacity` - Set the opacity of the image. Numerical values. We suggest using what is called a **Capture** in Liquid, and then inserted all your draw values. A **Capture** can contain information like position and whether 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 apply the **Draw** into an Image setting like so: ```html ``` #### Multiple overlays Pass an array of JSON objects to apply multiple overlays at once. Overlays are drawn in the order they appear in the array (the last object is drawn on top). ```html {% capture two_logos %} [ { "url": "https://asset.alpaco.email/YuuwBkrjhnITV337yev9LhqPFbQSHCkznhU6XYVp.png", "width": 80, "top": 0, "left": 0 }, { "url": "https://asset.alpaco.email/YuuwBkrjhnITV337yev9LhqPFbQSHCkznhU6XYVp.png", "width": 80, "bottom": 0, "right": 0, "composite": "xor" } ] {% endcapture %} ``` #### Compositing (Porter-Duff Modes) Control how an overlay blends with the base image by setting the `composite` property. Available modes. For more documentation, read the [Porter-duff section](https://developers.cloudflare.com/images/optimization/draw-overlays/#composite).\ \ **Porter duff settings** * `over` *(default)*: Standard overlay behavior. * `in`: Shows overlay *only* where the base image is opaque. * `out`: Shows overlay *only* where the base image is transparent. * `atop`: Clips overlay to the shape of the base image. * `xor`: Creates a cutout; overlapping opaque areas become transparent. * `lighter`: Adds color values of both images together to brighten overlaps.