How to create Gallery in Jupiter
To start creating your Gallery in Jupiter, enable the Visual Composer by clicking the button below the page title. See figure below.
In this topic
We will explain about how to create an Image Gallery to a page or post.
1. Adding Image Gallery to a page or post
To add the Image Gallery shortcode in a page or post to show in front end of the website please follow steps below:
1.1. Add Image Gallery Shortcode
After adding a page, use the Visual Composer tool to add Image Gallery shortcode by clicking on + (plus) icon, and searching for Image Gallery.
1.2. Set Image Gallery Shortcode Settings
After you add the Image Gallery shortcode, a pop up window will appear which you can set options for this shortcode that you can set to fine tune your Image Gallery and add it to the page. Followed is detailed description of each option for Image Gallery shortcode:
1.2.1. Heading Title
This option to set upload or choose an image from the Media Library for the background of Page Section.
1.2.2. Add Images
Use this option to upload or select current images from media library to add as images for the Gallery. Multiple image selection is allowed for this option.
1.2.3. Custom Links
Use this option to add custom links to the Image Gallery. You need to add as many link as there are images in the gallery. Adding custom links will turn the lightbox functionality of gallery to external link and it won’t show the bigger version of the image, and it will link to the URL you set in this option. Use comma “,” to separate between each link, and also add http:// for each URL.
1.2.4. Gallery Style
Use this option to set the style of Image Gallery. Available options are:
- Masonry Style 1
- Masonry Style 2
- Masonry Style 3
1.2.5. How Many Column?
Use this option to set how many columns you want to be in one row for the Image Gallery.
1.2.6. Image Size
This option will be available if you set the style of Image Gallery to Grid in item 4. Use this option to decide about thumbnails of the Image Gallery. Setting Crop and Resize option will activate the bri_thumb plugin and will crop images using PHP code. If you don’t want to have that plugin activated, please select one of other options. Available options are:
- Resize & Crop
- Original Size
- Large Size
- Medium Size
1.2.7. Image Heights
Use this option to set height of images in the gallery.
1.2.8. Hover Scenarios
Use this option to decide how gallery should react when mouse over is happening on the image. Available options are:
- Fade Box
- Slow Zoom
- Overlay Layer
- No Overlay
1.2.9. Overlay Color
Use this option to set the overlay color which will cover the image on mouse over effect.
1.2.10. Item Spacing
Use this option to set spacing between each item. The value for this option is in pixels.
1.2.11. Margin Bottom.
Use this option to add space in bottom section of Image Gallery. This option is useful if you want to have a breathing space between the Image Gallery and following content after it.
1.2.12. Image Frame Style.
Use this option to set a frame style for each of the images in the gallery. Available options are:
- No Frame
- Rounded Frame
- Gray Border Frame
1.2.13. Collection Title.
This title will be replaced with all captions you define in WordPress media. If you just want to give one title for all gallery images you can use this option. Image alt tag will still follow the media section image alt field.
1.2.14. Hover Captions
Enable this option to show caption title on mouse over. This option is disabled by default.
1.2.15. Increase Quality of Image.
Use this option to decide if you want the theme increase the quality of image for Retina screens or not. If you set this option to increase quality, it will prevent browsers to shrink the image to fit the container. Available options are:
- Normal Quality
- Images 2 times bigger (retina compatible)
- Images 3 times bigger (fullwidth row compatible)
Use this option to add pagination functionality for the Image Gallery. This option is for cases that you have too many images and loading of all at once slows down the website.
1.2.17. How many Images per page?
Use this option to set the number of images theme should show on each Image Gallery page. This option can not override the global option in Main Dashboard Menu > Settings > Reading > Posts Per Page.
Use this option to set the pagination style for the Image Gallery. Available options are:
- Classic Pagination Navigation
- Load more button
- Load more on page scroll
Use this option to set the order of slides in the slideshow. Available options are:
- ASC (Ascending Order)
- DESC (Descending Order)
Use this option to set the criteria you want ordering be based upon. Available options are:
- Posts (Manually Selected Posts)
- Menu Order
- Post ID
- Comment Count
- No Order
1.2.21. Extra Class Name.
This is an option which is common among most of shortcodes. If you wish to style particular content element differently, then use this field to add a class name and then refer to it in Custom CSS settings inside Theme Options -> Advanced.
1.2.22. The Ideal Image Size
There is no ideal image size when it comes to gallery image shortcode. It highly depends on the design of your website. But as a general rule of thumb we suggest that you use images with 1140X1000 size, which will show good on lightbox mode.