# Media Elements

> Images, galleries, video, logos, and icons - focal points, lightboxes, masonry layouts, autoplay behavior, and settings-bound branding.

Five elements put media on the page: **Image**, **Image Gallery**, **Video**, **Logo**, and **Icon**. All of them pull files from the tenant's [media library](/docs/help/media), which handles optimization for you.

---

## Image

The workhorse. A responsive image with proper dimensions and lazy loading built in.

### Content

- **Image** - pick from the media library or upload
- **Image Alt** - the alt text. Write it for a screen-reader user; it also matters for image SEO
- **Link** - make the image clickable

### Settings

| Field | Options | Notes |
|-------|---------|-------|
| **Width / Height** | pixels | Rendered dimensions; setting them prevents layout shift |
| **Focal Point** | 9-position grid (Top Left through Bottom Right) | Which part of the photo survives cropping |
| **Load image eagerly** | checkbox | Images lazy-load by default; turn this on only for the image at the very top of the page |
| **Open in lightbox** | checkbox | Click opens the full-size image in an overlay |
| **Border** | None, Rounded, Circle, Pill | Corner treatment |
| **Inline SVG** | checkbox | Inlines an SVG file so it inherits colors and can be styled |
| **Max Width** | None, X-Small through the larger steps | Caps the display width |

---

## Image Gallery

A packed grid of images with no per-image captions or text - portfolios, job photos, before/after sets.

### Adding Images

1. Add an **Image Gallery** element
2. Bulk-add photos from the media library; each becomes a **Gallery Image** item
3. Reorder items in the Inspector list

### Settings

| Field | Options |
|-------|---------|
| **Layout** | Grid (equal cells) or Masonry (packed, keeps each photo's aspect ratio) |
| **Columns** | Per breakpoint: Phone Portrait, Tablet Landscape, Desktop, Large Screens (1 to 6 columns each) |
| **Column Gap / Row Gap** | Default, None, Small, Medium, Large |
| **Image Radius** | None, Small, Medium, Large |

Set fewer columns on Phone Portrait (typically 2) and more on Desktop (typically 4) - the defaults already follow that pattern.

---

## Video

Self-hosted or external video with sensible performance defaults.

### Content

- **Video** - a file from the media library or an external URL
- **Video Alt** - accessible description
- **Poster Image** - the frame shown before playback
- **Play Icon** - overlay play button

### Settings

| Field | Options | Notes |
|-------|---------|-------|
| **Width / Height** | pixels | |
| **Focal Point** | 9-position grid | For cover cropping |
| **Loading** | Lazy or Eager | Lazy by default |
| **Autoplay** | None, Autoplay when in viewport, Always autoplay | In-viewport is the background-video pattern |
| **Loop** | checkbox | |
| **Muted** | checkbox | Required by most browsers for autoplay |
| **Controls** | checkbox (on by default) | Turn off for decorative loops |
| **Plays Inline** | checkbox (on by default) | Prevents fullscreen takeover on phones |

For a decorative autoplay loop: Autoplay when in viewport + Loop + Muted + Controls off.

---

## Logo

The Logo element is bound to your site identity: it renders the logo image (and site name) from [Site Settings](/docs/help/site-settings), so updating the logo in one place updates it everywhere. Made for the [Header and Footer builder](/docs/help/header-footer).

| Field | Notes |
|-------|-------|
| **Link** | Where the logo points (usually the home page) |
| **Max Height / Max Width** | Size constraints in pixels |
| **Alignment** | Left, Center, Right |

---

## Icon

A single icon with optional link.

| Field | Options |
|-------|---------|
| **Icon** | Pick from the icon set |
| **Link** | Optional |
| **Icon Width** | Size in pixels |
| **Color** | None, Muted, Emphasis, Primary, Secondary, Success, Warning, Danger |
| **Style** | None, Link, Button |
| **Alignment** | Left, Center, Right |

For icon-plus-text feature lists, do not compose Icon + Text by hand - the [Grid](/docs/help/grids) element does that pattern natively with icon position and background options.

---

## Media Performance Notes

- Uploads are converted to an optimized web format automatically, and the renderer picks appropriately sized variants - you rarely need to resize by hand. See [Media Library](/docs/help/media).
- Always fill in alt text. The media library requires it on upload for a reason.
- Only the topmost image on a page should load eagerly; everything else should stay lazy.

Changes go live on the next manual **Deploy**, like all content edits.

---
Source: https://seedlysites.com/docs/help/media-elements