How to include images horizontaly

Hi all,
Need your experts insights.
Is there a way to put 2 or 3 (small) images next to each other in 1 row.
For example, let’s say I want to put icons of mail, WhatsApp and call that each of them will be clickable to the relevant action.

Thanks for any advice!
Yinon

This is kind of a bad example, but this should work if you put this in a column that is viewed with a rich text component. You would need to find much smaller icon images, but it should work.

[![](https://static.thenounproject.com/png/2888819-200.png)](mailto:fakeemail1@email.com) [![](https://static.thenounproject.com/png/1979761-200.png)](tel:123-555-5555/) [![](https://static.thenounproject.com/png/2465542-200.png)](https://wa.me/15551234567)

11 Likes

Wonderful example. Sounds like this should be listed under Spreadsheet Magic.

Done :slight_smile:

1 Like

Awesome Trick @Jeff_Hager! :slightly_smiling_face::+1:
I have a similar requirement which I had kept on Hold. Will try and use this logic to get it done dynamically by Concatenating.

It will be great if we can have a TIPS and TRICKS section for a consolidated view of these kind of solutions? :blush:

1 Like

hi @Jeff_Hager

what am I suppose to see here? i guess I’m miissing something but i don’t understand your answer.

this is what I see in your reply:
image

Put the code it into your spreadsheet exactly like I have it. Then view the column with a Rich Text component. It is markdown language.

@Jeff_Hager
ok, did that and:

  1. WOWWW - I must learn how you did that.
  2. I see all of them 1 after the other vertically and not horizontally. if i use smaller icons they will be next to each other?
    image

Glad you got it. I believe smaller images would show horizontally. I think the images that glide uses for the phone/email/text components are 18px X 18px. I couldn’t quickly find small enough images for the demo.
There’s a lot of resources on the web to learn how to use markdown language. I’m still getting familiar with it, but I just did a search for markdown image links. Then I found some random images. You have to remember that links like emails and phone numbers need the “mailto:” and “tel:” part included. From previous discussions, I remembers that people used the WhatsApp short link to get that to work.

1 Like

You are absolutely awesome. Trully appreciate the insights and help.

1 Like

You guys are awesome!

Hi,
I think you should create a markup table (and use richtext in glide builder) to make the icons show up horizontally. Pls find some smaller icons :slight_smile:

|---|---|---|
|[![](upload://hxwNW4FyZIFZNRmi75HfZhGo9Yp.png)](mailto:fakeemail1@email.com)| [![](upload://jDCy1F4vzzc6pEP1Dkp7jrh4buV.png)](tel:123-555-5555/) |[![](upload://cHUneJ6wcrKSMctBQZBOde2F9SH.png)](https://wa.me/15551234567)|
2 Likes

Can you guys share some basic explanation on what is markdown language and markup table?
Maybe a link to get me started :crossed_fingers:

1 Like

@yinon_raviv
Glide supply documentation. Take a lot in there
https://docs.glideapps.com/all/reference/components/text/rich-text

Perfect @Krivo thank you, will do

https://dillinger.io/ and https://www.markdownguide.org/basic-syntax are popular sources.

Here is a source for some icons to experiment with.
https://www.copypastecharacter.com/

Unable get the images show up horizontally irrespective image size, has anyone succeeded?

Didn’t try yet but I guess you’ll need really small icons…

@Ralf @yinon_raviv and all the rest :slight_smile:
You can try this. Has small images. If you use the images for free remember to give credits to the owner

||||
|---|---|---|
|[![](https://img.icons8.com/metro/26/000000/email.png)](mailto:fakeemail1@email.com)| [![](https://img.icons8.com/metro/26/000000/phone.png)](tel:123-555-5555/) |[![](https://img.icons8.com/metro/26/000000/call-transfer.png)](https://wa.me/15551234567)|