Gallery Types

Modula has 4 gallery types: 

1. Custom Grid
2. Creative Gallery
3. Masonry
4. Slider. You can read more about Modula Slider here.
   

Creative Gallery

Modula’s creative gallery uses an intelligent algorithm that organizes and resizes thumbnails to occupy the available gallery space in the most advantageous way. In a way, you could say that our Creative Gallery algorithm has a “brain of its own”. You can’t control the image sizes, shapes, or their arrangement in the grid. However, you can control the gallery’s height as well as the image thumbnail size so you can fine-tune to get super sharp and crisp-looking images. The end result is a surprisingly great-looking gallery. Turn up the random factor to 100 as well as toggle “shuffle images” to ON for a maximum creative effect. On every page refresh, you’ll get a different-looking gallery.

See a live demo here.

1. Gutter: use this slider to adjust the spacing between images in your gallery.
2. Width: width of the gallery. Can be in % or pixels. We recommend having it at 100%. Please note: if your theme doesn’t support full-width templates, setting this value to 100% will not force stretch your gallery beyond the theme’s container’s size. In simpler terms – make sure you can set the container width to 100% before trying to create a full-width gallery.
3. Height: set the height of the gallery in pixels. If the gallery thumbnails are too small increase the value here. We recommend at least 1200 px.
4. Image Size: the image size setting sets the minimum width/height of your images in pixels. We generally recommend setting this to a level of around 500 for the Creative Gallery for the best results. Setting the minimum image size to lower dimensions may reduce image quality. When a gallery is set to creative gallery this option will as it suggests, define the smallest possible size that an image will be displayed at. For a landscape image, this means that when the image size is set to 500 px, the image will be 500 px wide. For a portrait image, this means that when the image size is set to 500 px the image will be 500 px tall.
5. Random factor: toggle this to 0 to tune down the randomizing factor on Modula’s grid algorithm.
6. Max Images Count: using the max images count setting you can limit the number of images that you would like your gallery to display. If you want your gallery to display all of your images, then set this to 0. If set to ‘3’, for example, that will be the number of images displayed in the gallery.
7. Shuffle images: toggle this to ON to have the gallery shuffle on each page load.

Custom Grid

Modula’s custom grid gallery type allows users to freely resize images within your gallery’s container, controlling their heights, widths and aspect ratio. You can create masonry layouts or columns and rows depending on your needs. See a live demo here.

Settings you can find for this type of gallery:

1. Gutter: use this slider to adjust the spacing of images in your gallery.
2. Image Size: set the minimum width or height of the images in pixels. The recommended size for Custom Grid is 150. When a gallery is set to custom grid, images added to your new gallery will (by default) occupy a 2 x 2 square which can be observed when the helper grid is enabled. In this case, the image size setting allows you to choose how big one individual square from the custom grid should be. For example, if you were to set the image size to 300 px and resize images in the custom grid to be as large as 4 x 4 squares, the image will be of size 1200 x 1200 px in size.
3. Max Images Count: using the max images count setting you can limit the number of images that you would like your gallery to display. If you want your gallery to display all of your images, then set this to 0. If set to ‘3’, for example, that will be the number of images displayed in the gallery.

Masonry

1. Column Type: select the grid type. You can choose between: 

• Automatic– will fully fill each row.
• 1 column
• 2 columns
• 3 columns
• 4 columns
• 5 columns
• 6 columns. 

2. Row Height: set the height for each row (in pixels) – you can set this up only when you have Automatic as your column type.

3. Last Row Alignment: Useful when you have an odd number of images and the last row will have less images. You can set this up only when you have Automatic as your column type.

It can be: 

1. Left
2. Center
3. Right
4. Justify. By selecting justify, the last row of pictures will automatically be resized to be full width.

5. Gutter: use this slider to adjust the spacing of images in your gallery. You can add a different gutter for desktop, mobile, and tablet.

6. Width: width of the gallery. Can be in % or pixels.

7. Image Size: select the size of your images. There are various options and you can also choose ‘Custom’ and enter the preferred image dimensions using ‘Image dimensions‘. 

1. Thumbnail– Image Size: 150×150. Crop: true
2. Medium– Image Size: 300×300. Crop: false
3. Large– Image Size: 1024×1024. Crop: false
4. Custom– Add your own image size (Width & Height in pixels)
5. Full– uses the full image

8. Crop Images: if you enable this setting the images will be cropped to have the exact size defined in ‘Image dimensions‘.

9. Max Images Count: use 0 to show all images.

10. Mobile Max Images Count: use 0 to show all images on mobile.

11. Shuffle images: Use this option to shuffle images on each page load.