Image Gallery

Updated on January 22, 2019

Image Gallery shortcode is one of the shortcodes available in The Ken theme which you can take advantage of. To see a live demo of this feature please click here.

Ken Image Gallery Demo 7

Adding Image Gallery to a Page or Post

To add the Image Gallery shortcode onto a page or post to show on the front end of the website please follow steps below:

Add Image Gallery Shortcode

Ken Image Gallery Add Visual Composer

After adding a page, use the Visual Composer tool to add the Image Gallery shortcode by clicking on the (+) icon, and searching for Image Gallery.

Set Image Gallery Shortcode Settings

After you add the Image Gallery shortcode, a pop-up window will appear in which you can adjust the options before adding it to the page. The following is a detailed description of each option for the Image Gallery shortcode:

1Add Images.  

Ken Image Gallery Demo 1

Use this option to upload or select current images from the media library to add as images for the Gallery. Multiple image selection is allowed for this option.

2Style.  

Ken Image Gallery Shortcode Options 1

Use this option to set the style of the Image Gallery. Please click here to see a live demo of each style. Available options are:

  1. Grid
  2. Slider with Thumbnails
  3. Masonry
3Structure.  

This option will be available if you set the style of the Image Gallery to Grid in item 2. Use this option to set the structure of the Image Gallery grid style. Available options are:

  1. Column Base
  2. Scroller

Ken Image Gallery Demo 2

4Image Size.  

This option will be available if you set the style of the Image Gallery to Grid in item 2. Use this option to adjust the thumbnails of the Image Gallery. Setting the Crop and Resize option will activate the bri_thumb plugin and will crop images using the PHP code. If you don’t want to have that plugin activated, please select one of the other options. Available options are:

  1. Resize & Crop
  2. Original Size
  3. Large Size
  4. Medium Size


5How many Columns? 

This option will be available if you set the style of the Image Gallery to Grid in item 2 and the Structure option to Column Base in item 3. Use this option to set the column count for the Image Gallery. You need to keep this count in the 1 to 6 columns range.

6Image Title.  

Ken Image Gallery Options 2

This option will be available if you set the style of the Image Gallery to Grid in item 2. Enable this option if you want to show a title for the images.

7Image Dimension.  

This option will be available if you set the style of the Image Gallery to Grid in item 2 and the Structure option to Scroller in item 3. Use this option to set the dimension of the images. The value of this option will be used both for width and height.

Ken Image Gallery Demo 3

8Image Height.  

This option will be available if you set the style of the Image Gallery to Grid in item 2 and the Structure option to Column Base in item 3. Use this option to set the height of the gallery images.

Ken Image Gallery Demo 4

9Increase Quality of Image.  

This option will be available if you set the style of the Image Gallery to Grid in item 2. Use this option to decide if you want the theme to increase the quality of the image for Retina screens or not. If you set this option to increase quality, it will prevent browsers from shrinking the image to fit the container. Available options are:

  1. No Actions
  2. Images 2 times bigger (retina compatible)
  3. Images 3 times bigger (full width row compatible)

10Preview Image Width.  

Ken Image Gallery Options 3

This option will be available if you set the style of the Image Gallery to Slider with Thumbnails in item 2. Use this option to set the preview image width for the Image Gallery.

11Masonry Style.  

Ken Image Gallery Options 4

This option will be available if you set the style of the Image Gallery to Masonry in item 2. Use this option to set the Masonry style for the image gallery. Available options are:

  1. Style 1
  2. Style 2
  3. Style 3
  4. Style 4

Here is a graphical representation of each style in Masonry mode:

Ken Image Galllery Masonry Style

12Item Spacing.  

This option will be available if you set the style of the Image Gallery to Masonry in item 2. Use this option to set the spacing between each item in Masonry mode. The value for this option is in pixels.

Ken Image Gallery Demo 5

13Margin Bottom.  

Use this option to add a space to the bottom section of the Image Gallery. This option is useful if you want to have a breathing space between the Image Gallery and the content that follows it.

Ken Image Gallery Demo 6

14Extra Class Name.  

This is an option which is common amongst most shortcodes. If you wish to style a particular content element differently, then use this field to add a class name and then refer to it in the Custom CSS settings inside Theme Settings -> Skin -> Custom CSS.

Ken Image Gallery Demo 8

Did this answer your question?