What's the most elegant way to create a photo album with an album cover?

porsheaxoxo · 2020-12-09T16:12:23.015Z

Hello, I’m trying to create a “photo album” which is a list of files that will be displayed in a repeating group. I want to have an album with the “album cover” being the first image of the album, or else maybe a selected file from the list.

The problem that I’m having is that I can’t get the first item from the album to display on the page.

I have a repeating group on the page with my list of albums and I want the albums to display one of the pictures as an album cover. How might I accomplish this?

Here is the repeating group with the list of “My Albums” displayed.

Screen Shot 2020-12-09 at 8.08.52 AM953×398 30.9 KB

This is what I tried with the first item list of files displaying as an image.

Screen Shot 2020-12-09 at 8.10.17 AM886×348 27.4 KB

The title displays, but not the first item.
Screen Shot 2020-12-09 at 8.11.21 AM

I can’t seem to find the answer in the forum. Thanks!

boston85719 · 2020-12-09T16:40:54.794Z

Seems like you are trying to create the same kind of feature that Facebook has, where you can see all of your ‘albums’ with an image to represent that album, plus maybe some descriptor text and if a user clicks on that image, all the images from that album will be displayed.

There is a lot more to this in terms of making it as smooth and elegant as possible and you should look into ‘one page apps’ or ‘stackable groups’ or ‘collapsible groups’ to find the ways to make it as elegant as possible.

But in terms of the album cover and related images; and keep in mind there are a lot of different ways to do this, but here is one…

You will have one repeating group on the page which has a datasource set to the data type you have in your database for photoalbums.

Then in that repeating group put an image element. Set the source to 'current cells photo album first image, so you will display the first image of that photo album.

Then when a user clicks on the image trigger a workflow to either hide that repeating group and show another repeating group with datasource set to the selected album image list with a type image or change the repeating group datasource with a condition to show the selected album image list.

I have a suspicion that you may not have your database set up correctly to do this though.

What is your current database structure for photo albums and images?

porsheaxoxo · 2020-12-09T17:01:16.824Z

Thanks! I currently have the photos set as a list of files because the “multi-file uploader” from Dropzone (free plug-in) only uploads images as files if I am correct. The actual albums, themselves are a title field, description field, and a list of files for the images. I’m not sure how to get the files to upload directly as images instead of files, which could be throwing this off.

Edit: Thanks for the tips, I look into those options (stackable groups and collapsible groups).

boston85719 · 2020-12-09T17:04:15.217Z

How to upload multiple images Tips

Usually after I spend way to much time searching for answers to things I find a need to post how to do it so that future bubblers can avoid the headache. First install the bubble plugin for multifile uploads [10%20AM] After that place the element on the page. You can edit the design a bit. I made it “invisible” so that I could have a custom design for user experience [27%20AM] [26%20AM] I accomplished by placing a group “on top” of the multifile upload element…however you must “bring to …

porsheaxoxo · 2020-12-09T18:12:01.143Z

I appreciate this so much, I’m going to give this a try and then report back!

system · 2021-02-17T16:12:25.774Z

This topic was automatically closed after 70 days. New replies are no longer allowed.