Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

JetProductGallery: Gallery Grid Block in Gutenberg

From this tutorial, you will learn how to use the Gallery Grid block from the JetProductGallery to display manual input content in the grid layout.

Gallery Grid block from the JetProductGallery allows you to structurize the desirable images in the grid layout on your WordPress site. Let’s find out how to implement it on the Gutenberg-edited page.

Open the page where you want to place the Gallery Grid block. As an example, we will use the manual input images.

General Settings

Add the Gallery Grid block and choose any needed Source. However, we select the “Manual Input” option in our case.

gallery grid general settings

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.

gallery grid adding pictures to 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 “Update Gallery” button.

gallery grid media gallery editor

Under the gallery selection button, check and activate the toggles you need.

Video

With this toggle, you can add a video to the gallery.

gallery grid video settings
  • Video Type — define the video service 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.

Mind to click on the “Select Video Placeholder” button to change the default placeholder image.

Zoom

By enabling this option, you can activate zoom on the gallery pictures.

gallery grid zoom settings
  • Zoom Magnify — adjust zoom value to your needs.

Use this toggle to enable a swipe to proceed to the next picture of the gallery.

gallery grid photoswipe gallery settings
  • Photoswipe Gallery Trigger Type — set the trigger for the photo swipe;
  • Trigger Button Position — define the button’s position if you have chosen it as the trigger. Also, you can pick an icon by clicking the “Select Trigger Button” icon.
  • Show on Hover — enable to display the button on hover.

Images and Advanced Settings

Move on to the following Images tab and adjust Image Size and Columns Number for different devices if needed.

In the Advanced tab, the Additional CSS class(es) field is provided. There you can paste CSS class to style up the block.

gallery grid images and advanced settings

Besides that, you can install the free JetStyleManager plugin to adjust style settings right in the editor.

gallery grid jetstylemanager settings

Update the post and check the result.

gallery grid on the front end

Now you know how to use the Gallery Grid block and adjust its settings according to your needs.