Add media to pages
In the page editor Blocks panel, add Image, Hero, gallery, or video blocks, then pick library files under Attr—each block controls layout and playback on the published page; see Media presentation blocks for the full catalog of media block types.
Your Media library is the source of truth; the Page Editor is where you compose how work is seen. Drag blocks onto the canvas, pick assets from Media, and tune layout in the right-hand Attributes panel—no re-uploading files for every placement.
Files keep their original dimensions in Media. Cropping and framing on your site are controlled per block (Attributes → aspect ratio), not in the library.
Not sure which block fits the story? Start with the Supported media presentation blocks directory, then open the category page for traits and layout options.
Prerequisites
Assets in Media (photos, videos, portfolio collections)
Dashboard → Pages → Edit → Page Editor tab
Presentation blocks at a glance
| Editor category | Block | Best for |
|---|---|---|
| Media | Image | Single still with aspect ratio, alt text, optional link |
| Media | Video | Inline HTML5 player from library or URL |
| Media | Video Lightbox | Thumbnail opens focused playback |
| Media | Video Background | Full-width looping backdrop with overlay content |
| Portfolio | Image Portfolio | One collection—grid, masonry, or carousel |
| Portfolio | Image Gallery | Hand-picked stills from Media (not tied to one collection) |
| Portfolio | Video Portfolio | Curated video reel from library |
| Portfolio | Portfolio Listing | Multiple collections—grid, list, or tabs |
| Portfolio | Impact Map | Geo-tagged portfolio on a map (Impact map guide) |
| Hero | Hero Image | Full-width still hero with layout presets |
| Hero | Hero Portfolio | Hero driven by a portfolio collection |
| Hero | Hero Video | Streaming-style video hero |
| Hero | Glassmorphism Hero | Blurred glass panel over background media |
| Hero | Hero Slider | Full-viewport rotating hero slides |
| Advanced | Bento Grid | Mixed media + stats + quote cells |
| Advanced | Before/After Slider | Retouch or edit comparisons |
| Advanced | Ad Embed | Published ad placement iframe |
| Sliders | Slider | In-column image carousel (gallery preset) |
| Video | Video Gallery | Multi-column video grid |
| Video | Video Testimonial | Quote + video side by side |
Deep dives: Standard media blocks, Portfolio delivery blocks, Hero canvas blocks, Display & feedback blocks.
Implementation steps
- Upload or organize assets under Media (and Portfolio collections when using portfolio blocks). For videos, allow time for transcoding—see Upload and manage videos.
- Open Pages → Edit → Blocks in the right sidebar → add a block matching your layout goal (table above).
- Select the block on the canvas; use Attributes to choose Media, portfolio source, aspect ratio, or columns.
- For portfolio blocks, pick the Portfolio collection (or multiple collections on Portfolio Listing).
- For Image Gallery or Video Gallery, add items explicitly from Media in the block panel.
- Preview Desktop and Mobile, then Save Page and publish when ready.
Portfolio presentation on pages
Portfolio blocks pull from Portfolio collections—not ad-hoc multi-select from the general library (except Image Gallery / Video Gallery).
| Block | Source | Standout options |
|---|---|---|
| Image Portfolio | One portfolio | Layout: grid, masonry, carousel; columns; gap; aspect ratio; pagination |
| Image Gallery | Selected Media images | Grid layout; per-image alt; aspect ratio |
| Video Portfolio | Media videos | Curated list; grid playback |
| Portfolio Listing | Multiple portfolios | Grid, list, or tabbed; card style; title/description/count toggles |
| Impact Map | Portfolio with geo data | Map layouts; timeline; optional campaign donate CTA |
Tune collection lightbox and EXIF on the public site under Portfolio Settings—see Portfolio lightbox settings.
Troubleshooting & common pitfalls
- Empty block after save: Portfolio blocks need a Portfolio selected; gallery blocks need at least one image or video added in Attributes.
- Wrong crop on live site: Check aspect ratio and object-fit on the block; heroes use separate layout presets (Hero canvas blocks).
- Slow hero loads: Use web-optimized video and poster images; very large originals slow first paint.
- Slider vs Hero Slider: Use Hero Slider for full-width page heroes; use Slider inside columns for in-content carousels.
Verifying your setup
- At least one block uses Media or a Portfolio source you intend to ship.
- Primary stills have alt text; video blocks have poster or URL set.
- Desktop and mobile preview match the story you want visitors to see.