Is it posible to display images in the title or caption of an inline list?

Hi everyone!

I was wondering if an inline list can display little images in the caption or title field.

I want to display the text plus a few images like icons. Here is how should it look:

The little images inside the red box are what I want to display.

Any options?

Thanks!

In an inline list, the image element will appear on the right if title and details and caption are populated, on the left if less then all three are populated. This is the default behavior of the inline list component.

Should you want to include icons or emojis to the right of the text, you could create a template column text+emoji, then point the title of the inline list to that template column.

Hi @nathanaelb the template with text+emoji is clear. My doubt is if there is any way to display in a template or something a text+image in the title or caption.

Thanks!

Natively in Glide, I believe you cannot put text+image in a template column. And yes we agree, text+emoji or text+icon in a template column is possible.

With CSS there might be a way to resize images and determine their position next to the text :slight_smile:

2 Likes

Thanks a lot for your patience @nathanaelb. One last question: do you know if I can use rich text in the database and then display it in the inline list?

I put the code to show what I want:

:slight_smile:

You can include rich text in tables in Glide Tables or Google Sheets.

As far as I know you cannot display rich text in inline lists. Rich text can be displayed in rich text components.

If you need to change the text of inline lists, a few ideas:

  • Settings / Appearance / Typography
  • The cards style is the most versatile and you can change size and capitalization.
  • Not native in Glide: CSS code
2 Likes

As Nathan said, Cards is the most versatile one. I would take advantage of the “avatar” field of the card to extend it and do something like this. I used Cloudinary to generate these images.

However, I would not move it next to the title, since you don’t know in advance the length of the titles and it could possibly override the images.

5 Likes

Thank you both @nathanaelb and @ThinhDinh.

@ThinhDinh There are multiple avatars or with Cloudinary you generate a single image?

Thanks!

It’s a single image :wink:

@ThinhDinh WOW I suppose that is generated automatically, do you have a video or course with the explanation?

:slight_smile:

I don’t have one for that but I assume @Robert_Petitto has a few for you in his channels (regarding Cloudinary).

1 Like

I don’t have a video on how to do that specifically. @ThinhDinh, if you send me the Cloudinary image for that last card, I’ll make a video on how to achieve it.

3 Likes

@ThinhDinh thanks again. @Robert_Petitto that would be awesome! :slight_smile:

1 Like

As you could have imagined those are multiple fetched layers. Actually I had 6 of them for 6 possible scenarios and just replace the right base64 code in.

https://res.cloudinary.com/username/image/fetch/l_fetch:{I1},w_130,h_130,c_scale,r_max,g_west,x_0/l_fetch:{I2},w_130,h_130,c_scale,r_max,g_west,x_140/l_fetch:{I3},w_130,h_130,c_scale,r_max,g_west,x_280/l_fetch:{I4},w_130,h_130,c_scale,r_max,g_west,x_420/l_fetch:{I5},w_130,h_130,c_scale,r_max,g_west,x_560/l_text:Arial_60_bold:%2B{C},g_west,x_720,co_rgb:000/https://dummyimage.com/900x130/fff/fff

Here’s one for the 6th image, which fits with the Pros & Conference meeting you see in the screenshot.

{I1} to {I5} are base64 codes, {C} is the “plus” count (that is greater than 5).

2 Likes

That’s awesome. So do you have six different Cloudinary image variations based on the count of avatars needing to be displayed?

2 Likes

Yes, that’s true. I think I went that way because if I just use the one link above, it returned an error when I passed empty base64 codes in.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.