SB Simple Photo Gallery Block for Gutenberg
| 开发者 | souravws |
|---|---|
| 更新时间 | 2026年5月1日 06:21 |
| 捐献地址: | 去捐款 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 6.9 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
- Grid — Clean, equal-height responsive grid
- Masonry — Pinterest-style columns that respect each image's natural proportions
- Justified — Google Photos-style rows where every image shares the same height and fills the full width
- Mosaic — Featured-image layout with a large hero photo and supporting thumbnails
- Built-in lightbox with smooth prev/next navigation
- Caption support — overlay on hover or below each image
- Adjustable columns (1–6), gap, image height, and border radius
- Wide and full-width block alignment support
- Full keyboard navigation (Arrow keys and Escape)
- Lazy loading for better page performance
- No jQuery — lightweight vanilla JavaScript only
- No external libraries or third-party dependencies
- Translation-ready with full i18n support
- Install and activate the plugin.
- Open any post or page in the Gutenberg editor.
- Click the block inserter (+) and search for SB Simple Photo Gallery.
- Select your images from the WordPress Media Library.
- Choose a layout and adjust settings in the Block sidebar.
- Save and publish.
安装:
- Go to Plugins > Add New in your WordPress admin.
- Search for SB Simple Photo Gallery.
- Click Install Now, then Activate.
- Download the plugin zip file.
- Go to Plugins > Add New > Upload Plugin.
- Upload the zip file and click Install Now.
- Activate the plugin from the Plugins page.
- Upload the
sb-simple-photo-galleryfolder to/wp-content/plugins/. - Activate the plugin through the Plugins menu in WordPress.
屏幕截图:
常见问题:
Which WordPress version is required?
WordPress 6.0 or higher is required. The plugin is built on modern Gutenberg block APIs.
Does it work with my theme?
Yes. The plugin outputs standard semantic HTML and scoped CSS. It has been tested with Twenty Twenty-Four and Twenty Twenty-Five. It should work with any well-coded WordPress theme.
Does it work with the Classic Editor?
No. This is a Gutenberg (Block Editor) plugin. The Classic Editor is not supported.
Does the lightbox work on mobile devices?
Yes. The lightbox supports touch swipe gestures to move between images on mobile and tablet devices.
Why does the Masonry layout briefly appear as a simple column layout?
The Masonry layout uses JavaScript to calculate and position items based on each image's actual dimensions. On first load, a CSS-columns fallback displays while JavaScript initialises. Once images are loaded the layout corrects itself. This is expected behaviour.
Can I show image captions?
Yes. Enable "Show Captions" in the block sidebar and choose between an overlay style (captions appear on hover) or a below-image style.
Is the plugin translation-ready?
Yes. All user-facing strings use WordPress i18n functions (__()) with the sb-simple-photo-gallery text domain.
Will it slow down my website?
No. Images use the browser-native loading="lazy" attribute. The frontend JavaScript is only loaded on pages that contain a gallery block. There are no external HTTP requests, no third-party fonts, and no tracking of any kind.
更新日志:
- Fixed Masonry layout — now uses actual image dimensions for correct aspect ratios and re-layouts after images load
- Fixed Mosaic layout — images now correctly fill their grid cells at all sizes
- Fixed Justified layout — images correctly fill their JS-calculated row heights
- Set Masonry as the default layout for new gallery blocks
- Removed Carousel layout (will return in a future release once stabilised)
- Added Masonry, Justified, and Mosaic layout styles
- Added visual layout picker in the block sidebar with SVG preview icons
- Added lightbox with smooth animation, keyboard navigation, image counter, and captions
- Added ResizeObserver-based responsive relayout for Masonry and Justified
- Frontend JavaScript rewritten as a single unified file (no jQuery)
- Touch swipe support for lightbox on mobile
- Added lightbox with prev/next navigation
- Added caption overlay style (hover reveal)
- Added gap, image height, and border radius controls in the sidebar
- Added wide and full-width block alignment support
- Initial release — responsive grid gallery Gutenberg block