Image Block

Image Block displays an uploaded or gallery image with accessible text, optional caption and link, responsive crop controls, shapes, and visual treatment. The live block above uses a real LunaSites media asset rather than a screenshot of the block.

Properties

Properties covers media selection, editorial meaning, inline sizing, grid crop and position, shapes, links, and visual effects.

Image

Upload an image or choose one from Luna Gallery. Use a source large enough for the final frame and avoid enlarging a small asset beyond its useful resolution.

Alt Text (SEO)

Describe the information or purpose conveyed by the image in context. Use empty alt text only when the image is purely decorative and surrounding content already carries the meaning.

Caption

Enable Caption when visible context, attribution, or explanation benefits the reader. Caption text is separate from alt text and should not simply duplicate it.

Link

Add a destination only when clicking the image is expected. Open in a new tab sparingly and make the destination understandable from nearby content or accessible labeling.

Size

Natural, Small, Medium, Large, Content width, and Custom width apply to inline layout. In a section grid, the authored frame supplies the visual dimensions.

Fill and focal point

Fill crops the image to cover its grid frame. Choose desktop, tablet, and mobile focal points so the important subject remains visible as the aspect ratio changes.

[REVIEW] ADD SCREENSHOT

Position and shape

When Fill is off, Image Position controls placement inside the frame. Shape clips the image; Stretch can extend supported non-rectangular shapes to the container width.

Visual treatment

Opacity, Rotation, Dark Overlay, and custom shape data are grid-oriented controls. Use them only when they serve the composition and do not reduce legibility.

Layout

Image is frame-driven in a section and starts at 8 columns by 6 rows. Choose the frame from the intended crop and composition. The demo uses an intentional full-width eight-row frame with one free section row.

Behavior

Fill and focal points determine cropping; Link and Open in New Tab determine navigation; Caption adds visible context. The source must remain renderable in the edit tenant and published site.

Style Panel

The Style Panel exposes one Block target for the image’s outer presentation. Hover background controls are intentionally hidden.

Block

Block contains the supported style controls for the image wrapper. Use it for intentional local treatment and reuse a preset when the same presentation repeats.

Motion

Image supports standard entrance effects. Prefer subtle motion, avoid motion that competes with the subject, and check reduced-motion behavior.

Property summary

• Image — uploaded or gallery media source.

• Alt Text — contextual text alternative.

• Caption and Caption Text — optional visible explanation.

• Link and Open in New Tab — optional navigation.

• Size and Custom Width — inline sizing.

• Fill, focal points, position, shape, and stretch — grid composition.

• Opacity, rotation, and overlay — visual treatment.

• Animation Effects — entrance motion.

Responsive behavior

Set focal points for every breakpoint when Fill is on and the subject could be cropped.

Frame-driven images require manual composition review rather than automatic shrink from natural DOM height.

Check source resolution, crop, caption, link behavior, and overflow at 1440px, 991px, and 375px.

Accessibility

• Write alt text for meaningful imagery and empty alt text for purely decorative imagery.

• Do not repeat the same wording in alt text and caption unless both are genuinely needed.

• Make linked images understandable and keyboard accessible.

• Preserve sufficient contrast when overlays or opacity affect nearby text.

Best practices

• Start with the intended crop and subject, then set focal points before decorative styling.

• Use the highest useful source resolution without uploading wastefully large files.

• Keep shape, rotation, overlay, and motion subordinate to the image’s purpose.

Common mistakes

• Using a screenshot of the Image Block as the live demo.

• Leaving alt text generic, inaccurate, or duplicated from the caption.

• Turning on Fill without checking focal points at narrow widths.

• Upscaling a small source or choosing an arbitrary frame.

• Adding a link when visitors do not expect the image to navigate.

Quick recipe

Add Image to a dedicated section, select a real high-resolution asset, write contextual alt text, decide whether a caption or link is needed, choose Fill and breakpoint focal points, set shape and treatment, then inspect the complete composition at all three breakpoints.