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 ImagesUpload 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

StyleMansory
Mansory StyleStyle 1
Item Spacing8px
Hover ScenariosOverlay Layer
Show Zoom IconYes
Margin Bottom120 px

Config the Mansory Style 2 :

You’ll need to config the following options:

SettingDescription

StyleMansory
Mansory StyleStyle 2
Item Spacing4px
Hover ScenariosGradient Layer
Show Zoom IconYes
Margin Bottom120 px

Config the Mansory Style 3 – Lowest Padding Added :

You’ll need to config the following options:

SettingDescription

StyleMansory
Mansory StyleStyle 3
Item Spacing1px
Hover ScenariosOverlay Layer
Show Zoom IconYes
Margin Bottom120 px

Config the Mansory Style 3 – Lowest Padding Added :

You’ll need to config the following options:

SettingDescription

StyleMansory
Mansory StyleStyle 4
Item Spacing1px
Hover ScenariosGradient Layer
Show Zoom IconYes
Margin Bottom120 px

Config the Grid style – Column Base :

You’ll need to config the following options:

SettingDescription

StyleGrid
StructureColumn Base
Image SizeResize & Crop
How Many Columns?You can select 1 – 6 columns
Hover ScenariosOverlay Layer
Show Zoom IconYes
Image TitleThis 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 Bottom120 px

Config the Slider with Thumbnails style :

You’ll need to config the following options:

SettingDescription

StyleSlider with Thumbnails
Preview Image Width1000px
Preview Image Height 350px
Hover ScenariosOverlay Layer
Show Zoom IconYes
Margin Bottom120 px

Config the Grid style – Scroller :

You’ll need to config the following options:

SettingDescription

StyleGrid
StructureScroller
Image SizeResize & Crop
Image Dimension400px
Hover ScenariosGradient Layer
Show Zoom IconYes
Image TitleThis 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 Bottom120 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?