The Photo Albums app is great if you want to organise sets of photos into folders and galleries, or allow your members to upload their own pictures. But if you want to have a more finely curated media gallery on a page of your site then the Related Media Gallery includelet (previously called Related Image Gallery) is your friend.
The includelet can be placed in the main content column or, in a side column, as it is on this page.
It can show a mixture of Images and Videos, from your Assets Library, and you can configure the number of columns in the grid of items.
1. Add the media to your Assets Library
The first thing you need is some Images (or Videos) in your Assets Library. Videos can be YouTube videos or video files you've uploaded. See the Assets page in the Documentation, or go through the Getting Started helpsheet for details of how to do this.
You can add videos too. A YouTube video shows its own thumbnail in the gallery grid, and an uploaded video file shows its first frame. See the Adding videos to your site helpsheet for how to add a YouTube video to your Assets Library.
2. Create the page
Any content page will do. Put it in your Site Map wherever you want it. Save the page (but no need to publish it yet!). If you don't know how to do this, see the Getting Started helpsheet for how to add pages.
Note that the Relations tab won't appear until the page is saved!
3. Relate the required images and videos to the page
See the information on Relations.
Use Add Related Image and Add Related Video on the Relations tab. You can relate as many Images and Videos to your page that you want. And you can reorder them as appropriate.
4. Add the Related Media Gallery includelet
This is the fun bit. Go to the Layout tab and add the Related Media Gallery includelet to the page, in whichever slot you like. I'm using the Left slot for this example.
You can set how many columns you want for the gallery. You probably want about four if you're using the main content column, but just one or two if you're using a side column.
You can also choose to show captions in the gallery:
- Show image title — displays the image title below each thumbnail and in the full-size popup.
- Show image description — displays the asset description in the full-size popup. This is the Description field you fill in when you add or edit an image in the Assets Library.
Save the includelet settings, then go the Publishing tab to preview your page. If it's not quite right go back and tweak the includelet settings and preview again before publishing.