What is it?
Functionality: Site specific (can be used globally)
Assets used: Asset listings, Paint layout, Trigger
Using a combination of triggers, paint layouts and asset listings MySource Matrix can produce a stylish image gallery that takes little effort to keep up to date. The following tutorial will explain how this can be achieved.
- Configure an image variety trigger with the appropriate dimensions and settings in the Trigger Manager.
For an example of how to do this view the trigger happy images tutorial
- Create an asset listing and give it an appropriate name. (This will be used to list folders that will represent the different galleries)
- Acquire the locks and change the asset types to list to folder and set direct links to yes. Since this will be nested into a paint layout we also need to set the Dynamic Parameters to Replacement Root node and Current Asset (Asset ID). Commit the changes
- Edit the default format for the listing and enter the following keywords:
- Create a standard page that will represent the top page of the image gallery that users will view and then create several new image gallery folders under this.
- Test your image variety trigger by uploading a new image under one of these folders and expanding it to see if it there are varieties being created underneath. If there aren't take the time now to configure the trigger so that it works correctly. Once it is confirmed it is working correctly you can continue to upload as many images and create as many galleries as you like. You may like to use the bulk import tool or the bulk import script to speed up the process.
- Create a second asset listing that will be used to list the images within the galleries and give it an appropriate name
- Acquire the locks and set asset type to list to image, set the root node to the appropriate site level, direct links to yes and set the replacement root node to Current Asset assetid (this will change the root node to the folder the user is viewing)
- Edit the default format and use something like the following code to get the images to display in an appropriate manner:
The v1 is a reference to the first image variety for the current image being listed, you can set this to any of the varieties so you can display the appropriate size.
- Create a new paint layout and give it an appropriate name, this will be used to control how your initial standard page and your folders that are containing the images will display.
- Acquire the locks and add custom types for Standard Page and Folder, you'll need to make two commits to do this
- Expand out the paint layout and edit contents for the Standard Page format
- Nest in the first asset listing that you created that will be controlling the folders for the gallery
- Edit the contents for the Folder format and nest in the second asset listing that you created to print the images
- Navigate to the standard page you used to make the gallery and right click, then go to lookup settings
- Acquire the locks then change the paint layout to the one that you've created. This will cascade over the folders as well as the standard page and should work when you preview either the standard page or any of the folders.
Now that you have the basics down pat try adding some CSS styling to the gallery to make it look a little more refined. You can also add some JS like the colorbox plugin for jquery that will allow you to popup images in a lightbox. It might also be useful to use the %asset_attribute_caption% keyword to your image listing to give some more detail about the image, play around with the keywords and see what you can create!