Gallery Types

Modula has 4 gallery types: 

  1. Custom Grid
  2. Creative Gallery
  3. Columns
  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 to have 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. Thumbnail Size: the thumbnail 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 a thumbnail will be displayed at. For a landscape image, this means that when the thumbnail size is set to 500 px, the image will be 500 px wide. For a portrait image, this means that when the thumbnail 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. Thumbnail Size: set the minimum width or height of the thumbnails 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 thumbnail 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 thumbnail 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.

Columns

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

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.

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: 150x150. Crop: true
  2. Medium - Image Size: 300x300. Crop: false
  3. Large - Image Size: 1024x1024. 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. Shuffle images: Use this option to shuffle images on each page load.

Still need help? Contact Us Contact Us