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).
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.
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.
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!
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!
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 …
We already have our own Image Gallery using a specific table
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[ ])
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.