Advanced & interactive media blocks
Bento Grid, Before/After Slider, and Ad Embed blocks for mixed layouts, comparisons, and ad placements on ArtInStack pages.
Reference for Page Editor → Advanced blocks that combine Media with layout or third-party embeds.
Core architecture & fields
| Block | Media role | Primary traits |
|---|---|---|
| Bento Grid | Per-cell images from Media | Template, gap, anchor span, aspect ratio, stat/quote cells |
| Before/After Slider | Top + bottom images from Media | Aspect ratio, draggable compare handle |
| Ad Embed | None (iframe placement) | Published ad placement from Settings → Integrations |
Bento Grid
Modular bento-style grid: one large anchor cell plus supporting cells for stats, highlights, testimonials, and secondary images.
Attributes include:
- Template — hero-left, hero-right, hero-top, balanced.
- Gap — tight through spacious spacing between cells.
- Anchor span — 2×2, 2×1, 1×2, or full-width anchor.
- Aspect ratio — grid-level ratio preset.
- Per-cell image pickers (Media) for image cells; text cells for stats, quotes, labels.
Best for: homepage “signature” layouts mixing portfolio stills with social proof.
Before/After Slider
Interactive comparison control: drag handle reveals “after” image over “before.”
Attributes include:
- Top and bottom image slots (Media picker each).
- Aspect ratio for the comparison frame (e.g. 16:9).
Best for: retouching, restoration, renovation, color-grade reveals.
Ad Embed
Secure wrapper for a published ad placement iframe (not raw arbitrary HTML).
Attributes include:
- Ad placement — choose from placements configured under dashboard ad embed settings (zone: page block).
Best for: monetized content zones; see Ad embed placements and Dashboard analytics overview.
System restrictions & guardrails
- Bento Grid cell images are decorative unless you add meaningful alt text on each pick.
- Before/After requires two images with similar framing for a convincing wipe.
- Ad Embed only renders placements in published status; draft placements show the editor placeholder.
Verifying your setup
- Bento anchor cell shows a Media image after save.
- Before/After handle moves in preview and on the live site.
- Ad Embed shows the correct placement or a clear “select placement” hint in the editor.