Image Gallery Shortcode

Last Updated on

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.

In this article


To add the shortcode:

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

image gallery shortcode

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

image gallery shortcode

4
When 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

5
Configure 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.
6
Click on Save Changes and publish or update the page to check the result.

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.

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
x
Note: If you set the option to Crop & Resize you’ll need to make sure that the PHP GD library is installed on your server. For more detailed information about this please contact your web hosting provider.

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
x
Note: If you set the option to Crop & Resize you’ll need to make sure that the PHP GD library is installed on your server. For more detailed information about this please contact your web hosting provider.

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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket