Has anyone ever tried to create a Cloudinary image that has multiple other images overlayed on top of it in specific spots?
Here’s what I’m trying to do:
create a risk heat map using the image below as the “base” image (this is static and wouldn’t change, the actual base image would just be colors, not numbers at this point)
Other images of numbers would be positioned on top of the base image, there could be multiple image numbers in each cell of the heat map, or just all over the place
the position of the image numbers would depend on other criteria in the app and could be determined with an IFTHEN column (i.e. if high, high then position is x,y).
Ideally, I want this to be a dynamic image that changes as risks are reassessed. I should be able to figure out the logic that positions everything correctly, but what I don’t know how to do is create a Cloudinary image with multiple overlays (and the number of potential overlays is unknown — there could be lots of risks brought up!).
Any help (or alternatives) is greatly appreciated!
Yes! I saw that and it made me think about my scenario more. It wasn’t clear to me that @Robert_Petitto was combining multiple images in that example.
I need to get more familiar with Cloudinary… is there a tutorial out there for creating images with multiple fetched overlays? It would be great if there was a way to do this in Cloudinary as a template, then copy the majority of the template into Glide to build a template column ---- this may already exist, but I’m not sure.
Ooo that looks promising. It’s still based on a definite number of possibilities though (you know the number of US states and where they’re always going to be positioned). In my case, I could have image #1 moving from Florida to New York and back again. I could also have an image that is new and is in addition to the values that already exist (a new risk). A risk could also be removed… And so on!
@Robert_Petitto do you think this is possible, or too much trouble to even consider?
I use image overlays from Cloudinary in quite a few places in my app. It is not that complicated, just requires some trial and error. The tricky thing is working out which layer to have as your base layer, and then what to lay on top of what. You then have issues about whether you are using ‘upload’ images in CL, or ‘fetch’ to get images that are on the internet. Upload is pretty much the way to go…
So doable - fairly easy to make a template column that pulls things together.
Seems doable… to @Mark_Turrell’s point, upload is much more reliable…to fetch, you’d need to convert to base64 first. You can even play around with opacities and gradients in Cloudinary as well.
@Lucas_Pires just asked me to create a series on using Cloudinary…I’ll try to throw one together this month. Feel free to PM me with your use cases and I’ll try to include them.
I know @ThinhDinh uses Cloudinary in innovative ways as well (creating ID cards, certificates, etc)
After some consideration, I’ve decided to go with a Glide-based solution to this and I think it’s going to work out better overall. I’ve decided to go with a Tile layout that uses the appropriate background images to create the same look as I was thinking Cloudinary could give me. See image below!
