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.
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
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:
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.
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:
- Grid
- Slider with Thumbnails
- Masonry
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:
- Column Base
- Scroller
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:
- Resize & Crop
- Original Size
- Large Size
- Medium Size
If you set this option to Crop & Resize, you 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.
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.
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.
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.
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.
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:
- No Actions
- Images 2 times bigger (retina compatible)
- Images 3 times bigger (full width row compatible)
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.
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:
- Style 1
- Style 2
- Style 3
- Style 4
Here is a graphical representation of each style in Masonry mode:
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.
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.
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.
