Problem with displaying images

Hi there,

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?

Here you can see the “image block” component from “marketplace” template. I can’t find it anywhere in my projects.

Hi @Yohan_A,

Welcome to the community :partying_face:

You can change the Image component size on the Aspect Ratio section!

image

Still Glide Pages don’t have Image Carousel! Until Glide release you can use a workaround! Check this thread! : Create an image gallery/carousel in Glide Pages

I guess the Image Block is now the Image component :

image
or
the Title component :

You can do this with the container , image , text and separators components too!

image


image

Thank you

2 Likes

Hi Dilon, thanks a lot for you help.

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 :slight_smile:
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.

Hope it helps!

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.

2 Likes