ckeditor_media_gallery
Insert image galleries directly in CKEditor 5: pick any number of images from the media library and place the gallery anywhere in your text, with no extra entities needed.
What editors see in the editor is what the page shows: the gallery widget renders with the exact same template and CSS as the front end. Captions and copyright stay hidden inline and appear only in the fullscreen lightbox, keeping articles clean while preserving attribution.
Features
- A gallery button in CKEditor 5 that opens the core Media Library in multi-select mode; selection order is preserved
- Four display types, switchable per gallery from the widget toolbar: large image with thumbnail strip, masonry grid, carousel, and uniform grid
- Pluggable architecture: display types and lightboxes are YAML-discovered definitions, so modules and themes can register their own without patching
- Fullscreen lightbox via GLightbox (MIT licensed, no commercial license required) showing per-image captions and copyright from configurable media fields
- Responsive images: every image slot accepts either an image style or a responsive image style; the large image renders through a media view mode
- Video support: remote (YouTube/Vimeo) and local videos get a play badge inline and play in the lightbox
- Optional per-gallery heading, drag-and-drop reordering dialog, and an "add images" button on the widget
- Accessible: keyboard navigation for thumbnails and carousel, ARIA labels,
prefers-reduced-motionsupport - Clean storage: one
drupal-galleryelement in the text, rendered by a text filter, so content stays portable and theme-independent
Use it for news articles, blog posts, or any long-form content where editors need photo series at arbitrary positions in the text without switching to a Paragraphs-based body.
Post-Installation
Configuration happens on the text format (Administration » Configuration » Content authoring » Text formats and editors):
- Edit the text format you want galleries in.
- Drag the Image gallery button into the CKEditor 5 toolbar.
- Enable the "Embed image galleries" filter.
- Review the filter settings: allowed media types, default gallery type, image styles (or responsive image styles) for thumbnails, grid and lightbox, the media view mode for the large image, lightbox behavior, and which media fields hold caption and copyright text (defaults:
field_caption,field_copyright).
No new content types, entities or permissions are added. Galleries are edited entirely inside CKEditor: select the widget to switch display type, reorder or remove images, and add more.
Additional Requirements
Drupal core only: CKEditor 5, Media, Media Library, Filter and Editor (all core modules). The GLightbox library is loaded from the jsDelivr CDN by default; to serve it locally, override the glightbox library definition in a theme or module.
Recommended modules/libraries
- Responsive Image (core): enable it to get responsive image style options in the gallery settings
Similar projects
- Media Gallery stores galleries as content entities with their own pages and embeds them by reference. CKEditor Media Gallery stores the gallery inline in the text as a single element, with no extra entities, per-gallery display types, and a front-end-identical preview inside the editor. Use Media Gallery for reusable stand-alone galleries; use this module for editorial galleries that live inside an article.
- Field formatter galleries (slick, splide, juicebox, photoswipe formatters) render a media field and cannot be placed at arbitrary positions inside body text.
Community Documentation
Installation and theming documentation is included in the module's README. Walkthroughs and a demo will be added after the first tagged release.