Text size in Collections

Hey all!

I have a collection set to show 1 item. When a user taps the collection, it randomly selects another item from the list. It’s a random name generator so I need the text to be a lot bigger than the collection default.

Ideally the text would be overlayed on top of an image. I’m using Cloudinary to achieve it but for this use case the render lag is too great for it to be a solution.

  1. Does Glide plan to reintroduce the overlay feature with tiles and images that exists with classic apps?

  2. Does anyone know of a third party avatar generator that allows you to append a text column onto an image? Dicebear let’s you do initials but I need the whole word. I’ve found that avatar generators produce urls that can be used with no lag.

  3. Is there a way to leverage Cloudinary to produce a url with the desired result and then use another column to capture that and ‘hardcode’ it into another column? This would solve the lag issue.

I have no idea on this, but wasn’t that also using Cloudinary?

Can you give an example? Wouldn’t that still subject to the fact that you’re generating an image on the fly and needs time to process it after the user click?

Thanks for your quick reply ThinhDinh. I’m not sure if Glide were using Cloudinary for their overlay features, but there were never any issues with lag so…maybe not?

I thought the same thing about the avatar generators but they seem to allow for instant rendering. To show you what I mean, I set up this example a couple minutes ago and it works perfectly without any lag. None of the images had been rendered before so it’s not related to caching.

Untitled video - Made with Clipchamp (2)

And here are the actual avatars, produced by Dicebear. Again, rendering is instant but the text (which is supposed to be the focus) is tiny.

Untitled video - Made with Clipchamp (1)

If I try the same thing with Cloudinary, there is a delay of 3-4 seconds between each one appearing

The first gif is really close to what I need but I can’t get it to overlay the whole word, only the first 2 characters.

if you are on a maker plan or above, you can change the text size using css.

if you want the overlay, if you can use a custom collection you can place a rich text component with html inside it to achieve something like this. I have an overlay text if a unit is “Priority Listing” and another overlay showing the Unit ID.

1 Like

Thanks Abdo, it’s legacy non-profit so no CSS. That looks like it would be ideal though

you don’t need css to do that… i will post a video here to explain how

Ah re-read your comment - thought you meant CSS would be needed for an overlay. Cheers that would be great :slightly_smiling_face: (if you don’t want to go to the trouble of making a video the html code should be fine, I’ll try and figure out the rest).

apologies for the late reply, here is the video. To make it work, make sure not to leave empty lines within the html.

How to overlay text on images Community Resources

1 Like