Adding Images to Pages — Quick Guide

This covers the image sections in the page builder (Sanity Studio → your page → Add section → Media). For the full section catalog, see docs/sections-reference.md; for the general workflow, see docs/how-to-use-the-sanity-new-features.md.

Which one do I want?

How to add any of these

1. Open the page in Sanity Studio.
2. Click Add section → these are grouped under Media.
3. Pick the section from the list.
4. Fill in the fields — every field has a description under it in the Studio explaining what it does.
5. Upload your image using the image field. Always add alt text unless the image is purely decorative — this matters for accessibility and SEO.
6. Click Publish.

Section-by-section details

Content Image

• One image, optional caption below.
• Width: *Article width* (matches blog/article column) or *Wide* (full width inside side margins).
• Best for: a diagram, screenshot, or photo in the middle of a blog post without cropping to a banner height.

Full-Bleed Image Band

• One image, no text.
• Height: choose Short, Medium, or Tall.
• Fade into page background: turns on if you want the bottom edge of the image to fade smoothly instead of ending abruptly — nice when the section below is a light color.
• Best for: a visual break between sections, a texture/mood image, a wide banner shot.

Media + Copy Row

• Image on one side, text on the other.
• Required: a heading. If left blank, the whole section won't appear on the page — so always fill it in.
• Optional: eyebrow (small label above heading), body text, bullet points, a button.
• Image position: choose whether the image sits on the left or right (on mobile, the text always shows first, then the image).
• Best for: "here's a feature, here's the proof" type sections.

Feature Rows with Images

• A repeatable list — each row has its own title, description, and image.
• Alternate image side: turn on to zig-zag the image left/right/left/right down the page. Leave off to keep the image on the same side every time.
• Crop anchor per image: Center, Top, or Bottom — controls which part of the image stays visible if it gets cropped to fit.
• Best for: "how it works" steps, a list of capabilities each with its own screenshot.

Image Gallery

• A grid of images, each with an optional caption.
• Minimum 2 images required — the section won't show with fewer than that.
• Columns: 2, 3, or 4 across.
• Shape: Landscape, Square, Portrait, or Original (keeps each image's own proportions — mixing this with a grid can look uneven, so only use Original if all your images already share a similar shape).
• Best for: a photo set, logos-in-action, screenshots of different views of the product.

Video

• One embedded YouTube or Vimeo video.
• Just paste the normal link you'd share with anyone — e.g. youtube.com/watch?v=... or vimeo.com/.... No embed code, no iframe.
• Skipped entirely if the link isn't a recognized YouTube or Vimeo URL — double check the link if the video doesn't show up.

A few tips

• Image size: upload the largest, highest-quality version you have — the site automatically resizes it for different screen sizes. Don't pre-shrink images.
• Alt text: describe what's actually in the image in a sentence (e.g. "Dashboard showing tariff classification results"). Leave it blank only for purely decorative images.
• Preview before publishing: use Studio's preview to check how the section actually looks on the live page before you publish.
• If a section you added doesn't seem to appear on the live page, the most common reason is a missing required field (e.g. no heading on Media + Copy Row, or fewer than 2 images in a gallery) — go back and check every field is filled in.

*Questions or something not covered here? Ask engineering — new section types are easy to add if none of these quite fit what you need.*