Insert image in label text

[Vaibhav]

@andreapetricola

I am looking for a way to insert images into the text of a label. As if they were emojis.

Is there any screenshot that you can provide so that we can better understand what you exactly want to do?

[The_K_Studio (Karan M.)]

@andreapetricola

I’ll try to search a site who convert image in emoji for bypass the problem

This will not work.

I have tried this in past to do like this, but not succeed.

You can only insert emoji’s that are available in keyboard emoji directory.

And also

@Vaibhav

what you exactly want to do?

[andreapetricola]

I want to create a label who contain information like this
with symbols (made by me) and part of text with different color.

[Vaibhav]

This is the closest that I could try. of-course the heart emoji color or font color is different(compared to snapshot you provided).
The font color can be changed to what you like but you cannot change the heart emoji color.(You can try to adjust & keep image component and label side-by-side in a horizontal arrangement and then load the desired image in the image component)

This all is done using HTML

[andreapetricola]

I understand, unfortunately I need certain symbols and not emojis.
Did you say that you can also use HTML in the label text, right? Do you know if there is a way to recall an image for example via the img tag or similar things? Maybe recalling the image directly from the app as a “file”?

[Vaibhav]

@andreapetricola

Did you say that you can also use HTML in the label text, right?

Yes by enabling the HTML property of label.

@andreapetricola

Do you know if there is a way to recall an image for example via the img tag or similar things?

img tag is not possible in Kodular

See here to know what tags you can use in Kodular

Kodular HTML Guide

Kodular HTML Guide Hello Koders, this guide is about using HTML in Kodular. This guide works on all Discourse powered communities. This guide is a Very Large guide. I am sorry if I make any the mistakes. This guide will be updated regularly. So, lets get started… Kodular used HTML4, so HTML5 tags will not work here

What is HTML (Wikipedia)

Hypertext Markup Language ( HTML ) is the standard <a href="https://en.wikipedia.org/wiki/Markup_language" rel="noopener nofollow ugc&quot…

[andreapetricola]

Ok thank you, I’ll try to read it as soon as possible

[andreapetricola]

Nothing to do, there isn’t a method with HTML for do that.
RIP

[Italo]

Use a webviewer component instead of a label. Give it the size of the label you need and make a little html page to display all you want in this “fake” label.

[andreapetricola]

Nice Idea, but there’s a problem.
With my app allow the user to input the text in the label, using “key words” with symbols before save in gallery their creation.
With a webviewer is possible to do this? or is only a “window” where a portion of my html page is visible and unchanging?

[Italo]

I don’t know how familiar you are with HTML , but you can make a page that accepts strings thru GET or POST methods. Example mypage.html?string1=Andrea&string2=Petricola.
Then use string1 and string2 separately inside the html to format your fake label anyway you want.

[Italo]

A more practical solution will be to create some sort of template for your fake label with image and label components inside an arrangement. This is an example, you will place the components according to your needs, of course.

[andreapetricola]

ok wait, I’m not familiar with HTML up to this point unfortunately, but you are telling me that if, for example, I created an HTML page that contains a list of images that can be recalled via a string, I can simply “replace” a portion of text with this string to display the image in the label?

Example:
“I Love The Sea.”

would become, replacing “Sea”:

“I Love the ‘string that displays the image’.”

is this correct or am i wrong?

[Italo]

Actually, I made a mistake. To read the string passed to the little html page you will need a PHP server, which is not available in the webviewer.

However, If all you need is to have little icons at the beggining of a sentence, the best solution for your problem is to use a font that has those icons incorporated.

[andreapetricola]

There is no such font, because I create the icons directly.
Is there a way to insert icons that I create inside a specific font?

[Italo]

Yes, not an easy task but doable for sure. You can use Fontforge to create or modify your own font file.

[andreapetricola]

Great! I try immediately, although difficult I want to be able to insert those icons.
I also know what type of font to modify.
Thanks so much!

[andreapetricola]

Apparently there seems to be no solution.
With FontLab (another program who create and modify fonts) I tried to insert my icons in a totally new font, instead of not useful symbols inside the label text.
on the PC they see PERFECTLY, just as I wanted … but in the app and also in the companion the icons are converted to SVG in black and white.
And if I try to insert colored SVG icons in the font, they are not displayed in the least.
I don’t know what else to do.

[Taifun]

@andreapetricola

Apparently there seems to be no solution.

@Italo had a great idea

@Italo

Use a webviewer component instead of a label. Give it the size of the label you need and make a little html page to display all you want in this “fake” label

and concerning this

@andreapetricola

With my app allow the user to input the text in the label, using “key words” with symbols

why don’t you just use a textbox and then pass the entered text to the webviewer to display it?

Taifun

[Italo]

As a last resource, maybe you can ask extensions developers if they can come up with a label component capable of doing what you need. It may not be free though.
But if I were you, I think I would have to find an alternative way of displaying your information using what it is available in Kodular. Adapt your app to Kodular posibilities, and not the other way around.