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.