Recently I came across a challenge where I needed an image which included various images from different profiles, some icons and some lines based on conditions. I didn’t think it was possible until I tried to dig deeper and play around with Cloudinary and I eventually found a way to achieve it.
This one image consists of 6 different images:
3 Profile pictures
2 line images on either side (Both are dynamic and are governed by conditions so when the status changes, the lines become dotted or solid based on the condition)
1 icon on the center (This depends on the type of connection)
Also it consists of 4 different texts which are all places beneath the images.
All the data lives on the google sheet and the Glide data editor and is simply plugged into the Cloudinary link using a template column making the whole image dynamic. (Each row will have different profiles, lines, icons and text but same layout)
This involves some basic scripting to get the base64 version of all images in the script: https://stackoverflow.com/questions/51928409/encode-google-sheet-rows-into-base64-string
Thanks to @ThinhDinh for this!
Cloudinary allows you to combine more than 1 image and place it wherever you like with basic modifications in the links. @Robert_Petitto has a detailed tutorial of this here: Cloudinary: Image Filters and Overlays in Glide!
Wondering what all opportunities this could open up.
I have implemented this in one of the recent apps I built: Pluhg
Try out the app to see the magic in action!