Pretty as a picture Image Gallery

By Liam Coltman posted on 13 Nov 2010

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.

  1. Configure an image variety trigger with the appropriate dimensions and settings in the Trigger Manager.
    Trigger configuration for gallery 
    For an example of how to do this view the trigger happy images tutorial
  2. Create an asset listing and give it an appropriate name. (This will be used to list folders that will represent the different galleries)
  3. 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
    Asset listing settings for folders
  4. Edit the default format for the listing and enter the following keywords:
    If you like you can link the thumbnail in the html view by wrapping it in <a href="%asset_url%"> </a>
  5. 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.
  6. 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.
    Triggers fired on a new image
  7. Create a second asset listing that will be used to list the images within the galleries and give it an appropriate name
  8. 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)
  9. Edit the default format and use something like the following code to get the images to display in an appropriate manner:
     <a href="%asset_url%"><img src="./?a=%asset_assetid%:v1" alt="%asset_attribute_alt%"></a> 

    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.
  10. 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.
  11. Acquire the locks and add custom types for Standard Page and Folder, you'll need to make two commits to do this
    Paint layout settings
  12. Expand out the paint layout and edit contents for the Standard Page format
    Asset map structure
  13. Nest in the first asset listing that you created that will be controlling the folders for the gallery
  14. Edit the contents for the Folder format and nest in the second asset listing that you created to print the images
  15. Navigate to the standard page you used to make the gallery and right click, then go to lookup settings
    Assigning paint layouts
  16. 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.

Screenshot of the galleries Screenshot of the inside gallery page

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!


  1. Avatar
    07 Jun 2013 1:00pm Matrix User
    I can't get the thumbnails to crop the image, they seem to be resizing the images.

    If I have tall and wide images I just want to show a 128px square of the image. Is there something that can be done?
Post a new comment Post a new comment

Build your own search

By Ladoo posted on 20 Oct 2011

You can create your own personal Search Page to assist with locating and editing the content you look after. This can be especially helpful in larger systems where quick search becomes less accurate.

Output content to a file

By Ladoo posted on 17 Nov 2011

As well as HTML and text, Matrix can be configured to directly output XML, iCal, RTF and even Word and Excel documents, so that users can directly download and work with these files.

Dynamic Asset Listings

By Liam Coltman posted on 14 Aug 2010

Learn how to make you asset listings dynamic so they can be reused across multiple pages on your site

Comment all you want

By Liam Coltman posted on 08 Sep 2011

Using a combination of an Asset Builder and an Asset Listing in Mysource Matrix can allow you to create a comment area in your website and can be used for blogs.

Trigger happy images

By Liam Coltman posted on 23 Aug 2010

Triggers are a very powerful feature in MySource Matrix. Learn how to set up a trigger to create image varieties

Paint Layouts

By Liam Coltman posted on 06 Mar 2010

The best way to think of a Paint Layout is a Design File for your page content.

News delivered to your doorstep

By Liam Coltman posted on 10 Sep 2010

With users becoming more and more demanding on their news and website updates RSS provides the perfect option to keep readers up to date with what is happening on your site.

Matrix PHP API - Creating Standard Page Assets

By Anton Babushkin posted on 28 Feb 2011

Using the Matrix PHP API can allow you to do more than you previously would have thought possible. This article will teach you how to create Standard Page assets as well as give you some insight into when you could utilize the PHP API in the real world.

Release notes for Matrix 1.2

By Anton Babushkin posted on 16 Jul 2013

You can create your own personal Search Page to assist with locating and editing the content you look after. This can be especially helpful in larger systems where quick search becomes less accurate.


By Ladoo posted on 23 Feb 2012

Most content management systems only offer basic search functionality, and Matrix is no exception.