Image & media blocks

Image and media blocks bring photos and graphics onto a page — from a single standalone image to card grids, image-and-text promos, and scrolling galleries. Every block is added from the page editor's left sidebar.

New to the editor? Read How the page editor works first — it covers opening a page, the Add button and Add a section panel, editing fields, reordering, and publishing. The steps below pick up from there.

• Image
• Image cards
• Info cards
• Media promo
• Gallery

Image

A standalone image block. Drop in a single photo or graphic with an optional caption underneath.

When to use it

• Featuring one photo between two blocks of copy.
• Adding a sponsor banner, infographic, or map image.
• Any time you want a single image to stand on its own.

What it looks like

Screenshot needed: A standalone image block on a live page. Save at public/help-images/blocks/image/example.png.

Fields

• Image — The file to display. Pick one from your asset library or upload a new one.
• Alt text — The short description used by screen readers and shown if the image fails to load. Always fill this in.
• Caption — An optional line of text under the image.
• Alignment — Center keeps the image inside the page's normal width. Full makes it stretch edge-to-edge.

Step-by-step: adding an image

1. Click the Add button at the top of the Blocks list, then under the Content category click the Image thumbnail. The block is added and its settings open in the sidebar.
2. In the Content group, click the Image field. The asset picker opens — drag a file in or click to upload, or pick one you've already uploaded, then confirm. The preview shows your image right away.
3. Fill in Alt text with a short description of what's in the image (e.g. "Volunteers packing food boxes"). This is read aloud by screen readers and shown if the image fails to load — always set it.
4. Optionally type a Caption to show a line of text under the image; the small Font size box beside it sets the caption size (default 14).
5. In the Layout group, set Alignment — Center keeps the image within the page's normal width; Full stretches it edge to edge. Leave Image width (px) blank for automatic sizing, or enter a pixel width to cap it.
6. Preview, then Publish.

Gotcha: an empty Alt text hurts accessibility and SEO. Decorative-only images can take a very short caption-free description, but don't leave the field blank.

Screenshot needed: The asset picker open on the Image field. Save at public/help-images/blocks/image/picker.png.

Tips

• Crop and compress images before uploading. JPEGs under 300 KB load fast.
• Use full alignment for sweeping landscape photos; center for everything else.
• A good caption explains what's in the photo or who took it.

Image cards

Image cards is a grid of cards with full-bleed background images, a text overlay, and an optional CTA. It's the go-to pattern for "Explore / Move / Subscribe" rows on the home page.

When to use it

• Three large clickable tiles linking to your top destinations (Directory, Events, Apply).
• A "Move to / Visit / Do business" trio above the fold.
• Any place you want big visual buttons instead of plain text links.

What it looks like

Screenshot needed: A live image cards row. Save at public/help-images/blocks/image_cards/example.png.

Fields

• Section title / Subtitle — Optional headings above the grid.
• Columns — 1, 2, 3 (default), or 4 cards per row.
• Card height (px) — The height of each card in pixels. Default is 240. Card width (px) is blank by default (fills the column).
• Image overlay darkness — 0 (no overlay) to 0.85. Default is 0.45. Higher keeps titles legible on busy photos.
• Cards — Each card has:
  • Background image — The full-bleed photo.
  • Image position — Which part stays visible when cropped (top, center, bottom-left, etc.).
  • Image fit — Cover (fills the card, may crop) or contain (whole image visible, may letterbox).
  • Title / size / color and Subhead / size / color — The card's text lines.
  • CTA label / CTA URL — When set, the entire card becomes clickable.
  • Alignment — Left (default), center, or right.
  • Overlay color override — Replaces the default dark overlay with a custom tint.

Step-by-step: adding image cards

1. Click Add, then under the Headers category click the Image cards thumbnail. The block is added and its settings open in the sidebar.
2. In the Display group, set Columns (1–4, default 3) to match how many tiles you'll add per row, and set Card height (px) if the default 240 feels too short or tall.
3. Scroll to the Cards group and click Add Card. Click the new card row to expand its fields.
4. Click Background image and pick or upload the tile's photo. Set Image position (which part stays visible when cropped) and Image fit (Cover fills the tile, may crop; Contain shows the whole image).
5. Type the Headline and optional Subheadline. To make the whole card clickable, fill in Card link URL (and, if you want a visible button, Link text).
6. Repeat Add Card for each tile; drag card rows to reorder them.
7. Back in the Display group, if titles are hard to read over busy photos, raise Overlay darkness (0 to 0.85, default 0.45).
8. Preview across Desktop and Mobile, then Publish.

Gotcha: the card only becomes clickable when Card link URL is filled in. A Link text with no URL shows text that does nothing.

Screenshot needed: A card expanded with the Background image picker open. Save at public/help-images/blocks/image_cards/card-edit.png.

Tips

• Use photos with a clear focal point — busy images fight with the title.
• Match all card images in style (all daytime, all close-up, etc.) so the row reads as a set.
• Set the CTA URL to make the whole card clickable; visitors don't always notice small buttons.

Info cards

Info cards is a grid of small cards, each with an icon, title, body, and link. Use it to highlight three or four equally-weighted things side-by-side.

When to use it

• Showcasing membership benefits ("Network", "Save", "Grow").
• Listing program areas or services on a landing page.
• Mixing a static card with a "next event" card and a "member sign-in" card on the home page.

What it looks like

Screenshot needed: A live info cards row. Save at public/help-images/blocks/info_cards/example.png.

Fields

• Section title / Subtitle — Optional headings above the grid.
• Columns — 1, 2, 3 (default), or 4 cards per row.
• Card style — Boxed (default, bordered), Plain (no border/background), or Elevated (with a soft shadow).
• Corners — Rounded (default) or squared. Card height sets a minimum height in px (0 for none).
• Cards — Each card has:
  • Card type — Static (manual content), Upcoming event (auto-pulls an event), or Member login (sign-in card).
  • Icon — Chosen from the built-in icon picker (click to browse and select).
  • Icon position — Top (default), bottom, or none, plus an Icon color.
  • Title / Body — Manual copy. For event/login cards, leave blank to use the auto-filled values.
  • Link / Link label — Where the card sends visitors (static cards only).
  • Background / text / border colors and border width — Per-card overrides.

Step-by-step: adding info cards

1. Click Add, then under the Content category click the Info cards thumbnail. The block is added and its settings open in the sidebar.
2. In the Heading group, add an optional Section title and Subtitle. In the Layout group, set Columns (1–4, default 3) to match how many cards you plan to add, and pick a Card style (Boxed, Plain, or Elevated).
3. Scroll to the Cards group and click Add Card. Click the row to expand its fields.
4. Set Card type: Static to write everything yourself, Upcoming event to auto-fill from your calendar (optionally pick a specific Event, or leave on Auto for the next one), or Member login for a sign-in card.
5. Click Icon to open the icon picker and choose an icon, then set Icon position (top/bottom/none). For static cards, type the Title and Body, and set Link plus Link label if the card should be clickable.
6. Repeat Add Card for each card, then drag rows to put them in the order you want.
7. Preview, then Publish.

Gotcha: set Columns to match your card count — three cards in a 4-column grid leaves an awkward empty slot. For event and login cards, leaving Title/Body blank uses the auto-filled text; only fill them in to override.

Screenshot needed: The Cards list with three cards added. Save at public/help-images/blocks/info_cards/cards-list.png.

Tips

• Use the same icon style across all cards in one row — pick all solid (fas) or all regular (far).
• One sentence per card is plenty.
• Set columns to match your card count — three cards in a 4-column grid will look uneven.

Media promo

Media promo pairs a single image (or slideshow) with a heading, body copy, and a CTA. It's the workhorse "image-on-one-side, words-on-the-other" block for promoting a program, event, or feature.

When to use it

• Highlighting a flagship event with a photo and a "See details" button.
• Promoting a program (e.g. "Leadership Academy") with an image.
• Pulling the next upcoming event automatically into a featured callout.

What it looks like

Screenshot needed: A live media promo. Save at public/help-images/blocks/media_promo/example.png.

Fields

• Content source — Manual (you write everything) or Upcoming event (the eyebrow, title, body, image, and CTA auto-fill from an event). Pick a specific event or leave on Auto for "next upcoming".
• Image aspect ratio / fit — Aspect: auto (natural ratio), 16:9, 4:3 (default), 1:1, or 3:4. Fit: cover (may crop) or contain (may letterbox).
• Image — A single image used unless you fill in the gallery field.
• Eyebrow tag — A short line above the title (e.g. "Featured event"), with its own Font size (default 14) and Color.
• Title — The main heading, with a Font size (default 32) and Color.
• Body — The supporting copy (a rich-text editor), with a Body font size (default 16).
• Button — Label, URL, Shape (square, round, pill), font size, colors, border, and a Show arrow icon checkbox for a "learn more →" feel.
• Image side — Left, right (default), full_bleed, or background (image fills the section behind the text).
• Image layout — Inset (card-style, rounded corners) or edge (full-bleed split, image fills its half edge to edge).
• Gallery (optional) — When set, the image area becomes an auto-rotating slideshow.
• Alignment — Text alignment within the content side: left (default) or center.

Step-by-step: adding a media promo

1. Click Add, then under the Content category click the Promo thumbnail (Media promo). The block is added and its settings open in the sidebar.
2. In the Content group, set Content source to Manual to write everything yourself, or Upcoming event to auto-fill the eyebrow, title, body, image, and button from a calendar event (then pick an Event or leave it on Auto for the next one).
3. Still in Content (Manual mode), type the Eyebrow tag, Title, and Body. Open the Button group and set the Label and URL; toggle Show arrow icon for a "learn more →" look.
4. In the Media group, click Image and pick or upload your photo. (To rotate several photos as a slideshow, add them to the Gallery field instead.)
5. In the Layout group, set Image side (left, right, full_bleed, or background) and, if the photo looks wrongly cropped, adjust Image aspect ratio (auto, 16:9, 4:3, 1:1, 3:4) and Image fit (cover or contain).
6. Preview on Desktop and Mobile (edge/full-bleed layouts can feel cramped on phones), then Publish.

Gotcha: in Upcoming event mode the eyebrow, title, body, and image fill in automatically — leave those fields blank unless you want to override the event's values.

Screenshot needed: The Add a section panel with the Promo thumbnail highlighted. Save at public/help-images/blocks/media_promo/add-block.png.

Screenshot needed: The image side and aspect ratio fields. Save at public/help-images/blocks/media_promo/image-fields.png.

Tips

• For a clean look, alternate image-left / image-right when you stack two media promos.
• Use the upcoming-event source for evergreen "next event" sections that update themselves.
• Edge layout works best at full screen widths — it can look cramped on mobile if your image is busy.

Gallery

A gallery is a row of evenly-sized images. It can sit still or auto-scroll like a marquee. Use it to show off photos from events, member businesses, or your community.

When to use it

• A photo strip recapping last year's annual gala.
• An auto-scrolling reel of community photos at the bottom of the home page.
• A small grid of partner or sponsor photos.

What it looks like

Screenshot needed: A live gallery (auto-scrolling). Save at public/help-images/blocks/gallery/example.png.

Fields

• Images — Upload or pick images from your asset library. Each image can optionally include a URL — when set, the image becomes a clickable link.
• Images per row — 1 through 6. Default is 4.
• Image width (px) — Blank (default) sizes images evenly by the column count; enter a pixel width to fix the size. Height follows each image's aspect ratio.
• Auto-scroll — Off (default), left, or right. Turns the gallery into a continuous marquee.
• Speed — Slow, medium (default), or fast. Only used when auto-scroll is on.

Step-by-step: adding a gallery

1. Click Add, then under the Content category click the Gallery thumbnail. The block is added and its settings open in the sidebar.
2. In the Images group, click the Images field and upload your photos or pick them from your asset library. You can add several at once; drag them to reorder.
3. In the Display group, set Images per row (1–6, default 4) to match your design. Leave Image width (px) blank to size images evenly by the column count, or set a pixel width to fix it.
4. To make the gallery move on its own, set Auto-scroll to left or right and pick a Speed (slow, medium, fast). Leave it Off for a static grid.
5. Preview across widths, then Publish.

Gotcha: all images share the row height, so mixing tall and wide photos looks uneven. Pick images with similar aspect ratios. Auto-scroll only looks good with eight or more images.

Screenshot needed: The Images field with several photos uploaded. Save at public/help-images/blocks/gallery/images.png.

Tips

• All images use the same height, so pick photos with similar aspect ratios for the cleanest look.
• Auto-scroll feels great with eight or more images; with fewer it just looks twitchy.
• Keep image files under 500 KB each — galleries with big files load slowly.