New Plugin: Alphabet Profile Images

Hi All,

Here’s another simple but hopefully useful plugin. It allows you to easily apply a gmail-style alphabet image as an end user’s avatar when they haven’t uploaded a profile picture. The plugin returns an image representing the first letter of the user’s name, or indeed any text you point it to.

Plugin Page: Alphabet Profile Images Plugin | Bubble

Demo Page:


I hope you find it useful.



Ohh, love this! Thanks!!


This is awesome! I’ve been looking for a solution to this!

1 Like

Thats cool!
I built this for my own app but found it too much work to conditionally change the color based on the letters. Let alone convert it into a plugin :stuck_out_tongue:
How have you handled this? Is it generating a random color or are the letters connected to a color?



Already implemented, super easy to setup! Also curious about the colors, are they randomly generated? Any chance to grab them from a list or something?

Thanks again for this!

1 Like

Thanks @romanmg and @jordan.shotwell.

@vincent56, good question. I’m using a set of images available here - It’s a fixed set and only one for each letter I’m afraid. So the colours are not customisable or even random. I would have released the plugin a week ago but I was trying a different approach that would generate the images on the fly with a random colour, and the option to use two initials but it was beyond my basic JS skills, unfortunately. I have found some code that can be adapted if anyone with more knowledge is interested in building an advanced version. For now, I thought this was better than nothing :slight_smile:

@jordan.shotwell, glad to hear it. As above, it’s one image and colour per letter. I hope this is not too much of a problem for you.


Works great. “Cleaner” and more personalized than my previous solution.

1 Like

Thnks for your contribution.

Could you also add a data access so we can save the image please ?

1 Like

Thanks @nicolas_dap

Setting up an API to access shared assets in the plugin might be a bit tricky, for my skills at least - if that’s what you mean. I’m not even sure Bubble supports that yet. That being said, you should be able to save the returned image of an instance of the plugin, using a workflow. For example, below, I’m creating a channel record and setting its default_image field to the plugin’s current image. You could, in the same way, save an Alphabet image to a user record as part of the sign-up process, if you so wished.

1 Like

All right. I wondered also if Bubble supports this, because I wanted to do an update of the whole Users table with a Scheduled workflow (so with no JS code on a page).
Someday maybe !
Thanks anyway for your response and for sharing your plugin with the community.

1 Like

Hi Louis, I can’t seem to get the plugin to work. Can you advise?

Hi @christianp,

In your second screenshot, try removing “processed with Imgix” from the condition.

Still no luck…

Hi @christianp,

In that case I’m not sure what’s wrong, as everything else looks good from your screenshots. Things I would check:

  1. That your Parent group actually has content, i.e. that it actually contains a user.
  2. That the parent group’s user in fact does not have a profile pic.
  3. That the parent group’s user has a value in the First field and that there is no leading space in that value.
  4. If there are any errors in the browser console.

The Bubble debugger should help with checks 1 to 3 above.

1 Like

Thank you Louis, last questions, are you familiar with this error?

No I’m not I’m afraid. Is image_name the filename of an image that you have tried to upload? I would suggest trying the plugin on a fresh page with just the elements that it needs and no other plugins. You can then start a process of elimination to determine what’s causing the error.

That’s great advice, thank you!


would able to assign a default color if there is no image?

Hi @t.augustorocha, I’m afraid this is not currently supported by the plugin.

I like the plug in - however I would like to know how/if I can change the border to square instead of circle