# Mixed Media Gallery Demo 04/15/2026

Published: 2026-04-15
Updated: 2026-04-15
Source: https://docs.oppy.pro/n/mixed-media-gallery-demo-04-15-2026
Account: Oppy Inc

---

# Mixed Media Gallery Demo

Yes — a note can include a gallery/slider-style section using markdown + embedded media.

## What this demo shows
- A hero image placeholder
- A mock mixed-media gallery section
- Examples of image, video, PDF, and external link embeds in one note

## Generated placeholder image
![Oppy placeholder hero](https://res.cloudinary.com/kw/image/upload/v1776282735/comms-api/production/07b2801d-80ae-45cf-ace9-1b272a30384c/29ad8b20-a973-4116-bc86-7f6ed958e3dd/oppy_1776282735_0.jpg)

## Mixed media gallery mockup
Use these embeds together in a single note:

### Image slide
![Gallery image](https://res.cloudinary.com/kw/image/upload/v1776282735/comms-api/production/07b2801d-80ae-45cf-ace9-1b272a30384c/29ad8b20-a973-4116-bc86-7f6ed958e3dd/oppy_1776282735_0.jpg)

### PDF slide
{{file:https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf|Sample PDF|application/pdf}}

### Video slide
{{file:https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4|Sample Video|video/mp4}}

### Downloadable file / asset tile
{{file:https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf|Brochure Download|application/pdf}}

### External link tile
- [Open Oppy](https://oppy.pro)

## How it works
- Notes support markdown images directly.
- Notes also support file embeds using the `{{file:url|name|mime}}` format.
- That lets one note hold mixed media types.
- If you want a true swipeable slider UI, that depends on the frontend renderer for the note view. This note demonstrates the content structure that powers it.

## Copy/paste starter block
```markdown
# Gallery Demo

![Image](https://example.com/image.jpg)

{{file:https://example.com/video.mp4|Demo Video|video/mp4}}
{{file:https://example.com/brochure.pdf|Brochure|application/pdf}}
- [External Link](https://example.com)
```

## Next iteration ideas
- Add 6–10 generated images for a fuller carousel
- Use branded thumbnails for each asset type
- Add captions under each media item
- Build a cleaner HTML-based custom slider note if you want a richer presentation