Back to Documentation

Advanced Image Gallery Block

Select from 3 different layouts when using the Advanced Image Gallery block


Blockons offers a more advanced Image Gallery block for you to build your website pages with… Packed with 3 different layouts and lots of customization options, the Advanced Image Gallery block is perfect for displaying your website images.

Example:

This Gallery example is using the Featured Grid layout with a hover effect to display the caption if the image has a caption set, and it also has the “Zoom Long” effect when hovered over the images.

Adding the Advanced Gallery block

Adding the Advanced Image Gallery block is as simple as selecting to add a new block to the page, and in the popup search section, search for “gallery”, “image” or “advanced” and you should then see it, and click the block to be added.

Blockons - adding the Advanced Image Gallery block
Adding the Advanced Image Gallery block

The other option is to open the blocks (left) sidebar by selecting the blue plus icon in the top left of the Gutenberg editor, then scroll for to the “Blockons Blocks” category section and then click the Advanced Image Gallery block there, to add it to the page.

Adding the Advanced Image Gallery block from the blocks sidebar
Adding the Advanced Image Gallery block from the blocks sidebar

Editing the Advanced Image Gallery block

To setup and start editing your Advanced Image Gallery block, you need to first add the block and then click the “Create Image Gallery” button.

Blockons - Create Image Gallery
Blockons – Create Image Gallery

Once you select and add all your images, you will only then be able to see and edit all the other settings available for the Advanced Image Gallery block.

After adding the images to the gallery, you will also see the option to “Add or Edit the images” in the gallery, and to remove images from the gallery you can simply click the X button which is placed on each image.

Editing the advanced image gallery block
Editing the advanced image gallery block

3 Different Layouts

The Advanced Image Gallery block offers 3 different gallery layouts to choose from… Select the layout you’d prefer to use and then you can edit the rest of the settings such as the amount of columns and the spacing between the images.

Normal Grid Layout

Blockons Advanced Image Gallery - Normal gallery layout

Masonry Grid Layout

Blockons Advanced Image Gallery - Masonry gallery layout

Featured Grid Layout

Blockons Advanced Image Gallery - Featured Grid gallery layout

These grid layouts will scale down to tablet and mobile to ensure all your images look good on smaller screen sizes too!

Once you’ve selected your grid layout and adjusted the columns and grid spacing, you can then move on to the settings to display the image captions and/or add image hover over effects.

Using the Image Caption

To display the image captions in the Advanced Image Gallery Block, you need to select to upload your image and then under the Attachment Details section you will find the Caption input to add any text over the image… This is done per image.

Blockons - Using the Image Caption in the gallery
Adding the image caption

The image captions will only display on images where the captions have been added, so you don’t have to add a caption for every image if it’s not needed.

There are 6 different layouts for the image captions, you can go through them in the settings to find out how each one works.

The image below displays all the caption layouts and Image Hover effects available.

Advanced Image Gallery Image settings
Advanced Image Gallery Image settings

Try out each of the Image hover effects and see if you want to use any of them too.

If something does not work, you have new feature ideas for the Advanced Image Gallery block, or you simply need help using this gallery block, then please get in touch and we’ll assist as best as we can.