Image Gallery

Image Gallery

The Image Gallery block is used to showcase an image gallery on your website. You just need to add the images and set the order then you’re done. Our Element’s options give full justice to all needs related to it.

You can create amazing gallery layouts with lots of listing, customization, and styling options using this block for WordPress using Gutenberg.

Pro tip
Why not create your own image gallery to your website using this block. You can add multiple images at once with multiple styles. Make sure to add images in the correct order.

How to use the Image Gallery Block of The Plus Addons For Gutenberg

The Image Gallery block comes with different styles and a plethora of customization options using which you can create a stylish looking image gallery for your websites.

Table Of Contents

Setting Up

Gutenberg gives multiple ways to add Image Gallery into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Image Gallery after “/” sign, eg.“/Image Gallery”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Layout

Type

Select your preferred Type for the Media Listing. You can select an image or video as you like.
Images
Videos

Style

Select your preferred Style for the Image Gallery. You will get the option to choose from 4 styles of your image gallery.
Style 1
Style 2
Style 3
Style 4

Layout

Select your preferred Layout for the Image Gallery. You will get three layout options to choose from, which are listed below.
Grid
Masonry
Carousel

Popup Layout

You can either choose the Default Light-box for the popup layout or disable it.

Content

Select Option

Select the option for the content you want to be displayed. You will get two options here:
Normal – Choose this option to create a gallery and add images.
Repeater –
Choose this option to add a Repeater Gallery.

Source

Select a source here. What do you have, YouTube ? Vimeo ? Own a Video ?

YouTube ID

Drop a YouTube video ID in this text box, rest will be done by code. ex. https://www.youtube.com/watch?v=TJ1SDXbij8Y. Bold text is video ID.

Vimeo ID

Drop a Vimeo video ID in this text box, rest will be done by code. ex. https://vimeo.com/27246366. Bold text is video ID.

Upload Mp4 Video

You can upload the video from this option.

Upload Image

You can upload the image from this option.

Content Repeater

Upload Image

You can upload the image from this option.

Title

You can set the title.

Caption

You can set the content.

Category

You can set multiple categories using a comma as a separator.

Select Icon (Icon Type)

Icon type is a selection of whether you want an icon or image or not.

Select Icon

You can select the icon from this option.

Upload Icon Image

You can upload the image from this option.

Link

You can set a link on the icon or image.

Columns Manage

Desktop Column

Set the column you want to display on desktop devices. You will get six-column styles to choose from:
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6

Tablet Column

Set the column you want to display on Tablet devices. You will get six-column styles to choose from:
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6

Mobile Column

Set the column you want to display on Mobile devices. You will get six-column styles to choose from:
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6

Columns Gap/Space Between

Select how much Gap will be there in between the Columns.

Filters

Category Wise Filter

By enabling this option you can see the filter category and filter customization options here.

Select Filter by

You can select filter by an option between category or tag here.

All Filter

By enabling this option you can see all category options here.

All Category Text

Change the custom text of the All Filter default text.

Select Style

Select a style for category filter.

Filter Name

You can set the custom filter name for category style 4 here.

Select Hover Style

Select a style for category filter hover.

Alignment

Set the alignment of your filter to left, right or center.

Extra Options

Display Title

Enable and set the display title here.

Title Tag

Set the title tag here.

Display Image Size

Enable and set the Display Image Size here.

Image Size

Set the Image Size here.

Display Content

By enabling this option, you can see the content.

Box-Link

Enable and set the Box-Link here.

Force Custom URL

Slide to enable force custom URL.

Display Button

By enabling this option, you can see button options.

Button Text

You can set the button text.

Typography

Assign a size, weight, spacing, and much more to fonts.

Color

A color picker to assign a suitable color to the button.

2. Style

The Style tab is used for customizing the appearance of all the Image Gallery block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Popup Icon

Display Icon

By enabling this option, you can see the popup icon option.

Select Icon (Icon Type)

Icon type is a selection of whether you want an icon or image or not.

Select Icon

You can select the icon from this option.

Upload Icon Image

You can upload the image from this option.

Icon Color

A color picker to assign a suitable color to the icon.

Icon Size

You can select the icon size.

Below Space

Set the bottom space between the icon and the box.

Extra Icon

Icon Size

You can select the icon size.

Icon Color

A color picker to assign a suitable color to the icon.

Above Space

Set the top space between the icon and the box.

Below Space

Set the bottom space between the icon and the box.

Title

Typography

Assign a size, weight, spacing, and much more to fonts.

Title Color

A color picker to assign a suitable color to the title.

Above Space

Set the top space between the title and the box.

Below Space

Set the bottom space between the title and the box.

Caption

Typography

Assign a size, weight, spacing, and much more to fonts.

Content Color

A color picker to assign a suitable color to the text.

Above Space

Set the top space between the caption text and the box.

Below Space

Set the bottom space between the caption text and the box.

Content Background

Background

Apply suitable background like color/ gradient to an element.

Featured Image

Image Hover Effect

Select the image hover effect style.

Background

Apply suitable background like color/ gradient to an element.

CSS Filters

You can set the CSS filters effects from this option.

Filter Category

Typography

Assign a size, weight, spacing, and much more to fonts.

Padding

Put-in some inner space to an element.

Margin

Put-in some outer space to an element.

Category Filter Color

A color picker to assign suitable color to the text.

Background

Apply suitable background like color/ gradient to an element.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Count Background

Apply suitable background like color/ gradient to an element.

Category Count Color

A color picker to assign suitable color to the count value.

Count Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Box Loop Background

Box Border

Enable and draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Carousel Options

Slider Mode

Select slide direction of slider from here.

Height Ratio

You can set Hight ratio for vertical layout here.

Columns

Select how many columns you want to have per slide.

Default Slide Active

Select the first slide to display on slider load.

Next Previous

Select if you want to rotate all rows at once or not.

Columns Gap/Space

Put in some space between columns.

Draggable

If slider is draggable, then you can drag any slide to side and see the next one without using arrows for navigation.

Infinite Mode

If slider is in infinite mode, slider will repeat it self after last slide.

Pause on Hover

Slider will stop sliding on mouse hover.

Auto play

If auto play is enabled, slider will be in play state when page load is completed.

Auto play Speed

Slide shifting time for auto play.

Show Dots

Select if you want dots / slide count or not.

Dots Style ⭐

Select dots / slider counter style from here.

Border Color

A color picker to assign suitable color to the border.

Active Border Color

A color picker to assign suitable color to the currently active slide’s border.

Background Color

A color picker to assign suitable color to the background.

Active Background Color

A color picker to assign suitable color to the currently active slide’s background.

Dots Top Margin

Apply space from top in root container from here.

On Hover Dots ⭐

Show dots only on hover.

Show Arrows

Show arrows / slider navigator or not.

Arrows Style ⭐

Select arrows / slider navigator’s Style from here.

Arrows Position⭐

Select arrows / slider navigator’s Position from here.

Background Color

A color picker to assign suitable color to the background of arrows.

Icon Color

A color picker to assign suitable color to the icons of arrows.

Hover Background Color

A color picker to assign suitable color to the background of arrows on hover.

Hover Icon Color

A color picker to assign suitable color to the icons of arrows on hover.

Outer Arrows

Place arrows outside it’s root container or not.

On Hover Arrows ⭐

Show arrows only on hover.

Center Mode

Center mode enables active slide to be shown as visually center or in braced up mode.

Center Padding ⭐

Put-in some inner space to centered slide.

Center Slide Effect ⭐

Choose how you want to make look center slide different from others.

Scale ⭐

Choosing scale would make centre slide look bigger than others. Choose scale for centre & normal slides from below options.

Shadow ⭐

Choosing shadow would create shadow effect on center slide different than others. Apply custom shadow from below option provided.

Normal Slide Opacity ⭐

Apply opacity / transparency for normal slide from here.

Trim Space ⭐

Apply opacity / transparency for normal slide from here.

Fancy Box Options

Button

With this option, you can set more than one Button Icon type for Fancy Box here. Example: Full Screen, Close, etc.

Loop

By enabling this option, you can see the loop option for your feed in the Fancy Box here.

Image counter

By enabling this option, you can see the image-counter option for your feed in the Fancy Box here.

Show Arrows

By enabling this option, you can see the Arrow in the Fancy Box here.

Show Title

By enabling this option, you can see the title in the Fancy Box here.

Transition Effect

Set the All Style Option Of Transition For Fancy Box here.

Transition Duration ( ms )

Set the Transition Duration in millisecond For Fancy Box here.

Animation Effect

Set the All Style Option Of Animation For Fancy Box here.

Animation Duration ( ms )

Set the Animation Duration in millisecond For Fancy Box here.

Post Not Found Options

Padding

Put-in some inner space to an element.

Typography

Assign a size, weight, spacing, and much more to fonts.

Text Color

A color picker to assign suitable color to the text.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Note : ⭐ Symbol as a suffix displays a Pro feature field.
Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.