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:
| Setting | Description |
|---|---|
| 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. |
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:
| Setting | Description |
|---|---|
| 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:
| Setting | Description |
|---|---|
| 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:
| Setting | Description |
|---|---|
| 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:
| Setting | Description |
|---|---|
| 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:
| Setting | Description |
|---|---|
| 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:
| Setting | Description |
|---|---|
| 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:
| Setting | Description |
|---|---|
| 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.
