Developing Gallery Templates

The block controller for Sorcerer's Gallery associates assets such as fancybox and cycle.js with templates through the template name. If the name contains specific keys, the associated asset is loaded.

When developing your own templates, it is therefore essential that you follow this convention so the correct jQuery plugins are loaded.

fancy = Fancybox (lightbox)

cycle = Cycle (slideshow and sliders)

ease = Easing (transitions)

lazy = Unveil (lazy load)

ajax = Blocks by AJAX

You can see these keywords in use in the supplied templates with Sorcerer's Gallery.

Sorcerer's Gallery templates automatically scope css with the template name, so enabling different gallery templates to coexist on the same page. If you copy a template view.php into an override, it will automatically use its own name to insert classes for scope. However, you will also need to edit the associated view.css to use that class for its overall namespace. 

Rather than try and work out what I just wrote, have a look at the view.php and view.css for an existing template.

If you want to create a template that simply formats the thumbnails in a gallery or images in a slider, you don’t need to know any more. 

If you want to start adapting some of the jQuery plugins with different options, these are all in a series of elements loaded by the templates. Within a specific element, a php associative array is used to feed options as JSON into the jQuery plugin. 

For custom templates, you may want to copy/rename the respective element into a root level element and then, in the custom template, edit the element loader to use your new element. You can then experiment safely with any of the options for things like transitions and easing by editing the embedded php associative array of options. 

Please contact me if you are developing templates and need further advice.

Last updated: over a year ago