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
Transformations are primarily requested by a theme's blocks. A 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 the transformations it needs with it, so you don't normally have to set any up by hand. You can also create your own transformations, but a custom transformation only does something if one of your blocks or integrations actually requests it by its key — defining one on its own has no effect on the live site. If you're not sure whether a custom transformation will be used, check with your theme developer.
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.