Creating a composer driven photo gallery page in concrete5

In an earlier video I gave a demo of setting up custom page types in concrete5, with custom attributes, set up for use in the composer. As an extension of this, this video shows how to use a Fileset attribute and a hardcoded List Files From Set block, to automatically output a photo gallery.

Code from the video

Specifically in this video I introduce a few lines of code to hardcode a List Files From Set block into a page template, these are:

// fetch the fileset ID from the page attribute
$filesetid = $c->getAttribute('fileset');

$album = BlockType::getByHandle('list_files_from_set');
$album->controller->fsID = $filesetid;  // tell the hardcoded block what file set ID to use

// not included in the video, this line causes it to order the output by the file set order (you can re-order files in a file set via the dashboard)
$album->controller->fileOrder = 'set_order';

$album->render('templates/thumbnails');  // output the block, using a custom template.

Note the extra line that I didn't include in the video - this is to control the ordering of the output thumbnails. Via File Sets in the Dashboard, you can easily drag and drop the files in the file set to change their order.

Packages used

Both of the packages used in the video are free and available from the concrete5 marketplace:

• Fileset Attribute - (thanks sebastienj!)
• List Files From Set

Adding a lightbox

Our favourite lightbox script is Magnific Popup, it's highly configurable, responsive, lightweight and Sass driven. With this example, once you've linked in it's Javascript and CSS files, the following jQuery should be all you need to enable it: 

$(document).ready(function() { 
 	$('.gallery').each(function() {
  		$(this).magnificPopup({
  			delegate: 'a',
  			type: 'image', 
  			gallery: {
  				enabled: true,
  				navigateByImgClick: true,
  				preload: [0,1] // Will preload 0 - before current, and 1 after the current image
  			}
  		 });
 	}); 
});

This will give you a lightbox that looks like:

The above design pattern in concrete5 is very flexible, and can be extended in a variety of ways with further page attributes, scripts, layouts, etc.

Questions and comments always welcome!

-Ryan