<![CDATA[ [SOLVED] GalleryAlbums and GalleryItem - My Forums]]> https://forums.modx.com/thread/?thread=50605 <![CDATA[Re: [SOLVED] GalleryAlbums and GalleryItem]]> https://forums.modx.com/thread/50605/solved-galleryalbums-and-galleryitem#dis-post-296252 ]]> spitball Nov 12, 2010, 12:02 PM https://forums.modx.com/thread/50605/solved-galleryalbums-and-galleryitem#dis-post-296252 <![CDATA[ [SOLVED] GalleryAlbums and GalleryItem]]> https://forums.modx.com/thread/50605/solved-galleryalbums-and-galleryitem#dis-post-296251
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... wink

<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.]]> boomerang Nov 11, 2010, 06:06 AM https://forums.modx.com/thread/50605/solved-galleryalbums-and-galleryitem#dis-post-296251 <![CDATA[ [SOLVED] GalleryAlbums and GalleryItem]]> https://forums.modx.com/thread/50605/solved-galleryalbums-and-galleryitem#dis-post-296250
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? huh]]> boomerang Nov 06, 2010, 09:55 AM https://forums.modx.com/thread/50605/solved-galleryalbums-and-galleryitem#dis-post-296250