# How to include images horizontaly

**URL:** <https://community.glideapps.com/t/how-to-include-images-horizontaly/868>\
**Category:** Ask for Help\
**Created:** [October 4, 2019, 7:03am UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868 "2019-10-04T07:03:37Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 7, 2019, 6:09pm UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/41 "2019-10-07T18:09:37Z")

</div>

Highlight the code and select the `</>` button above when editing your post.

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [October 7, 2019, 8:44pm UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/42 "2019-10-07T20:44:49Z")

</div>

@yinon_raviv It looks really neat. I do like that the centering of the images/text - but it is html code - and I believe that is what glide discourage. But it look really nice. It is problematic if centering is not possible as users have screens with different sizes.

@Mark Will Glide make things like centering shown here available in glide - either by using html codes or something similar?

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [October 7, 2019, 8:50pm UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/43 "2019-10-07T20:50:47Z")

</div>

@Ralf Nice to know that the problems should be solved in iOS 13 - but it is still a problems as not all users have always updated to latest version. I believe that Glide should support more versions (and as many as possible).

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [October 7, 2019, 9:03pm UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/44 "2019-10-07T21:03:14Z")

</div>

@Krivo  
You’re right, it’s HTML but unfortunately, markdown doesn’t have alignment abilities as far as I could find and it’s always aligning to the left. For me as Hebrew speaker this is problematic.  
I wish glide will have options to play with the alignment of components. This would be huge improvement.

---

<div class="post-metadata">

**Author:** ![Ralf](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ralf/32/492_2.png) [@Ralf](https://community.glideapps.com/u/Ralf)\
**Post date:** [October 7, 2019, 9:36pm UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/45 "2019-10-07T21:36:02Z")

</div>

@Ralf that’s good news. did you happened to check my app as well?

@yinon_raviv yes!

---

<div class="post-metadata">

**Author:** ![Ralf](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ralf/32/492_2.png) [@Ralf](https://community.glideapps.com/u/Ralf)\
**Post date:** [October 7, 2019, 9:45pm UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/46 "2019-10-07T21:45:35Z")

</div>

@Ralf Nice to know that the problems should be solved in iOS 13 - but it is still a problems as not all users have always updated to latest version. I believe that Glide should support more versions (and as many as possible).

@Krivo I agree. Also the iOS 13 fix is not perfect, instead of a completely blank screen you get screen “Untitled” which you can close and get back to the Glide app.

---

<div class="post-metadata">

**Author:** ![Ralf](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ralf/32/492_2.png) [@Ralf](https://community.glideapps.com/u/Ralf)\
**Post date:** [October 7, 2019, 10:42pm UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/47 "2019-10-07T22:42:05Z")

</div>

@yinon_raviv I have now “borrowed” and included your colorful icons into my demo app, OK?

I have also used the center tag which makes the app as @George_B said “clean and visually appealing”, I think that Glide should reconsider not supporting HTML!

[https://fang2.glideapp.io/](https://fang2.glideapp.io/)

---

<div class="post-metadata">

**Author:** ![Abdullah\_Mahmud](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdullah_mahmud/32/143_2.png) [@Abdullah\_Mahmud](https://community.glideapps.com/u/Abdullah_Mahmud)\
**Post date:** [October 7, 2019, 11:10pm UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/48 "2019-10-07T23:10:25Z")

</div>

wowww…this is clever trick 😍

Thank you Jeff

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [October 8, 2019, 5:43am UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/49 "2019-10-08T05:43:27Z")

</div>

Of course @Ralf . Your demo looks great.  
When you have time I’ll be happy to learn what you did with the moving text and signs setting. It’s also HTML no?

---

<div class="post-metadata">

**Author:** ![Ralf](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ralf/32/492_2.png) [@Ralf](https://community.glideapps.com/u/Ralf)\
**Post date:** [October 8, 2019, 8:03am UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/50 "2019-10-08T08:03:11Z")

</div>

Yes, it is html!  
See post _Simple idea of showing a customer message_  
by @Alex_Calandrino

---

<div class="post-metadata">

**Author:** ![apertur.co](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@apertur.co](https://community.glideapps.com/u/apertur.co)\
**Post date:** [October 8, 2019, 6:52pm UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/51 "2019-10-08T18:52:48Z")

</div>

> [@Ralf](#):
>
> Image size does not matter!

I am struggling with image size. I am trying to insert small images in-line with text, using Markdown in Rich Text component. I have tried shrinking the images (e.g., using an online image resizer) to get the image to the right size, but the resulting image resolution is not legible. Is there another approach? For example, a way to shrink the original image in Markdown so it fits in-line with the text, similar to the way an emoji might present? A different way to resize the original image before adding it to the app? For example, the built-in mail and link icons are small but have good resolution.

Thanks!

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [October 8, 2019, 8:00pm UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/52 "2019-10-08T20:00:36Z")

</div>

Try putting it I table format in markdown with just one cell. Maybe this will solve it

---

<div class="post-metadata">

**Author:** ![Ralf](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ralf/32/492_2.png) [@Ralf](https://community.glideapps.com/u/Ralf)\
**Post date:** [October 8, 2019, 8:54pm UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/53 "2019-10-08T20:54:59Z")

</div>

Does your image blur? If so, it might be a mark down table issue.

---

<div class="post-metadata">

**Author:** ![Ralf](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ralf/32/492_2.png) [@Ralf](https://community.glideapps.com/u/Ralf)\
**Post date:** [October 8, 2019, 9:39pm UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/54 "2019-10-08T21:39:59Z")

</div>

@apertur.co Here I have put text right of images!

| | | | |
| --- | --- | --- | --- |
| [![](https://firebasestorage.googleapis.com/v0/b/glide-prod.appspot.com/o/img-uploads%2F5ayhHF1b4RgejA1mAqsY%2F2c4bd5.png?alt=media)](mailto:info@mysite.com) | Mail &nbsp; | ![](https://firebasestorage.googleapis.com/v0/b/glide-prod.appspot.com/o/img-uploads%2F5ayhHF1b4RgejA1mAqsY%2F511f05.png?alt=media) | Phone |

```
|||||

```

|—|---|—|---|  
|[![](https://firebasestorage.googleapis.com/v0/b/glide-prod.appspot.com/o/img-uploads%2F5ayhHF1b4RgejA1mAqsY%2F2c4bd5.png?alt=media)](mailto:info@mysite.com) |Mail &nbsp; | ![](https://firebasestorage.googleapis.com/v0/b/glide-prod.appspot.com/o/img-uploads%2F5ayhHF1b4RgejA1mAqsY%2F511f05.png?alt=media) |Phone|

---

<div class="post-metadata">

**Author:** ![apertur.co](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@apertur.co](https://community.glideapps.com/u/apertur.co)\
**Post date:** [October 8, 2019, 9:44pm UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/55 "2019-10-08T21:44:34Z")

</div>

Thanks for helping, @Ralf.

I figured out how to do this (resize an image within Markdown, without loss of resolution), based on this post: [https://stackoverflow.com/questions/14675913/changing-image-size-in-markdown](https://stackoverflow.com/questions/14675913/changing-image-size-in-markdown), which suggested:

_Just use:_

```auto
<img src="Assets/icon.png" width="200">

```

_instead of:_

```auto
![](Assets/icon.png)

```

Here’s an example of my spreadsheet cell:

`="<img src='" & H2 & "' height='24'>" & " Test inline image"`

where `H2` is the cell containing the image URL.

Unfortunately, the in-line image doesn’t look as nice as I had hoped, so I am not moving forward with this. But it’s a good trick to know for future reference.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 8, 2019, 9:53pm UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/56 "2019-10-08T21:53:32Z")

</div>

I would find a different way to resize the image. Maybe the method you used doesn’t work well. HTML is potentially vulnerable if Glide stops allowing it. I’m not saying to stop using HTML as I have some here and there in my app, but I’m prepared if it ever stops working. I’ve seen CSS stop working already, so it’s possible.

---

<div class="post-metadata">

**Author:** ![apertur.co](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@apertur.co](https://community.glideapps.com/u/apertur.co)\
**Post date:** [October 8, 2019, 9:59pm UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/57 "2019-10-08T21:59:37Z")

</div>

Agreed. Best to avoid HTML wherever possible, for the reason you give.

The Stack Overflow post has some other, non-HTML suggestions. I tried them, but couldn’t get any of them to work with Glide’s implementation of Markdown. I actually ended up not using this, because what I really want to do is create a tile with multiple lines of formatted text (headers and bullet points) next to it. I explored a table, but I can’t figure out a way to add headers and bullet points to the cells within the table.

---

<div class="post-metadata">

**Author:** ![YasminLayla](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yasminlayla/32/1351_2.png) [@YasminLayla](https://community.glideapps.com/u/YasminLayla)\
**Post date:** [November 6, 2019, 10:45am UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/58 "2019-11-06T10:45:19Z")

</div>

Hi Ralf, thank you for sharing so much information about the topic, it’s super helpful! I am taking a twist on the horizontal emoticon bar but can’t wrap my head around it, I want to achieve a row with 5 different emoticons next to each other that can be clicked on for each emoticon separately so that the user can click on its mood. This must function as his mood tracker like the example below, how do I do this? The data of the clicked emoticon should be transferred to the datasheet. thank you and greeting from Berlin

 ![17%20AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/d/d25ac13f0513d7a74a25437096875964f9c618bc.png)

---

<div class="post-metadata">

**Author:** ![Kyle\_Heney](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kyle_heney/32/981_2.png) [@Kyle\_Heney](https://community.glideapps.com/u/Kyle_Heney)\
**Post date:** [November 6, 2019, 11:10am UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/59 "2019-11-06T11:10:51Z")

</div>

How did you make the ticker across the top?!

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [November 6, 2019, 11:17am UTC](https://community.glideapps.com/t/how-to-include-images-horizontaly/868/60 "2019-11-06T11:17:31Z")

</div>

Unfortunately as far as I know glide don’t have deep linking so you can’t include in the url which attached to the image which mean we can’t use this in forms or link to other screen in the app.

[Previous page](https://community.glideapps.com/t/how-to-include-images-horizontaly/868.md?page=2)

[Next page](https://community.glideapps.com/t/how-to-include-images-horizontaly/868.md?page=4)
