How to include images horizontaly

@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?

@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
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.

2 Likes

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

@yinon_raviv yes!

@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.

@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/

wowww…this is clever trick :heart_eyes:

Thank you Jeff

1 Like

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?

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

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!

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

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

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

Mail   Phone
|||||

|—|---|—|---|
| |Mail   | |Phone|

1 Like

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, which suggested:

Just use:

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

instead of:

![](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.

2 Likes

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.

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.

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

How did you make the ticker across the top?!

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.

Hi, that’s unfortunate. I also haven’t figured out how to get the icons horizontally. I copied the code but they keep appearing vertical, also tried including small images but not yet succeeded.

The app I am building has one tab as a daily dashboard where the user is asked to indicate per day

  • What sports they did (word entry)
  • How much reading time (number entry)
  • The best thing happened today (choice entry)

I am trying to figure out how to display a list of pre-set choices combined with the option for the user to fill in their own input, any thoughts?

In Tab 2 there is a tracking overview where the user has the possibility to see the information entered in tab 1 in a week overview (displayed per day) so that then they can see an overview of their weekly performance, any thoughts how to insert a table like this, the data should come from the input in tab 1
I am stuck on these topics :slight_smile:

greeting from Amsterdam - Berlin!