Docs › Images and media
Photo groups
Several photos in a 2 or 3 column grid or a swipeable slider.
Put several photos side by side, or in a row readers swipe through. Useful for reviews, product photos and travel posts.
Try it
Click a photo group to get its bar, then switch between 2 columns, 3 columns and slider.
Put the caret in a paragraph with two or more photos, like the one below, and pick 3 columns from the photo group menu to group them.
Code for this demo
createEditor('#editor', {
toolbar: 'image gallery | undo redo',
height: 420,
uploadImage: async (file) => URL.createObjectURL(file),
});Making one
Pick a layout from Photo group (gallery) on the toolbar.
- If the caret's paragraph holds two or more photos, they become one group. A linked photo goes in without its link.
- Otherwise the file picker opens and the chosen photos go in as a new group, replacing an empty paragraph or after the current one.
| Layout | Value | Looks like |
|---|---|---|
| 2 columns | '2' | Two-column grid, photos cropped to 4:3 |
| 3 columns | '3' | Three-column grid, photos cropped to 1:1 |
| Slider | 'slide' | One photo at a time, swipe sideways (scroll-snap), whole photo inside 4:3 |
The group bar
Click a photo in a group for its bar: 2 columns / 3 columns / slider, alternative text, add photos (at the end), delete image, and ungroup (back to one paragraph). Deleting the last photo removes the group.
Where it is
gallery is in the ⋯ more menu of the board and full presets. Add it to toolbar yourself otherwise.
Saved HTML
<div data-gallery="2" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0.8em 0">
<img src="/files/a.jpg" alt="" style="width: 100%; aspect-ratio: 4 / 3; object-fit: cover">
<img src="/files/b.jpg" alt="" style="width: 100%; aspect-ratio: 4 / 3; object-fit: cover">
</div>
<div data-gallery="slide" style="display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0.8em 0">…</div>Grid and slider are plain inline CSS: the view page needs no script or editor CSS, and phones can swipe the slider.
From code: editor.exec('gallery', '3'). Inside a group, 'add' adds photos and '' ungroups.
Options
| Name | Type | Default | Description |
|---|---|---|---|
gallery | toolbar item | 2 columns / 3 columns / slider; inside a group also add photos and ungroup. | |
uploadImage / uploadUrl | Photos added to groups are uploaded this way. | ||
imageAccept | string | 'image/*,.heic,.heif' | Photo types that can be chosen. |