Media transformations
Define how images are resized, cropped, and converted for use on your site
A media transformation is a defined size and shape that an image can be served at. When your theme requests an image at a specific transformation — "hero", "thumbnail", "header" — Basker generates a version of the image at that size and serves it through the CDN.
You don't need to upload multiple versions of the same image for different uses. Upload the original at the largest size you have, and transformations handle the rest.
What a transformation contains
Each transformation has:
- A name that identifies it inside Basker.
- A slug that themes use to request the transformation.
- A width and height in pixels.
- A fit mode that controls how the image is sized to those dimensions:
- Cover — fills the box, cropping if necessary. Best for hero images and tile thumbnails where the box must be fully covered.
- Contain — fits inside the box, leaving padding if necessary. Best when the whole image must remain visible.
- Fill — stretches the image to the exact dimensions. Use sparingly; this distorts the image.
- Inside — like contain, but the resulting image is no larger than the original.
- Outside — like cover, but the resulting image is no smaller than the original.
- An optional quality setting (1–100) for compression.
How transformations are used
A theme defines the transformations it expects. The theme's hero block might request the hero transformation; an event listing might request thumbnail. Each request is routed through Basker's CDN, which generates and caches the transformed version.
When a theme is installed, it brings its required transformations with it. You can also create your own transformations and reference them from custom blocks or external integrations.
Focal points
The focal point on each image (set in the Media library) tells transformations which part of the image to keep visible when cropping. Without a focal point, transformations crop from the centre — which is often wrong for images of people or important off-centre subjects.
For any image you upload that's likely to be cropped to multiple shapes, set the focal point so the subject stays in frame across every transformation.