Gallery using a collection

matdoidge · Feb 1st 2021

Hi guys,

SO it's been a long time since I did a Perch build and I'm trying to create a gallery using two collections. One for the gallery 'album' and one for the 'photos'. At the moment I have albums as a related item of photos. At first I thought this made sense but upon building it out, it seems janky - I mean the whole thing isn't ideal as managing such a gallery is going to be far from nice.

So I can make albums, assign a thumbnail etc. Then when I upload photos to the 'photos' collection, I can assign them to an album. The trouble I have is getting my head around setting this up correctly. I always get confused with related things in Perch and it's been a while...

I have my albums collection listing output via a simple template, but when it comes to the details page can I fetch the photos that are related to the albums, because the logic is kind of the opposite way - albums are related to photos. So I am not sure using this logic that I can pull the photos I want that are related to my album. Hopefully some code will help demonstrate my ramblings:

Updated code

PHP

$album = perch_collection('Albums', [
// from the gallery listing page, we filter and match against the slug to show the detail of the single album
'filter' => 'album_slug',
'template' => 'gallery/albums/detail',
'match' => 'eq',
'value' => perch_get('s'),
'skip-template' => true,
// 'return-html' => true,
// here is where my logic doens't work. I can see ALL the photos coming back in the code
'each' => function($photos){
//assign our related data 'photos' collection. Each Album has photo(s) related to it.
if(!isset($photos['photos'])) {
$photos['photos'] = perch_collection('Photos', [
'skip-template' => true,
// 'return-html' => true,
'template' => 'gallery/photos/detail',
'filter' => 'album._id',
'match' => 'eq',
'value' => $photos['_id'],
]);
}
return $photos;
},
]);

Display More

This outputs:

Code

Array
(
[0] => Array
(
[_id] => 31
[album_name] => Mats first album
[_title] => Mats first album
[album_slug] => mats-first-album
[album_thumb] => /cms/resources/albums/coast-bg.jpg
[_sortvalue] => 1000
[photos] => Array
(
[0] => Array
(
[_id] => 34
[photo_image] => /cms/resources/photos/coast-bg.jpg
[photo_desc] => This image belongs to album 1 and is image #1
[album] => Array
(
[0] => 31
)
[_sortvalue] => 1001
)
[1] => Array
(
[_id] => 35
[photo_image] => /cms/resources/photos/coast-bg.jpg
[photo_desc] => This image belongs to album 1 and is image #2
[album] => Array
(
[0] => 31
)
[_sortvalue] => 1002
)
[2] => Array
(
[_id] => 36
[photo_image] => /cms/resources/photos/coast-bg.jpg
[photo_desc] => This image belongs to album 1 and is image #3
[album] => Array
(
[0] => 31
)
[_sortvalue] => 1003
)
)
)
)

Display More

It looks as if I am successfully getting the images back that belong to this album. From this data, how can I get these passed into my template for the album collection?

JayW · Feb 3rd 2021

Why have two collections?

Wouldn't it be better to have one collection called "Photo Albums" and within each album item, you'd have any number of images? I know this doesn't answer your question, but I'm curious as to how people are doing photos albums.

Byron Fitzgerald · Feb 3rd 2021

Maybe I've missed something but I think you might be overcomplicating this a bit.

If you have a related field in your 'Album' collection you can use that related field in your template to fetch your 'Photo' collection items.

Code

<h2><perch:content id="title" /></h2>
<div>
<perch:content id="description" type="textarea" html/>
</div>
<section>
<perch:related id="photos" collection="Photos">
<img src="<perch:content id="image" type="image" width="500" crop="false"/>" alt="<perch:content id="alt" />"/>
</perch:related>
</section>

Display More

matdoidge · Feb 6th 2021

Quote from Byron Fitzgerald

Maybe I've missed something but I think you might be overcomplicating this a bit.

If you have a related field in your 'Album' collection you can use that related field in your template to fetch your 'Photo' collection items.

Code



<h2><perch:content id="title" /></h2>

<div>

<perch:content id="description" type="textarea" html/>

</div>



<section>

<perch:related id="photos" collection="Photos">

<img src="<perch:content id="image" type="image" width="500" crop="false"/>" alt="<perch:content id="alt" />"/>

</perch:related>

</section>



Display More

That would be nice, but sadly albums are related to a photo, so when you're adding a photo you can select an album it goes into, That's why I can't just use related tags. I've managed to get the data back into the album but displaying it within a template seems to be a problem. My OP shows the output I get from <perch:showall> but that's only there because I'm passing it back in. For some reason I'm having trouble outputting that into the template.

matdoidge · Feb 6th 2021

Quote from JayW

Why have two collections?

Wouldn't it be better to have one collection called "Photo Albums" and within each album item, you'd have any number of images? I know this doesn't answer your question, but I'm curious as to how people are doing photos albums.

To be honest, I am starting to think this might be the better option now. Either way it isn't particularly nice to manage but I might be able to use a repeater in a single collection and make my life easier.

matdoidge · Feb 8th 2021

I got this working with the information I was fetching and passing back in. I was very close initially. It ended up looking like:

PHP

$album = perch_collection('Albums', [
// from the gallery listing page, we filter and match against the slug to show the detail of the single album
'filter' => 'album_slug',
'template' => 'gallery/albums/detail',
'match' => 'eq',
'value' => perch_get('s'),
// fetch the relationship
'each' => function($photos){
// if there is a photo loop through and apply our photos template and assign it to an ID for albums called 'photos'.
if(!isset($photos['photos'])) {
$photos['photos'] = perch_collection('Photos', [
'template' => 'gallery/photos/detail',
'filter' => 'album._id',
'match' => 'eq',
'value' => $photos['_id'],
], true);
}
return $photos;
},
]);

Display More

I was then able to use photos to inject the data into my album-detail template. Though after working this out, I realised what a pain it is to manage due Perch's inability to allow to set a related field as a column header in the admin panel so there is no easy way to view what album the photo belongs to. I've since opted for a single Collection as JayW mentioned.