Pleth recently had a customer approach us to build a site which would allow them to easily update photos of their work. I have used colorbox on a couple of sites lately and have found it easy to work with and it’s presentation of images is very appealing. Now, my task was to create the output necessary to hand off an image, a thumbnail and a caption to the jQuery plugin. This must be accomplished in a way that is quick and easy for an end user to complete these tasks. That’s where MODx, particularly Ditto, ManagerManager and get_fck_thumb, come into play.
ManagerManager
In this scenario you can create a MODx template and use ManagerManager to hide all of the unnecessary fields associated with that template. What I was left with was a pagetitle field, an image upload field and category checkboxes (see below).
For the purpose of this example you can ignore the category checkboxes, this previous post explains their use in a cross-categorization technique. To create your galleries just create a new document (the pagetitle becomes the caption) and upload your image(s).
Ditto & get_fck_thumb
Now that we have groups of documents with pagetitles and images uploaded we can use a Ditto TPL to create the necessary output.
This was my Ditto call:
[[Ditto? &startID=`[[UltimateParent? &topLevel=`0`]]` &id=`gallery` &depth=`2` &hideFolders=`1` &tpl=`galleryTPL` &filter=`galleryCats,[*id*],7`]]
As I mentioned previously, I am using a cross-categorization technique here. That is why I am searching through all of my documents, excluding folders and filtering by IDs. If cross-categorization were not necessary I can imagine you would use a slightly simpler Ditto call here.
The next step is to create a galleryTPL chunk that will provide the format of the output.
My galleryTPL chunk:
<a href="[+galleryImage+]" rel="gallery" title="[+pagetitle+]" border="0"><img src="[[get_fck_thumb? &image=`[+galleryImage+]`]]" alt="[+pagetitle+]" /></a>
As you may have noticed, this is where I us the get_fck_thumb snippet. This utilizes the thumbnail image that is created when uploading through the FCKeditor.
By pulling these components together, MODx and a few snippets allow you to create a site with photo galleries that are easy manage and to update. You can see the galleries in action here.
