Image sizes and crops
Embed
<a href="https://forumulate.com/guides/image-sizes"><img src="https://forumulate.com/guides/_api/public/orgs/046a9bc0-d530-43ae-9bae-af7945008cda/spaces/36aa4df0-1e95-4cef-8ae9-795169441345/pages/a6364078-2010-47a2-b2cf-adf84a364b8d/social-card.svg?v=3e7ae33eec8b" alt="Image sizes and crops" width="600" height="315"></a>Every picture slot on a reader page draws your upload into a box of its own shape. This page lists each slot, the shape of that box, the size worth uploading, and what happens to the parts of the picture that do not fit.
Three rules hold for all of them:
A picture that has to fill a box is cropped around its focal point. The box is drawn with
object-fit: cover(orbackground-size: cover), centred on the focal point you set on the picture in the media library — the centre when you set none. Set a focal point on any picture whose subject is not in the middle, and keep words out of the edges.A logo is never cropped. Logos and marks are drawn with
object-fit: containor at a fixed height with the width following, so the whole image always shows.Upload the size below, not the size on screen. The reader serves our own uploads through the resizer at 256, 512 and 1024 pixels wide, and offers your original as the largest candidate for wide and high-density screens, so an original about twice the rendered width is what a retina screen gets. A picture hosted elsewhere is used exactly as it is.
The slots
Slot | Where the key lives | Box shape on the page | Upload | Crop |
|---|---|---|---|---|
Blog post cover, on the post |
| 2:1 by default; | 2048 × 1024 for the default; 2560 wide for a | Cover, around the focal point |
Blog post cover, on a card (index, tag pages, front-page feeds) | the same | 2:1 in the single-column | 1600 × 900 covers every one of these | Cover, around the focal point. |
Social card, generated | made for every space and every post with no image of its own; shaped by | 1200 × 630 (1.91:1) | Nothing to upload; the template's | The logo is fitted whole (never cropped) |
Social card, your own |
| Served as uploaded; the networks that show it crop it to their own box | 1200 × 630 | Not cropped by us. SVG is never used as a share image (no network shows one); the generated card stands in |
Forum category background, on a tile |
|
| 1600 × 600, no words in it | Background |
Forum category background, on the category page |
| A banner as wide as the column (or | 2400 × 600, no words in it | Background |
Forum category logo |
| Square: 24 px on a tile ( | 256 × 256 | Cover in a square, so a non-square logo loses its sides; upload it square |
Blog tag cover |
| The head of the tag's landing page, across the column, 3:1 by default; | 2400 × 800 for 3:1 | Cover, around the focal point |
Author avatar | the author's profile picture | A circle. Bylines: 24 px, 36 px stacked, 40 px in the author box, or | 400 × 400 square | Cover in the circle, centred: the corners are cut off, so keep the face in the middle. Served at twice the drawn size (a 96 px portrait gets the 256 px copy), so it is sharp on a high-density screen |
Docs collection cover |
| The collection's landing page, 16:5, as wide as the page measure (56rem by default). Hidden by | 1800 × 560 | Cover, around the focal point |
Docs page cover |
| Across the column at 1990:480 (about 4.1:1). Hidden by the page's | 1990 × 480 or larger at that shape | Cover, around the focal point |
Header logo (wordmark) |
| 28 px tall, the width following the picture's own shape; | SVG; else a PNG at least three times the height you show it at, trimmed to the artwork | Never cropped ( |
Logo mark |
| A 28 × 28 square beside the wordmark (or instead of it on a phone, with | SVG; else 512 × 512 PNG | Never cropped ( |
Favicon |
| The browser tab | A square SVG, or a 512 × 512 PNG | Used exactly as uploaded |
A site's header and footer take the same logo keys in the site's config.theme; the footer has its own footer.logo and footer.logoMark, which fall back to the header's (Sites).
One picture, many boxes
The same coverUrl is drawn 2:1 on the post, 3:2 in a grid card and 21:9 as a magazine opener, so a cover is cropped differently in each. A picture made at 2:1 with the subject in the middle third survives all of them. When one place needs a different crop, change that place's box rather than the picture: a card's image.aspect and image.focus, the post's post.cover.aspect, or original where you want no crop at all.
A post's cover can also stay off the post and on the cards only: set the post's coverPlacement field to card-only, or post.cover.show: false for every post.
Focal points
The media library lets you set a focal point on an uploaded picture: the part of it that must survive any crop. Every reader slot that crops a library picture centres its crop there — the post cover, every card (feed cards, the blog index, tag pages, magazine openers and tiles), release covers, forum category backgrounds on tiles, the /categories page and the category banner, the blog tag cover, and the docs collection, section-card and page covers. The same point is used where the API makes a cropped copy itself (a headless content entry's ?ar=…&fit=cover image) and in the library's thumbnails.
A picture without a focal point is cropped from the centre, as before. A picture hosted elsewhere has no focal point. Where an owner has chosen a position explicitly — a feed card's image.focus — that choice wins over the picture's focal point. A changed focal point reaches the reader within the hour (picture sizes and focal points are cached for that long).