Image Grid styleByIndex?

I would like to render a red border around some images and not around others.

Is there a way to use the image grid component and specify border on a per image basis? I think that I'm looking for a 'styleByIndex' instead of 'style' for the component.

Hey @tsdgr!

It doesn't look like this is possible at the moment, but it seems like an interesting idea! Would you mind describing your use case a bit more?

@Kabirdas, thanks for your interest!

I use image grid to display customer vehicles as they enter a service area. I would like to add visual distinction to images that need additional attention from a sales person. I would like the decoration to help show the priority/type of interaction sales should make with a customer.

Eg. Putting a red border around images that a sales person should click on to get additional information about the customer, and what offers they can make to the customer.

Eg. picture of a new customer, color the border around the image as green.
sales person would know that vehicle has additional context that they need to handle. Perhaps a special greeting, or a new customer package.

I have tried using the caption setting to embed this information but It has a couple drawbacks from my perspective.

  • I cant embed html there to have colored text or render markdown
  • even if I could use markdown; text uses more space in the layout than I want. I think that I can get better information density with color instead of text.

I would love the ability to make a per image style.

Got it! That totally makes sense thanks for sharing :slightly_smiling_face:

Folks have also been asking for a more general grid view component (similar to List View but in grid format). If either that or additional border styling options for the Image Grid component are included I'll report back here!

In the meantime, it looks like you might be able to do something with dynamic custom CSS. It's not a pattern I would generally recommend, especially since class names aren't guaranteed to be consistent between Retool versions. But doing some playing around with it, it does look like it's possible.

Will report back here if the feature is picked up and included!
colored_borders.json

Just a quick update that ListViews now support a grid layout :tada:

This gives another workaround for conditionally setting image borders: