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.

Click the button to enable/disable the visual composer.

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

image-gallery-1

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

full-width-gallery

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

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:

  1. Grid
  2. Masonry Style 1
  3. Masonry Style 2
  4. 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.

masonry-styles

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:

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

Beware! GD Library Warning:

If you set this option to Crop & Resize you need to make sure that PHP GD libarary is installed on your server. For more detailed information about this please contact your web hosting provider.

1.2.7. Image Heights

Use this option to set height of images in the gallery.

image-heights

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:

  1. Fade Box
  2. Slow Zoom
  3. Overlay Layer
  4. 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.

item-spacing

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:

  1. No Frame
  2. Grid
  3. Rounded Frame
  4. Gray Border Frame
image-frame-style

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.

collection-title

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:

  1. Normal Quality
  2. Images 2 times bigger (retina compatible)
  3. Images 3 times bigger (fullwidth row compatible)
image-quality

1.2.16. Pagination

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.

images-per-page

1.2.18.Pagination Style.

Use this option to set the pagination style for the Image Gallery. Available options are:

  1. Classic Pagination Navigation
  2. Load more button
  3. Load more on page scroll

1.2.19.Order.

Use this option to set the order of slides in the slideshow. Available options are:

  1. ASC (Ascending Order)
  2. DESC (Descending Order)

1.2.20. Orderby.

Use this option to set the criteria you want ordering be based upon. Available options are:

  1. Date
  2. Posts (Manually Selected Posts)
  3. Menu Order
  4. Post ID
  5. Title
  6. Comment Count
  7. Ransom
  8. Author
  9.  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.

class-name

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.

0