Скачать или смотреть This EASY and FREE plugin optimizes images for you

Repo — https://nlvcodes.com/tutorials/add-po...
Link to plugin — https://www.npmjs.com/package/payload...
Get early access to videos and more exclusive perks —    / @nlv_codes  
Find me on Twitch —   / nlv_codes  
Want to stay up to date with recent web dev news? Subscribe to my newsletter — https://news.nlvcodes.com/subscribe
Support the channel —   / nlvcodes  

Add Powerful Image Transformations (and more!) to Payload CMS Using Cloudinary

You’re trying to use Payload CMS, but then it hits you: if you want built-in image optimization, you need to use the Image component or roll your own optimization.

The out-of-the-box storage adapters may not offer the features you need, and rolling your own solution is messy, time-consuming, and brittle. Maybe you’re relying on the Next.js Image component, but now your Vercel costs are creeping up.

You’re not alone.

I built a solution: a complete Cloudinary plugin for Payload CMS that solves the image optimization, CDN delivery, transformation, and even private access puzzle once and for all.

In this tutorial, you’ll learn:
How to connect Cloudinary to Payload CMS
Upload documents and media directly to Cloudinary from Payload’s admin.
How to replace the Next.js image component by using Cloudinary’s CDN URLs.
Configure folders, set custom folder paths dynamically, and choose between existing and new folders.
Create responsive image components with on-the-fly transformations.
Use signed URLs to protect your content and limit access to authorized users only.
Add public previews with watermarks or blur effects for protected content.
Enable advanced features like chunked uploads, transformation presets, and more.

You’ll especially love this if you’re building:
A blog or CMS-backed website with lots of images
A membership platform with gated content
A content-heavy SaaS dashboard
E-commerce stores using Payload as a headless backend

By the end of the video, you’ll be able to:
Confidently upload and transform media through Cloudinary
Ditch the Next.js image component
Deliver blazing-fast, optimized images via Cloudinary’s CDN
Secure your premium media using signed URLs
Provide previews that still look polished and branded

Chapters:
00:00 - Introducing the Payload Cloudinary Plugin
01:10 - What you need from Cloudinary
02:04 - Installation and Initial Configuration
04:04 - Rendering an image
07:06 - Configuring Cloudinary Folders
08:55 - Creating a custom folder selector
16:12 - Controlling how files are deleted
16:46 - About upload queues
18:34 - Transformations
27:29 - Signed URLs
34:48 - Creating and Rendering Premium Images
39:12 - Closing thoughts and next steps

#payloadcms #react #coding #nextjs #cloudinary