» Mosaic Gallery

An innovative and flexible way to display a series of photos on your website.

This is perfect for a blog, product gallery, scenery shots, or just about any group of photos.

The images are automatically cropped and resized to fit together nicely into a "mosaic" pattern. You have absolute control from the number of columns to the ordering of photos and even the amount of padding in between photos.

It's super easy to use and works with a custom list of photos from your File Manager or an existing file set.

For extra gloss, you can easily link each photo to a larger version (using a lightbox effect) or link to a separate page (using a custom page attribute).

If you ever tried getting the same effect before by manually cropping and resizing photos, you'll realise how much time you can save with this add-on.

Download from the Concrete5 Marketplace ($15)

Features:

  • Works on all browsers (including iPad/iPhone)
  • Choose individual images from the File Manager or a fileset
  • If using large images, a smaller version is dynamically created (with PHP) and cached for maximum performance.
  • Nifty preloading message while images are loading
  • Adjust the overall width and height, or let it work out the best size for you.
  • Control the number of columns
  • Easily tweak the padding gap between photos (or choose to have no gap at all!)
  • 3 available sorting options: best fit, random or in sequence
  • Optionally link each image to a larger version in a lightbox (no page reloads)
  • Alternatively link each image to a separate page (using a custom file attribute)

Tips:

If you know how to create a Facebook tab (it's pretty easy) and you've got hold of The Void theme (free), the Mosaic Gallery is a super cool way of showing a bunch of photos on your business or organisation's Facebook Page. Just use an iFrame to view a page within your C5 website that is skinned with The Void theme, and add your Mosaic Gallery to it. Dead easy!

Examples:

loading images...
loading images...
loading images...

Demonstration Video:

Screenshots