I have the main page that displays all the products. And when you click a product, it brings you to the detailed page of that product. So far, I’ve got everything I needed except the rest of the product images.
The detailed page only includes the first image that was shown on the main page. How do i embed multiple images to it.
Do I have to create a collection for just the images?
FYI I have all my data on one sheet.
Pages doesn’t support an image carousel (yet), so yes you’d need to use a collection component.
Are your images arranged in multiple columns in a single row, or the other way around?
If you have them all in a single row, then you’ll need to dynamically transpose them into a vertical list, and then use that in a collection.
A method for doing that is described in the below post:
1 Like
Hello again Darren. Here is how I have my data down below. I’m just a bit confused about why I would need to transpose my column and rows.
.
Because a collection - which is essentially an inline list - needs to source its data from columns, not rows. So basically what you need is a single “Image” column, with each image in a separate row in that column.
But as I said, this can be done dynamically using the method that I linked to, so you don’t need to restructure your data in any way. Although one suggestion that I would make is to move your Image 1 column (Col B) to the right so that it lines up just before Image 2 (Col N). If you do this, Glide will automatically convert all your Image columns into a single array column. You’ll still need to do the transposition, but you won’t need to bother with the “Make Array” step.
2 Likes
@Marvin_Faranso - just a thought. It looks like you have 9 images for each row. If all you want to do is display the images (with no attached actions), what you could do is stack 3 x 1:1:1 containers on top of each other, and then fill them with Image components, with each image component addressing a separate image.
Not sure if that will get what you want, but it would be a quick and easy option.
1 Like
That’s how I have it now LOL. But not all products have 9 images. So when there is no image 9, it would just display a blank. That’s not very presentable, lol. I wanted them to be all in one place, like how Amazon or any other marketplace sites has them, just click on the image and you can see all the images in one go. Kind of surprised Glide doesn’t have that functionality yet. I did look into the video but that got me more confused. His data is boolean, but mine is just a link. I’m just lost on what to follow in the video. I even looked at some glide’s templates like ‘marketplace’, but that did not help as well.
Give me a little time and I’ll make an example that’s more applicable to your use case.
1 Like
I would love that, Darren! You are the man.
Here you go:
4 Likes
THANK YOU SO MUCH. Although this method is not what I needed, but I think it is more user-friendly than what I have. I like this method because it is dynamic, if some images are missing it would not display a blank space on the page, whereas my method is static and would make it unpresentable. I can’t thank you enough, Darren.
1 Like
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.