Plugin:
Wonder Grid Gallery, Version 18.6 or above
Tutorial:
When using the Wonder Grid Gallery plugin to create a WordPress gallery, you would normally add images or videos to the gallery through the plugin's gallery editor. This tutorial will guide you on how to add a list of WordPress Media Library IDs to the gallery shortcode, allowing you to use the same gallery setup to create different galleries or to dynamically create galleries using PHP code.
An online demo is below:
Step 1 - Create a Gallery in Wonder Grid Gallery
In Grid Gallery, create a new gallery. You don't need to add any images or videos to the gallery, as we will populate it using media IDs in the shortcode. However, if you do add any images or videos, they will appear at the beginning of the gallery.
If the gallery has categories, define the categories as well.
Step 2 - Add media IDs to the Shortcode
To add media IDs to the gallery, you can add a list of media IDs to the attribute mediaids in the gallery shortcode. The media IDs must be separated by commas, for example:
[wonderplugin_gridgallery id=60 mediaids="4311,4312,4305,4306,4308,4303,4304,4307"]
Extra Feature - Support Categories
If your gallery has categories, define them in the gallery editor. Then, you can add the list of media IDs to a category using the attribute mediaids-categoryslug. For example:
[wonderplugin_gridgallery id=60 mediaids-cat="4311,4312" mediaids-dog="4305,4306,4308,4303,4304,4307"]
Extra Feature - Image Size
In your WordPress dashboard, navigate to the left menu Wonder Grid Gallery -> Settings. There, you will find an option titled "Select the default image size from Media Library for grid thumbnails." By default, when creating the gallery using WordPress media IDs, the plugin will use the image size defined in this option for the images in the grid.
If you want to override this option, you can add the attribute data-mediaimagesize to the gallery shortcode. For example:
[wonderplugin_gridgallery id=60 mediaids="4311,4312,4305,4306,4308,4303,4304,4307" data-mediaimagesize="large"]
The available sizes are thumbnail, medium, large, and full.
Extra Feature - Lightbox
The lightbox option is enabled by default. If you want to disable the lightbox effect, you can add the attribute data-lightbox="false" to the shortcode. For example:
[wonderplugin_gridgallery id=60 mediaids="4311,4312,4305,4306,4308,4303,4304,4307" data-lightbox="false"]
The list of lightbox data options is as follows:
| Data Option | Description |
|---|---|
| data-lightbox | true/false: enable/disable the lightbox effect The default value is true |
| data-lightboxsize | true/false: customise the lightbox size The default value is false |
| data-lightboxwidth | The maximum width of the lightbox The default value is 960 |
| data-lightboxheight | The maximum height of the lightbox The default value is 540 |
