Text overlay on solid background image

Hello
I want to place a number text overlay on top of the image in a list.
The image is a plain image (color swap) saved in a column.
The number is also a rollup template column saved in a column.

Avoiding cloudinary, i don’t want to use that and the image is not stored there.
I can easily do this using quickchart and creating a Radial Gauge and placing that text in the middle.

It just doesn’t feel right to do it this way + quickchart charts sometimes take time to load and my lists usually have hundreds of rows.

Any other alternative ways of doing this. (placing a text overlay on top of an image)

Easy enough to do with an Inline List Tiles Layout, with standard options.

Have you tried that?
If yes, in what way does it not meet your requirements?

Hi Darren
I need it on a list layout

i have this done but i want to do something similar instead without using quick chart if its possible.

heh, okay - a picture tells a thousand words :slight_smile:

I’m not sure that I would be overly concerned about that. Browsers will be caching the images, so each unique image would only need to be loaded once by each client. Even if you had separate static images for every possible status, the end result would be exactly the same - each image would need to be loaded once by each client.

Are you setting the height and width parameters on the quickcharts? Reducing the canvas size to the bare minimum might help a little.

Other than that, I don’t really have any suggestions for alternative ways to do it. Seems that quickchart is the perfect tool for this job, to me.

They look pretty cool, btw :+1:

3 Likes

Agree, best approach in that case.

1 Like

image

@rayo that is nice! I have been putting together an attendance app, and I cannot have students’ photos in there (multiple reasons). That would be a nice image to indicate what I am showing textually – absent x days, present n days, percent attended…

Thanks to @Robert_Petitto and @rayo I was able to get this added in no time! I varied the graph so the color changes varying by the percent complete (green, orange, yellow, red)

2 Likes

image

If you don’t want to show a longish list of names then you can use this plugin.

https://thinhdinhlca.github.io/shorten-list/

5 Likes

I love it! Thanks!

2 Likes