Images

Render a responsive image with an author-supplied crop The author chooses the crop through an attached attribute; the template resizes with that strategy and lets the picture-tag setting offer the widths. Resize, then convert, then render. Choose between the seven resize strategies auto scales to fit inside a box; fit fills it and crops (despite the name); crop cuts a region unscaled; exact and square stretch; landscape derives the height; for a portrait result, use auto with only a height. Decide from what the slot must guarantee. Serve WebP without writing a picture tag yourself Turn on Generate picture tag and every getHtml() renders a picture element with a WebP source and fallbacks, no template change. Per image, toOptimizedFormat() converts to WebP; browsers that cannot show it get the original. Turn on picture tags and understand what changed in your markup One setting, and every getHtml() and every richtext image becomes a picture element: a WebP source, an original-format source, an img fallback, 2x versions when the original is large enough. Your attributes land on the img. Resize an image from JavaScript using URL parameters Every template transformation is also a query parameter on the image URL: w, h, s, f, q. Hand the script a base path from the template, round to a few fixed widths, and never put visitor input into the parameters. Hand-write a picture tag when automatic art direction is not enough The automatic sources choose by viewport width. When the crop must change per breakpoint, build the picture element from resized paths, take each source's type from the converted image, and use getPath(), never getHtml(), inside it. Stop a grey placeholder appearing on production The placeholder appears for signed-in users by default, and a site member counts as signed in. Either set Show image placeholders to Never on a site with member accounts, or use getAreaImage() with an isBlank() check in templates members see. Reserve layout space with the aspect ratio to avoid layout shift A resized image rendered with getHtml() gets width and height attributes automatically, which is all a browser needs. For unresized images and for wrappers, use getWidth(), getHeight() and an aspect-ratio style. Import a legacy site's externally hosted images during a migration Turn on Import external images, re-save the migrated records, check the file manager, and turn it off again. Every image hotlinked in rich text is copied in at its source path and the content pointed at the copy. Upload an image and place it in an area POST the file to /cdna-api/files/upload-file as multipart form data, with a folder and type=image; the answer carries the image's id. Put that id in an image area, or an image custom field, and read the layout area back for the image's path.