Description
CTC Masonry Gallery creates flowing image collections in the WordPress Gutenberg editor. Version 2.8.0 brings a refined editor, a polished image viewer, and more reliable image loading while preserving the existing gallery features and saved block markup.
Key Features
- Masonry layout: Images retain their proportions and arrange automatically as the gallery resizes.
- Refined editor: A welcoming image-selection state, a live gallery preview, an image count, and a clear Edit gallery action.
- Grouped settings: Layout, Interaction, and Appearance panels keep every existing control easy to find.
- Image viewer: Browse thumbnails, navigate to the first or last image, zoom in or out, and play or pause a slideshow.
- Keyboard access: Open the viewer with Enter or Space; use Left/Right to browse, Up/Down to zoom, and Escape to close. Tab stays within the viewer and focus returns to the selected image on close.
- Hover enlargement: Optionally enlarge images on hover. Hover enlargement and the image viewer remain mutually exclusive.
- Custom shadows: Adjust shadow size and color, including transparency.
- Flexible spacing: Set image width from 1–100% and the gutter from 1–50 pixels.
- Reliable loading: Cached, slow, and failed image loads no longer keep the entire gallery hidden.
- Existing galleries preserved: No migration is needed; the original masonry and viewer libraries remain in the plugin.
What’s Next
Explore my other WordPress projects:
- CTC Gallery 🎨 – Four unique premium galleries block in same plugin
- Gravity Forms Add-ons
- CT Commerce Lite 🛒 – A block-based eCommerce plugin.
Development
`sh
npm ci
npm run build
npm run lint:js
npm run lint:css
`
The src/ directory contains the editable source. Commit the generated build/ assets with source changes so the plugin can be installed without Node.js. The webpack adapter in tooling/ exposes the classes from the existing js-masonry and ctc-gallery-viewer packages; both dependencies and all existing npm scripts are retained.
Screenshots
Blocks
This plugin provides 1 block.
- CTC Masonry Gallery Create a flowing masonry image gallery with hover enlargement and an optional full-screen viewer.
Installation
To install and activate CTC Masonry Gallery:
- Upload the plugin files to the
/wp-content/plugins/masonry-gallerydirectory, or install the plugin through the WordPress plugins screen directly. - Activate the plugin through the ‚Plugins’ screen in WordPress.
- Go to the Post screen and look for the Masonry Gallery block in the Gutenberg section.
- Add the block to your post or page.
- Use Edit gallery to add, remove, or reorder images in the media library.
- Adjust image width and spacing under Layout, choose hover enlargement or the viewer under Interaction, and configure shadows under Appearance.
- Save or publish the post to display the gallery.
To update an existing installation, replace the plugin files with the new release. Existing galleries keep their images and settings.
FAQ
-
Q: How do I adjust the gutter width between images?
-
A: You can adjust the gutter width in the block settings under the Gutenberg editor.
-
Q: Can I customize the modal view?
-
A: Enable Open in image viewer in the Interaction panel. The viewer includes thumbnail navigation, zoom controls, and a slideshow.
-
Q: Where can I get support?
-
A: For support or to report issues, please visit the Support Forum.
Reviews
Contributors & Developers
“CTC Masonry Gallery” is open source software. The following people have contributed to this plugin.
Contributors
Translate “CTC Masonry Gallery” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
2.8.0
- Redesigned the editor with a refined empty state, gallery header, live preview, and collection details.
- Organized all existing controls into Layout, Interaction, and Appearance panels.
- Polished image corners and hover transitions while preserving the enlargement option.
- Refined the existing overlay viewer with responsive controls, thumbnail selection, and a dark backdrop.
- Added keyboard activation, dialog focus handling, accessible control names, and reduced-motion support.
- Improved masonry initialization for cached, slow, and failed images, and fixed full-width layouts.
- Fixed source-library exports so production rebuilds retain both original scripts.
- Preserved saved block markup and existing gallery settings.
- Updated project links and documentation.
2.7.0
- Enhanced gallery display on image load 📥
2.6.0
- Added image box shadow background effect 🖍️
- Added optional image enlargement on hover 🔍
- Added optional display of images in overlay 🖼️
2.5.1
- Minor bug fixes 🐞
2.5.0
- Added JSX support for development 🛠️
- Minified version of JavaScript included ⚡
2.0.0
- Introduced CTC Overlay viewer 🎥
- Added gutter width adjustment option 📏
1.0.0
- Initial stable release 🚀