Create an image gallery/carousel in Glide Pages

Hi, I’m trying to create an image gallery inside a Glide Pages website.
The page in the website is intended to be a collection of latest events of an association. When a user wants to read more about one of these events, another page should open, with the title of the event, some info and a gallery of pictures.

I’ve read other posts in the forum and tried to create the image gallery following these steps:

  • using Glide database I first created n columns for each picture;
  • I then created an array (“make array”) column where all the photos are combined
  • in the webpage I inserted “+” > “content” > “image”
  • finally I linked the image placeholder to the array column from the database

The issue is that only the first photo of the array is displayed and there are no ways to navigate the gallery (not by swiping on mobile, nor by clicking anything on the screen on a pc). When I inspect the element on Chrome I only see the link of the first image of the gallery, as if the others are not even being loaded.
In the Data Editor I see all the pictures in the array column as intended (see screenshots attached).

What am I missing? Why isn’t this working?

Thank you




Screen Shot 2022-06-12 at 17.49.36

I don’t believe Pages have the image gallery option yet. Only Apps do. Even if you did get the gallery to work, I don’t think there is a way to assign individual actions or links to each image. What we’ve done in the past with Apps is to use a tiles list with a horizontal layout, or maybe the swipe layout.

3 Likes

Not having the gallery option still available in Pages as @Jeff_Hager said, I think you can define two buttons, forward and backward to which to bind an action that increases / decreases an index.
Then you can define a “single value” column to retrieve the image element from the array using that index.

6 Likes

@roldy’s solution is a good alternative until image carousel in Pages is a thing.

Hi Roldy, thanks for the tips.
If I’m not asking too much, could you please be so kind as to send me a gif/video of the actions you are suggesting so that I can recreate it in my project?
Thank you!

1 Like

Sorry no audio in this video, I don’t have the microphone where I recorded it.

9 Likes

Did a video about Image carousel in Pages too in past! : Pages Carousel Wokaround.mp4 - Google Drive

But Roldy’s method is too easy! Thanks Roldy! :muscle: I did not aware that we can do this easily with the Make Array column :man_facepalming:

1 Like

Make Array has many many uses. Just ask @Robert_Petitto :wink:

4 Likes

Robert :muscle:

Created a How To video of how I have been creating an image gallery for my Glide Pages projects.

2 Likes

Maybe my newest post on the use of Curator.io might help.
It has many different image galleries.
Curator.io with Glide

Thanks, this was super-helpful and I have successfully duplicated a couple of these.

1 Like

I like this! Created one I can use to show to clients. A small change I made was to do a count of the images in the array as my max index column so it never goes higher than the number of images I have in the array and allows me to do a template showing that it’s image ‘x’ of ‘n’.

Super nice and clear way to do the carousel. Thanks, Roldy!

1 Like

Do you have performance issues with lots of images on this?

Hola a todos!

Watching the @Roldy 's idea, I wanted to improve it and avoid creating as many columns as images our carousel is going to have.

Due to I hate creating unnecessary columns in Glide (I’m a little lazy :innocent:), I thought this workaround:

  1. Create your own Image Gallery using a specific table (it can have as images as you want):
    image

  2. Now, from another table you can create an Image Array via Lookup column and join/use all your images whenever you want

  3. That’s all. From here, you can use Roldy’s procedure (using an action to increment/decrement the index of the array) without issue. As you can see, we only needed to create 2 columns no matter how many images were needed.

But let’s complicate the problem if we have a more complex requirement: we want to choose which images will be used by the carousel dynamically … :hammer:

  1. We already have our own Image Gallery using a specific table
    image

  2. Use the same Image Array via Lookup column showed in step #2 above but now creating a list of our favorite images that will be displayed in carousel. We need to create an Item List (or image list) as a Text column and then, via a Split Text column convert that list into an array (Item[ ])

  3. Finally, we need to create a relation between our new array (item[ ]) and IDs of our Image Album to get our new Carousel via a Lookup column

  1. With this setup, you can have several carousels if you want. You just need to add rows, change your list of items and it’s all folks!

Of course, after this, you must follow the Roldy’s procedure to get a smart and nice result.

EDIT:
Unfortunately, use an action to increment/decrement the array’s index will eat up your update quota very fast, so the plan B is to work with a Collection using our relation as source and setting Orientation to Horizontal.

Your carousel should look like:

I hope it helps anyone!.

Feliz noche!

4 Likes

i hope the glide team can see this

1 Like