Note: this article is in English because Modx is an internationally used framework. If you go to our main-website you will notice we are a Dutch-speaking company, so comments in Dutch are also welcome.
Target: How to create an albumlist on a webpage and by clicking on an album showing the thumbs inside that album. When clicked on a thumb inside the album the picture is shown with a lightbox.
The Modx Docs about the Extra 'Gallery' is not always very clear and is missing some good examples, so here is our solution within Modx Revolution.
The first thing to do is installing the extra 'Gallery' from the pakket-manager. Then you make some albums inside the component Gallery and put some pics inside each album. I assume everybody knows how to do this, so I will not go further in detail on this.
Gallery comes packaged with 3 snippets - one called "Gallery", which displays a gallery from either an Album, a Tag, or both; a snippet called "GalleryAlbums", which displays a list of Albums; and a snippet called "GalleryItem", which displays a single Gallery Item.
We are using 2 of them to get the job done: "Gallery" and "GalleryAlbums".
Step 1: creating a template for the overview of the albums
We create a template called 'album-overview'. You can call it whatever you prefer.
Inside that template and inside your html-code we call the snippet GalleryAlbums:
[[!GalleryAlbums? &rowTpl=`rowTpl` &toPlaceholder=`galleries` &prominentOnly=`0`]] <div class="css-wrapper">[[+galleries]]</div>
Let's explain this a little bit:
- the "rowTpl" is used to setup how to display each thumb of the album
- the "toPlaceholder" is used to output the albums
- "prominentOnly" must be set to 0 to show the albums, this is sometimes forgotten and can lead to frustration why the albums are not displayed.
Because we will use this template (album-overview) to show the albums, we also put the placeholder inside it:
How you wrap the overview is up to you. You can also use an ul / li. In this example I use a div with the class "css-wrapper".
Then we create a chunck called "rowTpl", where we will setup each thumb of the album. In our case we have something like this:
<div class="span3 item"> <a class="preview" href="[[~24]]?[[+albumRequestVar]]=[[+id]]" title="[[+name]]"> <img src="[[+image]]&w=320&h=240&zc=1" alt="[[+name]]"> </a> <h4>[[+showName:notempty=`[[+name]]`]]</h4> </div>
Again, the html/css code is up to you. With the "albumRequestVar" we call the correct album. This is an important item in the process.
The [ [~24] ] is the child page id of the main-page we will build later on. So this number will be different in your configuration.
Also notice that we use phpthumb to display the image in a smaller format. This can be done in many ways and I refer to the Modx documentation for this.
Now create a page inside your context and let it point to the template 'album-overview'.
If you go look on the page, then you wil have an overview of your albums. Now we want to click on the album and see all the pics inside it.
Step 2: creating the pics inside an album and make them popping up with a lightbox.
Again we create a template, this time I call it 'album-detail'. You can call it whatever you prefer.
This time I call upon the snippet "Gallery", again inside your html-code:
[[!Gallery? &toPlaceholder=`gallery` &thumbTpl=`rowTpl2` &thumbWidth=`200` &thumbHeight=`160` &thumbQuality=`80`]] <div class="row"> <div class="text-title"> <h3>[[*longtitle]]</h3> <div><h4>[[+gallery.description]]</h4></div> <a href="[[~[[*parent]]]]"><button type="button" class="btn">back to overview</button></a> </div> <div class="css-wrapper"> [[+gallery]] </div> </div>
Let's explain this a little bit:
- Again we are using a placeholder to output the pics
- The "thumbTpl" is used to setup how to display each thumb of the album-pic, this is where we will also call upon the lightbox
- We use the properties of the Gallery snipped to setup the thumbs height, width and quality. (take a look at http://rtfm.modx.com/extras/revo/gallery/gallery.gallery to see al the properties)
Then we are using again some html/css code to display the gallery.
Now we create a chunk called 'rowTpl2', to setup the view of a single image.
<div class="span2 item2"> <a class="preview" href="[[+image_absolute]]" title=" " rel="prettyphoto[pp_gal]"> <img src="[[+thumbnail]]" alt=" " class="img-rounded"> </a> </div>
Again, the html/css code is up to you. Notice that we use Prettyphoto as lightbox, so don't forget to load the library you are using. More information about Prettyphoto can be found here: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
You can also fill in the title and the alt if you like.
The last thing we have to do is create a child-page of the main-page (with your album-overview on).
Point this page to the template 'album-detail'. Use the id of this page in the code above ([ [~24] ]).
And this is it! You can see a result here.
Off course you can do a lot more stuff with Gallery, but this case is something many people use I suppose.
I never found a good explanation how to do this, so I created my own.