Image Gallery Shortcode

Updated on January 12, 2018

The image gallery shortcode is one of the Ken shortcodes that allows you to add images to grids in many styles. It has different hover effects which you can set when you mouseover the image.

In this article, we’ll explain how to configure the image gallery shortcode.

To see the image shortcode in action, check out the demo page.


Displaying the Image Gallery Shortcode

To add the shortcode:

1Add a new page or edit an existing page.
2From the Visual Composer screen, click on the + button.

image gallery shortcode

3In the Add Element pop-up screen, search for Image Gallery and click on it to be added to the page.

image gallery shortcode

4When the shortcode is added, a new pop-up screen called Image Gallery Settings will open that allows you to configure the shortcode settings.

image gallery shortcode

5Configure the settings as required. More settings are explained in next sections.
SettingDescription

Add Images Upload or select current images from the media library to add as images for the gallery. Multiple image selection is allowed for this option.
6Click on Save Changes and publish or update the page to check the result.

Configuring the Image Gallery Settings

After you’ve added the image gallery shortcode, a pop-up window will appear where you can set the options. Below is a detailed description of each option for the image gallery shortcode.

Configuring the Image Gallery Styling

Please click here to see each style in the live demo. Available styles are: Grid, Masonry and Slider with Thumbnails.

Config the Mansory Style 1 – Highest Padding Added:

You’ll need to config the following options:

SettingDescription

Style Mansory
Mansory Style Style 1
Item Spacing 8px
Hover Scenarios Overlay Layer
Show Zoom Icon Yes
Margin Bottom 120 px

Config the Mansory Style 2 :

You’ll need to config the following options:

SettingDescription

Style Mansory
Mansory Style Style 2
Item Spacing 4px
Hover Scenarios Gradient Layer
Show Zoom Icon Yes
Margin Bottom 120 px

Config the Mansory Style 3 – Lowest Padding Added :

You’ll need to config the following options:

SettingDescription

Style Mansory
Mansory Style Style 3
Item Spacing 1px
Hover Scenarios Overlay Layer
Show Zoom Icon Yes
Margin Bottom 120 px

Config the Mansory Style 3 – Lowest Padding Added :

You’ll need to config the following options:

SettingDescription

Style Mansory
Mansory Style Style 4
Item Spacing 1px
Hover Scenarios Gradient Layer
Show Zoom Icon Yes
Margin Bottom 120 px

Config the Grid style – Column Base :

You’ll need to config the following options:

SettingDescription

Style Grid
Structure Column Base
Image Size Resize & Crop
How Many Columns? You can select 1 – 6 columns
Hover Scenarios Overlay Layer
Show Zoom Icon Yes
Image Title This option will show the Image title added to the Image in WordPress media on Image hover: Yes
Image Height
 120px
Increase Quality Of Image
Images 2 times bigger (retina compatible)
Margin Bottom 120 px

Config the Slider with Thumbnails style :

You’ll need to config the following options:

SettingDescription

Style Slider with Thumbnails
Preview Image Width 1000px
Preview Image Height  350px
Hover Scenarios Overlay Layer
Show Zoom Icon Yes
Margin Bottom 120 px

Config the Grid style – Scroller :

You’ll need to config the following options:

SettingDescription

Style Grid
Structure Scroller
Image Size Resize & Crop
Image Dimension 400px
Hover Scenarios Gradient Layer
Show Zoom Icon Yes
Image Title This option will show the Image title added to the Image in WordPress media on Image hover : Yes
Increase Quality Of Image
Images 2 times bigger (retina compatible)
Margin Bottom 120 px

Configuring the Visibility for Devices

To hide/show the divider for a particular device (mobile, tablet, …), there is a setting in the divider pop-up called Visibility For Devices. Using this setting is easy and straightforward but if you need an step-by-step tutorial, read the Configuring a shortcode’s visibility article.

 Adding an Extra Class Name

The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a stylesheet or JavaScript file.

You can read the Adding a custom CSS class to a shortcode article for further explanation.

Did this answer your question?