Image gallery with Cloudinary

As you can see in my previous posts, I like photography.

Not like I am particularly good at that, but I enjoy seeing those moments later. That brings me to CDN's because those photos should be stored and delivered.

After some googling, I choose Cloudinary because it has some nice features and a decent free plan - 25000 transformations or 25 GB storage or 25 GB bandwidth monthly.

Cloudinary has a react library, but I did not find any image gallery. So here is how I did it.

After uploading images to Cloudinary servers, I tag them. After that, I fetch the list of photos by this URL:

`https://res.cloudinary.com/${your_username}/image/list/${tag}.json`

response type:

interface CloudinaryTagResponse {
  resources: Array<{
    "public_id": string,
    "version": number,
    "format": string,
    "width": number,
    "height": number,
    "type": string,
    "created_at": string,
  }>,
  "updated_at": string,
}

Here is source code cloudinary.tsx how I use it with React Carousel Image Gallery

If you look at lines 64 and 65, you will notice the srcSet and sizes field. You may ask how I calculate those params? I did not :)

I used the excellent RespImageLint tool created by Martin Auswöger.