DeveloperTutorialsGalleries & Images

Image Gallery - Attached Media

Image Gallery - From Attached Media

Populate a custom gallery using images stored in an attached media folder.

Get all images in a Media Folder

An <ss:data:repeater> control acts as a "Foreach Loop", iterating over a set of data, rendering HTML (in this case images).

Set the datasource attribute of the <ss:data:repeater> control to an API call which retrieves media from an "images" folder, located under the current page: \Components\Website\Media::getChildren() 

How to Manage the Gallery

Here are instructions on how to manage your gallery (you'd send this to the client / admin):

  1. Edit the page of your website where the gallery has been implemented. (Go to Dashboard > Website  > Pages to view all your website pages).
  2. Open the "Insert" sidebar item when editing a page, and select "From Media".
  3. Create a new folder called images (must be all lower case letters and spelt correctly, you don't need to create this folder if it already exists).
  4. Once a new folder has been created, click the folder to enter it.
  5. Upload your images into this folder. You can upload multiple files at once.
  6. There is no need to save the page, simply click the "View Online" button to view the image gallery and ensure your images display correctly. Images are ordered alphabetically. 

Implementing the Gallery

As a quick example, copy and paste the following code into the page source of your gallery page:

Share This Tutorial: