I am trying to build a very simple ecommerce website and run into problems whenit comes to displaying images for my products:
Both of my problems happen on the “details page” of my products
Problem 1:
I can’t set my images to change their size. When I use a “image” object, the image display fullscreen.
When I open the template “marketplace”, I see that the image size is help while using a “Image block” component. But this component is not available when I look for it in the component box.
(see screenshots)
Problem 2:
I have multiple images in my database (they come from airtable). While the data page sees clearly that many images are in the field, the display just shows one.
How can we display many images from a multiple image input?
After 2 hours of exploration, I finally got to make it work. For anyone that would be interested, I did the following to display an image gallery (I did not want a click carousel for UX reasons)
First, split my column from Airtable that contain my images as an Array to many single columns. GlidePages does not understand that a multiple image from the database is made of many element, it just takes the first one to show. The goal here is to seperate each of them.
You should create as many columns as you wish to, the number of column should be greater than the number of images you have for 1 entry. (ex: 30 images => 30 columns)
See screenshot for parameters. This is my 28th column.
On the layout page, create a container of 4 columns (or 3, as you wish), and put 4 images. Each of these images should be link to the previously created columns.
Pros: it works
Cons: It is manual, not automated at all and thus not maintenable. It is a dirty solution, while waiting for GlidePages to do multiimage handling.
I’m not sure if it would help your use case, but there is a fairly simple technique that can employed to expand your image array across multiple rows in a single column, which would allow it to be used as a collection.
It works like so:
Create a bare Glide table to use as a helper table
Add a RowID column
Add a Lookup column that targets the RowID column. The result should be an array of RowIDs.
Use a Find Element Index column to find the RowID in the RowID array. This will give you an auto-incrementing Row Index.
Add your Image array using a Single Value column, or relation + lookup column.
Now use a Single Value column to address the Nth from start of the image array, where N is the row index.
The end result will be that all of your images are shown in a single column, with one image per row. This is a standard technique that can be applied to any array. The advantage is that once it’s set up, it requires zero maintenance. If the size if your image gallery increases, you simply add more rows.
