[SOLVED] GalleryAlbums and GalleryItem

I’m using galleryalbum on one page to set up a directory for between 4 and 6 different galleries which link to a ’display page’.

On the gallery page I am running the [[!GalleryAlbums]] snippet using the following modified GalAlbumRowTpl chunk

<div class="albumList">
<p><a href="[[~17]]?[[+albumRequestVar]]=[[+id]]">
[[+name]]</a>

[[+description]]</p>
</div>

This displays the list of albums but I would like to add the first image of each album as a link to the resource id 17 which runs the [[!Gallery]] snippet then displays the respective gallery.

I have tried using the [[!GalleryItem]] snippet and do achieve a certain amount of success if I add the &id=`78` property but it only calls the same image for each link and I want the first image of each gallery.

Any suggests how this can be achieved?

After a lot of trial and error managed to achieve what I wanted using both the Gallery snippet and GalleryAlbums snippet.

This was my call on the gallery selection page

<p>You will find here a selection of photos taken at past productions performed by members of the West London Opera.</p>
<p>We hope you will enjoy looking at them.</p>

[[Gallery? &tag=`poster`]]
<div id="albumNames">
[[GalleryAlbums? &rowTpl=`myChunk`]]
</div>

This then links to a page which displays the relevant gallery from the GalleryAlbums list.

I used the following chunks - galAlbumRowTpl

UPDATE: if you use the built in chunks when you run any updates these will be overwritten, so its best to duplicate and make your own chunks! Use the call &rowTpl=`` with GalleryAlbum snippet. Learnt this one the hard way...

<div class="albumList">
<ul>
<li><a href="[[~17]]?[[+albumRequestVar]]=[[+id]]">
[[+name]]</a>

Production date: [[+description]]</li>
</ul>
</div>

and the galItemThumb chunk

<div class="[[+cls]]">
<a href="[[+linkToImage:if=`[[+linkToImage]]`:is=`1`:then=`[[+image]]`:else=`[[~[[*id]]]]?[[+imageGetParam]]=[[+id]]&[[+albumRequestVar]]=[[+album]]`]]">
<img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" />
</a>
</div>

I then styled using CSS as follows:

#content .gal-item {
float: left;
width: 120px;
height: 160px;
padding: 5px;
margin: 20px 20px 0 20px;
border: 4px ridge #777;
text-align: center;
opacity: 1;
}
#content .gal-item a:hover {
cursor: none;
}
.albumList a {
text-decoration: none;
font-variant: small-caps;
color: #a6121c;
}
.albumList a:hover {
color: #a6121c;
font-weight: bold;
}
.gal-item img {
margin-top: 5px;
}
.albumList {
width: 120px;
float: left;
padding: 0 20px;
margin: 0 10px;
text-align: center;
}
#albumNames {
float: left;
width: 600px;
margin-top: -70px;
}

The site is still underdevelopment but please take a look at finished product at westlondonopera.crimsonpixel.co.uk/gallery

Hope this helps someone else.

I think this is exactly what I’ve been trying to figure out... will keep you posted. Many thanks!! your examples will be of help for certain!!