← Site Menu
Nonprofit Websites

Installing a Photo Grid

Learn how to install a responsive photo grid, powered by jQuery.

Our platform has a build-in photo grid system. This photo grid takes the content of a photo album or Media Manager folder and organizes it into a grid layout that is optimized for mobile devices.

To install the photo grid, copy and paste the following onto any page or template:

{ #macro run files\widgets:parentid=<FolderID>,widget=FinalTiles}

This will install the photo grid with it's default settings. Clicking on any image will result in the larger image showing up in a lightbox.

Customizing the Photo Grid

You can add the following parameters in the macro after "widget=FinalTiles", separating each parameter with a comma.

  • margin: Sets the margin between the tiles (Default: 10)
  • mintilewidth: Minimum tile width; to get the real width, you must multiply this value by the current image size factor. (Default: 200)
  • gridsize: Images can be vertically cropped to enhance the chance of being aligned on the bottom borders, which usually prevents the gallery from arranging in columns. So a higher value could improve the overall layout, but it will crop images. (Default: 10)
  • allowenlargement: Images can occasionally be enlarged to avoid blank spaces. You can turn this features on or off. If you want to turn it off because of quality loss you could try to use a smaller image size factor. (Default: true)
  • oncomplete: Function to call when the gallery has completed the build.
  • onupdate: Function to call when the gallery has completed adding new items.

You can allow add  CSS classes for different effects by adding the "class=" parameter. Separate the classes by a space (i.e., "effect-fade-out caption-top").

  • effect-fade-out: Fade out the image on mouse hover.
  • effect-dezoom: Zoom out the image on mouse hover.
  • effect-frame: Add an animated rectangle inside the picture.
  • caption-top: Place captions on top of the image.
  • caption-bottom: Place captions on bottom of the image.
  • caption-bg: Add a background to the caption.
  • social-icons-bg: Add a background to the social icons.
  • social-icons-bg-dark.social-icons-bg: Add a background to the social icons.
  • social-icons-right: Place social icons on the right side.
  • social-icons-bottom: Place social icons at bottom.
  • social-icons-circle: Make a circle around each social icon.

Version 1.6 • Last Updated 3/28/2016 8:10:43 AM

Back to Search