Skip to main content

Images

The next type of content are Images.

Upon upload, images are cropped to the appropriate Size while respecting Aspect ratio.

Optimization​

Images are automatically transformed into webp images and uploaded into a worldwide Content Delivery Network.

Size & Aspect Ratio​

The Size and Aspect Ratio are set by the Recipe designer.

Size and Aspect Ratio cannot be changed by Editors. While the Aspect Ratio is the same across all devices, there are often 5 or more various image Size attributes for each screen size.

HTML​

If a traditional image in HTML is included like this:

basic.html
    <img 
        src="https://www.domain.ltd/image.jpg?w=1920&h=1080"
    />

In the Code Editor, for an element of type Image with the variable Cat, you'd say:

cat.html
    <img 
        src="{cat.src}?w=1920&h=1080"
        alt="{cat.alt}"
    />

Don't forget the width and height parameters.

Alt​

Don't forget the Alt descriptions. It's useful not only for SEO, but also for people with screen readers. In the Editor, it's called the Description field.

URL​

Since the image is uploaded to a CDN, the URL the image is uploaded to appears in the Editor.