🆕 Hero Icons (icons from names) Plugin

In the meantime, it’s already cool to display contextual icons without multiplying components :heavy_check_mark:

Okay color me stupid but as a 100% non-coder, I still don’t understand how these code columns work. I have read the instructions at Glide Docs but there are so many terms there that I don’t understand - the example shown is to find a substring - I am clueless what that is, let alone why I would need to find one. I was kind of ignoring this feature but now so many cool things are tied to it (like these icons) that I am feeling left in the dust and would really like to learn. Are there any videos out there showing step-by-step how they are added to an app? Thanks!

4 Likes

Happy news !

1 Like

This won’t answer your over-all question, but substring is a programming term for getting a specific section of text out of a larger piece of text.

Let’s say that we have a column with text such as this:
‘ABCDEFG’
(Some code also recognizes the first position in a list as the 0 position. For this example, I’ll treat the first position as the 1 position so it’s less confusing)

If I wanted to only get the value ‘DEF’, I would use a substring. In code, you would do something like SUBSTRING(‘ABCDEFG’, 4, 3). That’s telling the substring function that you want to get a value from ‘ABCDEFG’ but you want to start at position 4 and grab 3 characters. That will return the value ‘DEF’.

That’s substring in a nutshell. Some of us do throw around coding terminology. A string is alphanumeric text, but then you also have integers, decimals, booleans, dates, and all kinds of stuff that makes your head spin. For string manipulation, sometimes we want to add a dynamic number of spaces before and/or after a piece of text so each value has the same number of characters. That’s Padding. Sometimes we want to remove any spaces before and/or after a piece of text. That’s trimming.

I think a lot of David’s posts on new plugins show a quick example and maybe a video. But mostly, you can copy the plugin url, create an experimental code column, insert the url, and play around with the parameters that show up to get a feel for what they do. It’s really the same experience as you get when playing with the plugins directly on the plugin page.

8 Likes

They will soon just appear as normal columns in Glide, indistinguishable from the other computed columns. You only need to understand code columns if you plan to build them, and you should be comfortable writing JavaScript in this case.

9 Likes

Thank you David! I think I will just hold off and wait for that. So many other things to spend my time on right now other than learning something I don’t need to :heart_eyes:

2 Likes

:heart_eyes:

1 Like

VERY useful! :heart_eyes:

2 Likes

Hola @Maria_Nunez!

Welcome to the community!

4 Likes

I love this Hero Icons Plugin, thanks @david !
I also often need “numbered images” for rankings for example
For the moment, i use services like “dummyimage.com/” to generate the links with Template Column (dynamic images based on values). But i am not happy with it due to delay / latency in displaying images in the apps.
Do you think it would be possible to extend that plugin with numbers, letters or caracters in general ? Or does this still exist in another way ? Thanks

2 Likes

Hi guys, I created a video tutorial for those who asked how to use it. This is me explaining to the best of my understanding. I also found a few bugs and I will be reporting them on a different post. It’s a great feature!

part 1

part 2

After playing with it for a bit I think that the size of icon, padding, etc. are in percentage…not in pixels or any other unit. If anyone from the team can verify this, that would be great.

1 Like

Here’s a video with the bugs I found:

Thanks a lot.

1 Like

Hi is there a way to change the source of the icons from Heroicons to another source?

No, there isn’t.