Already have an account? Login Button

2
1
image-gall
Beginner

List all images in a folder and open individual images in a page

This Tutorial shows how to create a list of images that are in a Folder (or any asset). When clicking on an image it displays that image on it's own page. The idea from this tutorial came from the forum post http://bit.ly/ppJflz

By Dave Letorey
Like Tutorial

This tutorial uses the following assets:

  • A folder
  • Images in the folder, each with a caption and 2 varieties (thumb and display). The varieties can be added with a trigger
  • A paint Layout with a folder type format
  • 2 Asset lists, both with an Image type format

Create a Trigger

A trigger can be added to automatically create 2 varieties of your images one called thumb (120px wide) and the other called display (250px wide). Click here to see how to create the trigger

Create a folder

In the demo I have also created a standard page (to act as a folder) as the demos in this site require a page to work.

Upload Images to the folder

I've also linked the images into the Standard page

Create an Asset List called List Image

This Asset list will display the image that has been selected

Asset list settings

Details Screen
  • Asset Types to List: Image
  • Root Nodes: Section of site that contains the folder you want to show the images from
  • Direct Links Only: No
  • Minimum Depth/Height: 0
  • Maximum Depth/Height: 0
  • Dynamic Parameters:
    •   Paramter: Replacement Root Node for Listing
    •   GET Variable Name: image - this GET variable will be passed from the other asset listing
Display Formats Screen

Create an Image Type Format

Code for Image Type Format
<p><br />
<strong>Caption:</strong>
</p>

Create an Asset List called List Images

This Asset list will display all the images beneath the asset being viewed

Asset list settings

Details Screen
  • Asset Types to List: Image
  • Root Nodes: Section of site that contains the folder you want to show the images from
  • Direct Links Only: Yes
  • Dynamic Parameters:
    •   Paramter: Replacement Root Node for Listing
    •   Current Asset: Asset ID
Display Formats Screen

Create an Image Type Format

Code for Image Type Format
<p>
<a href="./?a=[Asset ID of List Image Asset List]?image=3518"></a>
<br />

</p>

Create a Paint Layout

This Paint Layout will be applied to the Folder and will will display a list of images inside the folder.

Paint Layout settings

Details Screen
  • Custom Asset Types: Folder
Folder Type Format

Create a Nest Content div. In the Nest Content div nest the List Images asset List

Apply the Paint Layout to the section of the site you want to display images that are in folders.

Tutorial Feedback

There is currently 2 comments.

Great Tutorial, thanks!

This was perfect and solved my problem for me. I just changed one thing instead of setting the Dynamic Parameter as 'replacement root node for listing' for the 'List Image' asset list (the one that displays just a single image) I had to set it to 'Array of specific asset IDs...'. Then it worked a treat.%0A%0AI have an old version of matrix (Still MySource%2C not sure which version) so that might have been why I needed to make this change.

Kirsten Gottschalk ()

Thanks!

Instead of image%3D3518 there should probably be image%3D%5Bimage_assetid%5D%2C but anyone who look in the code will see it.

Paweł Wojciechowski ()

Add Your Feedback

You must be logged in to leave a comment. You can sign-up for free!