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:
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 resizingheight
- Sets the height explicitly and resizes based on this, depending onfit
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 withfit=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 DrawRepeat
- 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:
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:
Last updated