Use of cloudinary

@John_Cabrera are you willing to tell the story about how you use https://cloudinary.com/ in the context of Glide apps.

I was inspired by this of your comments where you describe a bit about how you use Cloudinary

A few questions - but that wont tell the full story, I believe :slight_smile:

  • Do you get users to upload images to cloudinary - or do you move the images there yourself?
  • Is it correct that cloudinary takes a credit each time a user sees a page in glide which uses cloudinary image?
  • If you just need to do a one-time manipulation of the images - e.g. to resize and crop the image - how can you avoid paying a credit everytime the user accesses the image?
  • Do you face privicy challenges - e.g. the user uploads personal images (GDPR and the like)

This was some questions but you know the full picture.

Would you care to share your thoughts?

Hi Krivo,

I would also refer to the application of Cloudinary by Robert here. Hope it helps.

@ThinhDinh thanks for heads up on that post. I have looked into this earlier on. I’m just curious on how @John_Cabrera works with cloudinary.

1 Like

Not a problem! I’ve learned so much from the community here. I’m happy to give back.

My app is a publishing platform called Masslore (https://masslore.com to learn more). My community is building fictional universes (sci-fi/fantasy type stuff) by telling micro-stories all within a shared growing history of these worlds. Their stories are in-fact adding new elements to the worlds which all members of the community are free to use (and are encouraged to use) in their stories.

Stories can be text or image. So early on, my challenge was how to present that content to readers in a way that was both beautiful and standardized… like a traditional publisher. I was originally using the Glide Rich Text component for text and image component for uploaded images. My first problem was I could not present both text and graphical stories in the same feed. I had to create two. One inline list for text posts. And one for image. This bothered me. Especially since Inline List is not meant for Text. It’s meant for images and the text is meant to simply give context to the image. So it has very limited wrapping capabilities. It just wasn’t great.

The Masslore platform also encourages published posts to be micro in size. So users upload in bite-sized pieces that resemble more like a page in a book. If they want to write a much longer work, they just publish many of them (and can even bind them together with a book cover). This was also a challenge, because Glide does not have a character limiter the way you would find in almost any social media platform. So I had no way to limit their content in app. I created formulas in my spreadsheet to truncate after a certain character limit, but it slowed my sheet and users were writing in the dark, not knowing if they had exceeded the limit.

Then one day @Robert_Petitto shared a post about Cloudinary. It’s funny, because I didn’t see its usefulness to me at first. I remember even asking him how it was more beneficial to doing manipulations yourself and creating logic in Glide/Sheets. And in many cases you can do the processing yourself and have code decide what image is presented. But if you want complex dynamic processing in real time… Cloudinary… oh you beautiful Cloudinary. And this is exactly what I needed to create a standard on Masslore.

Uploaded text and graphics would now both be jpeg images. I would have Cloudinary place Text onto what looks like a dark book page. I would use their Text overlay parameters to give it a nice Serif font as if it was a page from a published work. I’d constrain it to 2:3 so it would fit perfectly in the inline list, and for uploaded graphics I would do the same. And that’s what I did. Using all the data a user uploads: their story, their story title, it’s relationship to other previous published works, etc. I send it all over to Cloudinary in the form of a specially coded URL and Cloudinary makes me an image that lives at that URL. Those URLs are stored in a column in the content sheet, and that column is being used by an inline list… in the order of publication. Text and comic book style works all grouped together in a sort of Twitter of storytelling.

Whats more, since I now know the dimensions of the published Text works, I can create my own input field that not only limits their text, but shows them how many characters they’ve used, and even keeps the exact formatting as it will look on the page. Check it out: https://masslore.com/drafting/

I use a button within forms to access this link within the app, and now I’m going to switch those buttons to WebView. It’s not perfect, but they can write there, copy the text and paste it knowing exactly what their work will look like in the feed. And it’s the beginning of what will eventually be my own uploading form within the app.

Your questions:

1 - the only images I uploaded to Cloudinary were assets that are used in everyone’s published works. So for example, I mentioned that Text works are placed on what looks like a dark piece of paper. It’s the same piece of paper for everyone, so I uploaded that to Cloudinary and gave it a name there that is always used in the URL. For any images that are dynamically used in a finalized work, Cloudinary uses what’s called a Fetch command. As the word implies, it “fetches” the image for you. So if someone uploads a new image that is used in that finished story-work, the URL link will tell Cloudinary where that image is online and Cloudinary will download it into your Cloudinary account before it does the image processing (a split second process). For example, with text works, I have Cloudinary place user avatars in the upper right corner because Glide only provides avatar placement on the left. So my Cloudinary URL includes the link to people’s Avatars uploaded to Glide.

2 - Cloudinary uses a credit system, but it’s much more than it sounds. For every credit, you get 1000 transformations or 1000 MB of bandwidth (yes, the amount of times users have seen your images processed by Cloudinary) per month. Cloudinary’s free plan starts you with 25. So that’s either 25k transformations or 25GB of storage. If you tweet and send a facebook post about them, you get a bit more, and if you get others to sign up for the service you get 3 more per person up to 20 people (7 if they pay for a plan). So just from their free plan, you can have up to 99 free credits if you work it right. That’s a TON. To give you an idea. I’ve been using it for the past month. My largest day was almost a month ago, when I was testing the system and created 2k+ transformations in a day trying to figure out the best look for my works. Since then, the usage has been moderate. My month is about to end, and I’ve used 5% of my full 39 credits. Granted, my app is not massive. We have about 100 people viewing and creating content. But you get the idea. Cloudinary gives you plenty to get started as a do-it-yourself entrepreneur.

3 - A transformation is when Cloudinary takes a bunch of assets and turns them into a new image. When a user uploads a new piece of content Text or Image, this counts as 1 transformation. The newly created image is stored on Cloudinary’s server and from then on, anyone who views the image is simply taking from your 1000MB per credit bandwidth usage. Again, the word “credit” is deceptive. You don’t get 25 credits for 25 transformations. You get 25 credits for 25k transformation or 25GB of bandwidth per month (whichever of the two comes first). I doubt there are many here at Glide who will tear through this amount.

4 - We all face GDPR challenges. But Cloudinary is no more challenging than the current ones faced with Glide itself. In many ways, it’s less challenging. With Glide, when a user uploads an image, it lives in a place I cannot access to delete it. With cloudinary, you have access to every image you have uploaded yourself, or that Cloudinary has downloaded for the transformation, as well as all finished transformed images. You can delete anything you want and have full control. Many of the works that Cloudinary is using are uploaded images that have been uploaded to Glide. So even with the control I have within Cloudinary, I am still faced with little control over that image in Glide. I’m sure this will change soon. Glide recently updated the URL for uploaded images, so I imagine that is in preparation for some kind of way to access uploaded images from within Glide dashboard.

I should also add that since my platform is one that leverages shared works, the images and content users are uploading have elements of other user’s content in them. In order to do this, creators agree to give the platform full rights over the published works. Similar to Unsplash, I suppose, but a bit stronger in that it allows the platform to display works indefinitely regardless of GDPR, because users are giving the platform rights over the images. That doesn’t address personal images like Avatars which the platform cannot control… but as I said, until Glide gives us a way to delete user Avatars, we are all navigating tricky waters there. But with Cloudinary, I have full control. I can browse through everything there and delete anything I want.

Hope this was helpful.

10 Likes

BEAUTIFUL use of Cloudinary! :clap::clap::clap:

2 Likes

Would REALLY like to have you show me how you gamify your app. The concept of forging shards is intriguiing.

1 Like

I’m about a month away from sending out invites. Next week is production week!!! Video tutorials!! I’d like to get those done before sharing a bit wider than I have so far. But you’ll definitely get an invite.

4 Likes

Holy crap. I don’t think I’m smart enough, or creative enough to hang with you people anymore. :laughing:

5 Likes

The great thing about the times we live in (pandemic aside) is that there’s isn’t really a smart-enough or a not-smart-enough. You’re as smart as google and the crowd and the community you lean on for help. And creativity is really just how passionate you are about connecting the dots. I doubt I’d be nearly as far into this project if it wasn’t something I desperately wanted to create. I found Glide after a year of hitting how-to walls, and money walls. I’m so grateful to this platform, and to all the folks here that have helped me over the past 6 months.

5 Likes

ME too! Would love to take a look! Sounds like quite a big project!

2 Likes

ARe you doing this images dinamically in cloudinary as well?
Screen Shot 2020-05-08 at 5.35.55 PM

Some of it, yes. I really can’t speak highly enough about Cloudinary. I think it’s a must-tool in a Glider’s arsenal.

2 Likes

Wow, that’s quite impressive. I need a crash course ASAP!

1 Like

@John_Cabrera I’m impressed - by a number of things. Both the work you are doing which has a very professional look and by the time and energy you have put in to answer a community members (me) question.

I need to figure out whether it is possible to split an image (panorama photo) in 2 or 3 individual images to be used by an image carousel. How many items to split the image into could maybe actually be done in cloudinary. If width/height >2.5 then split in 3. If you know the answers pls do not hesitate to let me know :wink:

Thank you for your comment on GDPR issues - as I now have read the terms at cloudinary it seems to be ok. We still need Glide to take a serious look at GDPR - amonst other the ability to delete uploaded images, extract favorites info if a user want to get their information out of the app we have created etc.

I don’t totally understand where the users upload their images - via Glide upload functionality - or somewhere so Cloudinary (and Glide) and access the images via an url. If the users upload to Cloudinary - how do you direct the users to your cloudinary site (if that is what they do?)

Again, thanks a lot for taking time to describe how you go about cloudinary. :+1: :+1: :+1:

1 Like

To split a panorama would be rather “easy” with Cloudinary. Without actually have done this, I imagine you would set the parameters for width at .5 or .33 and then give it a crop to that width. Somehow set the x coordinate of the image three different times and youd now have a triptych of the original panorama.

@John_Cabrera - your app looks really beautiful.

I am going to bookmark this to read at a later point in detail. Nothing will speak more highly of Cloudinary than what you’ve written.

Thanks again.

And @Robert_Petitto - You too!

1 Like

So Cloudinary doesn’t require the user to upload anything other than what they have already uploaded to Glide. When a user uploads to Glide, you get a URL for where that image lives (these firebase image URLs that Glide creates). These are stored in the Google Sheet in whatever column you’ve designated. So with this information, you can easily create your own Cloudinary URL of that same image processed. That Cloudinary link will look something like this:

Cloudinary.com/{parameters for image manipulation}/https://{glide image url of that image}.jpg

Cloudinary goes to that Glide image URL (which you have stored in your sheet). It downloads that image instantly into your Cloudinary account, and it places those manipulation parameters onto it.

So in your case, creating a panorama carousel would simply be creating Glide Logic that takes that one Glide Uploaded image and places onto three Cloudinary prefixes:

1 - Cloudinary.com/{parameter that crops the image to the first 1/3}/https://{glide URL for that panorama image}.jpg

2 - Cloudinary.com/{parameter that crops the image to the middle 1/3}/https://{glide URL for that panorama image}.jpg

3 - Cloudinary.com/{parameter that crops the image to the last 1/3}/https://{glide URL for that panorama image}.jpg

As you can see, the only difference in the three cloudinary URLs is the change of the manipulation parameters. The Glide URL at the end of the Cloudinary URL stays the same. And you already know where that image is. You have that URL in your sheets. You don’t need to store the Cloudinary URL anywhere. You can create those using IF THIS THEN and TEMPLATE Columns.

Does that shed a bit more light on the Cloudinary process?

2 Likes

This of course is a simplification of the process of creating Cloudinary links. There are lots to learn about the syntax for manipulation parameters, rules for how to format the link, etc. but they have extensive documentation and I learned it all in about a day. It’s not too complicated. And there are some many ways to manipulate an image. It’s really quite incredible the things you can do to an image with their system.

1 Like

@John_Cabrera Thanks for the in-depth description. You upload the images to Glide - that is the thing I was missing. I will try to work out the images splitting - @Robert_Petitto also gave input on that. I just need to find the correct parameters :slight_smile:

I must admit that I don’t really want people to upload images to glide as I cannot control the images - I hope so much that glide will make it possible to store images in a place where we are in full control of our images. Think about it, being able to upload directly to cloudinary.

Each of these little cards are made up of Glide Uploaded images, text submitted, a standard background I uploaded to Cloudnary, and lots of little manipulations dealing with color, borders, etc.

2 Likes