Learn how to use the Gallery Grid block from the JetProductGallery to display manual input content in the grid layout.
Before you start, check the tutorial requirements:
- WordPress block editor
- JetProductGallery plugin installed and activated
The Gallery Grid block of the JetProductGallery lets you organize selected images in a grid layout on your WordPress site. In this tutorial, we’ll show you how to add and configure the block on a page built with the Gutenberg editor.
To get started, open the page where you want to insert the Gallery Grid block. For this example, we’ll use manually selected images as the content source.
General Settings
Add the Gallery Grid block and choose the needed SOURCE: “Post Types,” “Manual Select,” or “WooCommerce Products.” In our case, we select the “Manual Select” option.
The “Select Gallery Images” button appears. Click on it and define pictures that will be used in the grid. You can upload images by proceeding to the Upload files tab or pick already uploaded ones from the Media Library.
Besides, in the Edit gallery tab, you can drag and drop images to change their order.
After implementing all the changes, push the “Insert/Update gallery” button.
Video
With the Enable Video toggle, you can add a video to the gallery. It contains such settings:
- VIDEO TYPE — define the video service (“YouTube” or “Vimeo”) or choose the “Self Hosted” option to upload the video;
- YOUTUBE/VIMEO URL — paste the video link or click on the “Select Video” button if you have chosen “Self Hosted” as a VIDEO TYPE.
Click on the “Select Poster” button to change the default placeholder image. It can also be uploaded or selected from the Media Library.
Zoom
By activating the Enable Zoom option, you can activate zoom on the gallery pictures.
- ZOOM MAGNIFY — adjust the zoom value to your needs.
Gallery
Use the Enable Gallery toggle to enable a swipe to proceed to the next picture in the gallery. It activates the Gallery tab with such settings:
- TRIGGER TYPE — set the trigger for the photo swipe. If “Image” is selected, the trigger will be a click on an image from the gallery. If “Button” is selected, it activates such settings:
- Select Button Icon — you can choose an icon from the Media Library or upload it;
- BUTTON POSITION — adjust the button position here;
- Show on Hover — enable to display of the button on hover.
The Controls are available for both trigger types.
Things to know
In the Block Editor, certain features, such as the Gallery or Gallery Slider, don’t have a default icon and won’t be displayed unless an icon is manually set. For example, if you enable a feature but don’t see it, make sure an icon is selected for it. This also applies to video pop-ups — they won’t work without an assigned trigger icon.
Images and Advanced Settings
Move on to the following Images tab and adjust the IMAGE SIZE and COLUMNS NUMBER for different devices as needed.
The Primary Gallery Image, when enabled, displays the first image in the gallery as the main featured image (larger), while the remaining images are shown as smaller thumbnails beside it.
Additionally, you can set the GRID ITEMS COUNT; if its number is less than the number of images in the gallery, the OVERLAY TEXT will appear, which can also be customized.
In the Advanced tab, the ADDITIONAL CSS CLASS(ES) field is provided. Here, you can paste a CSS class to style up the block.
Besides that, you can install the free JetStyleManager plugin to adjust style settings right in the editor. The style settings can be opened by clicking the “paintbrush” icon.
Update the post and check the result on the front end.
That’s all. Now you know how to use the Gallery Grid block of JetProductGallery and adjust its settings according to your needs on your WordPress website.
