Single Row, Images in different columns ---> how to get them to display as an inline list?

[Mark_Turrell]

This is a common challenge I have, and there are two workarounds that are ok, but I was wondering if anyone had anything more elegant in Glide.

Use case:

• the call center agent needs to see 2 or 3 photos side by side on a screen
• these photos are all stored in a single row (some via user input, some via lookups to another part of the app)

the most elegant solution would be for me to be able to access these images (in the same row) as an inline list (tiles, cards, etc)

Currently the workarounds are:

1. template column with a markdown or HTML table and adust the image sizes
   or
2. template column to connect the columns with a comma in between, then split column to split that with a comma. Then in the UX you can add an image component with the Split column as the source… and Glide will know that it is an image array and allow the user to swipe.

Does anyone have a better solution? Thanks!

[Mark_Turrell]

Option 1 is not too hard, as long as you know some Cloudinary magic

| User Upload | Kit Contents |
|:-:|:-:|
| ![foil](https://res.cloudinary.com/egriorostj/image/fetch/w_300/XX) | ![kit contents](https://res.cloudinary.com/egriorostj/image/fetch/w_300/ZZ) ​|

And then I replace XX and ZZ with the column images.

The downside is that you might have users on mobiles, tablets, or desktops – hence why the dynamic sizing from the Glide inline list would have been nice - but not a disaster. There is always a way of solving problems!

[ThinhDinh]

Do you have an upper limit of how many images you want to display in this inline list?

I’m thinking you can have a Glide Table for this, create a seed column to store values like “Row 1”, “Row 2”, “Row 3”.

Every time the user access a row, use a set column action to write to their user profiles sheet’s row the ID of the row they’re viewing.

Then make a relation using that ID back to the rowID column, then 3 lookup columns to return the 3 images. Let’s say “Viewing 1”, “Viewing 2”, “Viewing 3”.

In the Glide Table I mentioned at the start, create an ITE column, if “Seed” is Row 1 then User’s Viewing 1, same for the other 2.

I wouldn’t call it elegant, but you will get an inline list to work with.

[Mark_Turrell]

That would work - but the challenge is volume.

In my use case, each TestFlow row is someone doing a corona test.
In Germany… this could be 10K+ per day (and more like 100K per day if the app is nicely marketed, etc)

I have a CollectUser sheet for each person, then each person has a TestFlow row (and I clear the values in that row once a test is completed, or could not be completed)

I will have 3 images that get uploaded per session (at least - in a future product it will be 8 images).
So if I do end up creating rows in a separate Glide Table, I would get 3x active TestFlow rows each time a test is started… and then I would need to clean things up (not possible to clean up rows in a Glide table programatically).

So the method you propose for the Rel would work… but for a different type of use case.

I think the markdown table with cloudinary is the best option! It works, looks nice, and scales with the app

[Darren_Murphy]

@Mark_Turrell

In Germany… this could be 10K+ per day (and more like 100K per day if the app is nicely marketed, etc)

That makes me very nervous…

[Mark_Turrell]

fancy taking a turn on the support desk for an hour or two?

[gvalero]

@Mark_Turrell

I will have 3 images that get uploaded per session (at least - in a future product it will be 8 images).
So if I do end up creating rows in a separate Glide Table, I would get 3x active TestFlow rows each time a test is started… and then I would need to clean things up (not possible to clean up rows in a Glide table programatically).

Hola @Mark_Turrell

What about if you create an image carousel?

Glide Docs

I recognize that an Inline list can look better than a carousel but it saves more data and work because you won’t have to create new rows.

Just create 3 new columns in your CollectUser sheet (or TestFlow?) and later, save in each column (Image1, Image2, Image3) the user’s pic. If in the future you need 8 images, just create 5 additional columns (Image4… Image8) and everything will do automatically without much effort.

.Feliz día!

[Mark_Turrell]

I have an image carousel (that was my first option) but it is harder for the agent to make a visual comparison, hence the need for a way of showing all at the same time

[gvalero]

Well, there is the Plan C:

Put a 2nd image component below 1st one enabled by a switch. So, when the switch is ON, the APP will show the 2nd carousel to make the visual comparison.

I don’t see any problem if this section will be used by agents only.

[Mark_Turrell]

the issue then becomes screen real-estate — on the screen, you want the user attention to be maximized in the important parts, and reduce scrolling.

I also have the desktop view set up for the agents - which means some things look really big
The table approach offers the best compromise for this use case. I will keep the other tricks in mind for future features and projects though. Thanks!

[gvalero]

Yes, I know but you can still adjust the image size to avoid some things look big.

In this case I would sacrifice a bit of design for functionality. Using this along to a switch to show/hide the 2nd carousel should be enough.

Bye

[Robert_Petitto]

Is it always only 2 images at a time?

[Mark_Turrell]

I have a use case for 2 images, and one for 3.
Fortunately I have the tablet mode for the agents so I have more screen real-estate to play with.

[Uzo]

Make separate sheet just for pictures, than just relate them to user email, you will have comfortable format for any list…plus you don’t need to create new columns anytime there is need for more pictures…
Ps. People still doing covid testing?