Multiple Image Gallery Card / Grid View

Hey there! Recently discovered that we can have an image picker for multiple images stored in 1 row and have this display as a slider.

I was wondering if there could be a future option to display this as a grid or as cards?

My use case:

I’m building a digital wardrobe app. When you click a piece of clothing you can view a bunch of information about it. In addition to this, there are 2 card collections. One for additional item photos (product photos for example) and one for photos of the person wearing that item of clothing.

Currently, I have to store these in separate tables in order to have these be a grid/gallery which for right now is okay, but for future proofing it’s not ideal as that would be A LOT of rows if I add additional photos for every wardrobe item.

I can’t seem to find a way to display an image array or multiple image column in card format. Would be a really great feature so that all of the photos live in a single row!!

There is a workaround to get what you want.
You need a helper table with enough rows to cover the maximum number of images you’d expect to store in a single row in a multiple images column.

To set it up:

  • In your User Profile row, create a Single Value column that addresses first->whole row of your Helper Table
  • In your Helper Table, number your rows starting at zero (see here)
  • Add a User Specific Text column. This will store the RowID of the row you are currently viewing.
  • Add a Single Value column that applies the previous column to all rows.
  • Add a Single Relation column that matches the Single Value column with the RowID in your Wardrobe table
  • Add a Lookup column that fetches the Multiple Image array via the relation.
  • Add a Single Value column that takes N from start of the Lookup column, where N is the helper table row number/index.
  • Finally, modify the action that’s used to navigate to an item by firstly setting the selected RowID in the Helper Table, via the User Profile Single Value column.

If you get all that right, you can use the Helper Table as the source of a Collection on your details screen, filtering it where the final single value column is not empty.

2 Likes

OH my lord this worked, thank you SO MUCH

1 Like

I’m now getting this error but I can’t see any information in the plans section about image uploads :sob:

I’ve never seen that before. What is the action?

Uploading photos via an image picker. I just discovered there is apparently a 500mb limit for me on the free plan shared across all photos I upload. But the 2 paid plans up from that are 10gb and 25gb which isn’t really a lot long term.

Image pickers would upload directly to the glide file system so I can’t think of any way around this T_T

Didn’t even get any warning that this was a thing or that I was close to it

Okay, that makes sense then.
If you wanted to store your images elsewhere, Cloudinary would be an option once you are on a paid plan. You could setup a workflow that would upload images to Cloudinary in the backgound, and replace the Glide URLs with the Cloudinary ones. Cloudinary is a good choice, because it’s dirt cheap and is optimised for image delivery.

Would this still work with the multiple image column?

Yes.