Display Cloudinary Images in a Gallery with Next.js & React

Просмотров 15 тыс.

% 280

Learn how to use the Cloudinary API to show all Cloudinary image resources in a Next.js React app. We'll walk through using the Admin API to fetch and search for all of our resources, requesting only the root directory images and images for individual folders, and how we can abstract logic into a serverless function API endpoint.
🧐 What's Inside
00:00 - Intro
00:16 - What tools we'll be using including Cloudinary and Next.js
01:11 - Creating a new Next.js Image Gallery app from a demo starer
02:18 - Using the Admin Resources API to fetch all Cloudinary image resources with an authenticated request
10:15 - Requesting the next page of results with abstracted requests and creating a serverless function API endpoint
20:27 - Adding a load more button to update page state with new images and next page cursor
24:23 - Requesting only root directory images with the Resources Search API
26:26 - Using Folders API to show folders and request images from folder
32:04 - What else can we do?
33:06 - Outro
💾 Code
github.com/colbyfayock/my-cloudinary-images
🗒️ Read More
spacejelly.dev/posts/how-to-list-display-cloudinary-image-resources-in-a-gallery-with-next-js-react/
🔔 Subscribe for more tech and developer videos
ru-vid.com
🐦 Get updates straight to your Twitter @colbyfayock
colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
twitch.tv/colbyfayock
✉️ Or a newsletter right to your inbox!
www.colbyfayock.com/newsletter/
💝 Sponsor me for more free content like this!
GitHub: github.com/sponsors/colbyfayock
Other: hello@colbyfayock.com
👨‍🚀 Brought to by colbyfayock.com
www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
www.colbyfayock.com/uses
🧰 More Resources
Demo Image List Starter
github.com/colbyfayock/demo-image-list-starter
Cloudinary Admin Resources API
cloudinary.com/documentation/admin_api#resources
Cloudinary Search API
cloudinary.com/documentation/search_api
Cloudinary Admin Folders API
cloudinary.com/documentation/admin_api#folders
🎼 Music
Music from Uppbeat (free for Creators!):
uppbeat.io/t/mountaineer/campfire
License code: 5TZ4YQ0MH0KDIPUD
#colbyfayock #cloudinary #nextjs #images #imagegallery #media #react #webdevelopment

Наука

Опубликовано:

16 дек 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 85

@colbyfayock 2 месяца назад

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

@lukdrazewski 2 года назад

I spent at least few days to understand how to use Cloudinary API with Next.js, and finally this movie saved me. Thank you man, great job.

@colbyfayock 2 года назад

No problem. Glad it helped!

@randysmachado 2 года назад

Hi I'm Brazilian. I really like your videos, I always learn amazing things from them.

@colbyfayock 2 года назад

Muito legal! so glad to hear that!

@nhieljeff2156 2 года назад

RU-vid just auto played this for me after finishing my music playlist so I got curious and watched the entire thing. I know much of this now already, but I was blown away on how you clearly explained the pain factors and what you did as a workaround. The past me struggled with this, and ultimately went about the same way you did in this video . I could've saved myself from sleepless nights had i known of this video!

@colbyfayock 2 года назад

wow thanks for the kind words!

@BarryDocherty 2 года назад

And may I say that you are a clever lad Colby. So fast and knowing how to write the code without a second thought. I aim to teach my 2 year old boys how to code as soon as they can pick up a pencil and write.

@colbyfayock 2 года назад

that sounds fun! i can't wait to teach my 9 month old to code 🤩

@jrs3239 2 года назад

I'm Brazilian and a big fan of your channel. Hope you are enjoying the experience. And if you visit Rio, please let me know. 😃

@colbyfayock 2 года назад

Thanks I am! Won't be making it to Rio this time but hopefully the next trip to Brazil. We visited once but had bad weather 😭 but still was a great experience

@derekchan1045 2 года назад

Thanks Colby for this in depth tutorial on Cloudinary. Really appreciated!

@colbyfayock 2 года назад

no problem!

@elizabethgoullaud826 Год назад

This is amazing even 7 years later. I’ve been struggling with GraphCMS assets for a clients photography site and I’m definitely going to try cloudinary instead

@colbyfayock Год назад

thank you! let me know if you run into any issues

@rohansalunkhe7268 2 года назад

I followed the code step by step, however when I run it, but then this "Error: Error serializing `.nextCursor` returned from `getStaticProps` in "/". Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value." error appeared. 😅

@colbyfayock 2 года назад

check out the video at 25:50 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-XJWdLbw3QjY.html

@Fallfishtenkara1 2 года назад

@@colbyfayock Thank you I was having the exact same problem!

@colbyfayock 2 года назад

@@Fallfishtenkara1 awesome glad it helped

@colbyfayock Год назад

Check out the Next Cloudinary for full feature-support in Next.js: next-cloudinary.spacejelly.dev/

@mycodingjourney8413 Год назад

Hey Colby this video is fantastic, I wonder though how would I go about retrieving images that are deeply nested e.g. {root folder >> second folder >> third folder >> images}? I have been trying to solve this issue for last two days with no luck

@colbyfayock Год назад

thanks! have you tried the Search API? cloudinary.com/documentation/search_api you should be able to add an expression folder=path/to/my/resources

@arhabersham Год назад

In the "cloudinary.js" file, at line 22 ( resources.map) get an error "Cannot read properties of undefined (reading 'map')" ... choro inconsolável

@colbyfayock Год назад

hey! that would be due to resources not existing, meaning likely the request didn't work? i would look into why resources is undefined you can check out my code here: github.com/colbyfayock/my-cloudinary-images

@BarryDocherty 2 года назад

Great work! Constitutes a save for referencing. This is exactly what I will need. If you ever need some audio processing let me know :D

@colbyfayock 2 года назад

Thank you!

@BarryDocherty 2 года назад

Initially the updatedNextCursor didn't generate a new next_cursor id and loaded a boat load of console complaints that I had duplicate keys. Had to back track and re-do. But now I don't know what went wrong previously. Only argument I am capable of passing at this time is with the wife 😅. Great video albeit you are fast. But that's why we have a pause button.☺

@BarryDocherty 2 года назад

However, I'm not going to want to implement the Load More feature, but rather display the thumbnails of images and onClick it launches a gallery. Rest of video covers the loading all feature from a specific directory I believe. I'm only 75% through it. My needs are to be able to look in a directory and post all images with just 1 HTML request and parse it on the page in a grid. Current site I built has a wee JS that does that, but old tech. Why write 32 image tags when you can write one and Javascript populates incrementally.

@BarryDocherty 2 года назад

Success... this is useful for what I need bar the Load More Images.

@colbyfayock 2 года назад

@@BarryDocherty 🙌

@GabrielMartinez-ez9ue 2 года назад

Hi Colby. Whats the difference in using the SDKs with the Admin API vs this method?

@colbyfayock 2 года назад

hey! good question. there really shouldn't be _too_ much difference, really the SDK should be more convenient. just being honest, i can't remember the intent of using the API endpoint directly here, but I would more often than not in production applications use the Node SDK as it provides an easier API for working with Cloudinary

@GabrielMartinez-ez9ue 2 года назад

@@colbyfayock Thank you for the answer Colby.

@jeremiahhaastrup8692 Год назад

How would you display images into individual img tags? Would it be best to use the URLs?

@colbyfayock Год назад

since releasing this video i launched a library! maybe this helps? next-cloudinary.spacejelly.dev/

@colbyfayock Год назад

Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

@jamesgrubb 2 года назад

Thanks for a great, in-depth walk through. Im not familiar with the '@components/button' syntax i.e using the '@' symbol. Could you explan the usage please?

@colbyfayock 2 года назад

hey! yeah that's just a convention i've came across and have enjoyed using when creating mappings to directories in a project. it uses jsconfig to do so github.com/colbyfayock/demo-website-starter/blob/main/jsconfig.json can read a little more here: nextjs.org/docs/advanced-features/module-path-aliases

@jamesgrubb 2 года назад

@@colbyfayock Many thanks

@rlwhttng Год назад

Did you know the code in the video is different from the code in the linked Github repo?

@julianbustos3079 2 года назад

Great tutorial and article Colby to follow along, however I can´t seem to get the folders to work, I always get the same response from the request and not the images from the respective folder, I am however able to get the folders and everything else from cloudinary.... do you think it has something to do with the way my cloudinary is setup? I was working with it before, however I don't remember changing anything on the settings. The load more button works perfectly! Thank you!

@colbyfayock 2 года назад

would you mind sharing the request you're making?

@julianbustos3079 2 года назад

@@colbyfayock yeah of course, this code sample is inside the run function inside a useEffect with activeFolder as a dependency---- const results = await fetch(`api/cloudImages`, { method: "POST", body: JSON.stringify({ expression: `folder="${activeFolder || ""}"`, }), }).then((res) => res.json()); console.log({ results }); const newImages = mapImageResources(results.resources); setImages(newImages); ----

@colbyfayock 2 года назад

@@julianbustos3079 looks similar to the code I'm running: github.com/colbyfayock/my-cloudinary-images/blob/main/src/pages/index.js#L57 is the request you're making to cloudinary similar to what I'm doing aas well? github.com/colbyfayock/my-cloudinary-images/blob/main/src/lib/cloudinary.js#L13 can find the full code sample for what i did in that project and here's the text-based tutorial spacejelly.dev/posts/how-to-list-display-cloudinary-image-resources-in-a-gallery-with-next-js-react/ i'd recommend also inspecting the request in the Network tab to see if the parameters are passing in as you expect

@julianbustos3079 2 года назад

@@colbyfayock Oh man thanks, I did go through the text-based tutorial, for some reason I missed the search function so it obviously was not working :D but your comment helped me find my error! thanks so much man!

@colbyfayock 2 года назад

@@julianbustos3079 no worries glad to hear

@MorganPeterson-r4q Год назад

Hey Colby! great video. Im having some trouble rendering this funtioanl Component using React Router. Maybe you can help?

@colbyfayock Год назад

hey! are you getting any errors? are you takling about the next/image component? That would only be available in a Next.js app

@MorganPeterson-r4q Год назад

@@colbyfayock yes Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

@MorganPeterson-r4q Год назад

plus I'm using plain React

@colbyfayock Год назад

@@MorganPeterson-r4q unfortunately you'll have trouble with some of this with plain react

@colbyfayock Год назад

the error sounds like you're trying to use a React hook where its not supported or you're using code that uses it where its not supposrted have you seen my code here? github.com/colbyfayock/my-cloudinary-images/blob/main/src/pages/index.js most of that should work but the Next.js Image component *will not* work in a plain React app, its only supported in a Next.js app

@BarryDocherty 2 года назад

ok so the .env.local gets ignored. Is it insecure to push that file to a node server for production. Obviously one does not want expose credentials. Asking this early in the video though...

@colbyfayock 2 года назад

yes that's correct - your environment variables when deploying to an environment (like Vercel or Netlify) would get added within the project when you're creating the project on their site, or you can add it after the project is added

@yasminamran5 Год назад

How do I use it if I want to get the images url from a different program. What is the calling point ?

@colbyfayock Год назад

can you elaborate on your question? What do you mean by get the url from a different program? What's an example?

@yasminamran5 Год назад

I want to use the images for memory match game but I couldint figure out the calling point @@colbyfayock

@colbyfayock Год назад

@@yasminamran5 if you're trying to get a list of the images that you have inside of your Cloudinary account, you have a few options you can use the Admin API wich requires your API KEy and Secret: cloudinary.com/documentation/admin_api#get_resources the search API if you're looking for specific items: cloudinary.com/documentation/search_api Or you can even use this trick where if you tag the images, you can request it via a public JSON file endpoint support.cloudinary.com/hc/en-us/articles/203189031-How-to-retrieve-a-list-of-all-resources-sharing-the-same-tag-

@NotBeHaris 2 года назад

Awesome sir. Sir when we are using getStaticprops so images fetch on build time. So images not update after build on production. As i understand getStaticprops

@colbyfayock 2 года назад

thank you! that's mostly true for the initial load, as the list of images would only update when compiled, but in my example with the activeFolder useEffect functionality, it should hydrate and re-fetch right away, so any new images should be available after that loads but kinda to your point, you could just as easily move this into getServerSideProps if you prefer to do it SSR and have that first request always be fresh!

@NotBeHaris 2 года назад

@@colbyfayock thanks for detail message. Means that now i understand the core concept of ssr and csr

@colbyfayock 2 года назад

@@NotBeHaris in that regard, this video might help out too ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-pjhjqUrG9O4.html

@NotBeHaris 2 года назад

@@colbyfayock thanks again for suggestion.

@BarryDocherty 2 года назад

getting this error: error - pages/index.js (28:18) @ Home TypeError: images1.map is not a function 26 | 27 | > 28 | {images.map(image => { with a wee red arrow pointing to row 28 at the . Im stumped. But be it known I'm injecting this to an app I already started. So I probably missed something. For the most part the app is a clone of yours now. Not sure where Images1.map is coming from. Going to run off your github clone instead. I was trying to inject it to an existing project I have so maybe I am working backwards and inject my existing app into your clone. Always a tricky affair adapting an app to another.

@BarryDocherty 2 года назад

It's always something really subtly overlooked like wrapping images {} in the Home. So tricky. Solved. But solved by moving my app code to your app code. Went back to mine still get an error. Have to hunt down the culprit.

@BarryDocherty 2 года назад

Probably missing a file in the tree. Bottom line, your cloned app works, my app has issues. I overlooked something. But I am determined to find out what it is. So all of the above: enjoy reading, it's a non-issue now.

@colbyfayock 2 года назад

@@BarryDocherty those can be tricky to find, hope you find it

@akhadtop720 2 года назад

Thanks this video was helpfull

@colbyfayock 2 года назад

no problem!

@haluskua1947 2 года назад

how could you serve that on netlify as a jamstack fullstack

@colbyfayock 2 года назад

can you elaborate? this should work just fine deploying to Netlify

@Unbridledhopebr Год назад

You are great.I just need to slow the video down to 0.75, because you speak very fast. thanks!

@colbyfayock Год назад

😬 thanks and sorry about that!

@godswillonyeka5973 2 года назад

I used normal React for it and I have been having errors

@colbyfayock 2 года назад

Can you elaborate?

@MorganPeterson-r4q Год назад

@@colbyfayock same here.. My componnet is not rendering when I use react router

@marcuszierke7930 2 года назад

Hi Colby, thanks for the video. I tried to reproduce the same logic in a react@18 + TS app to fetch my files from cloudinary with the same API you used (line 38 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-XJWdLbw3QjY.html). But I always get a 404 (has been blocked by CORS polic) error. Do you have any idea why? Cheers! P.S. It works with the curl command and in Postman perfectly fine ...

@colbyfayock 2 года назад

hey Marcus, hard to tell without seeing teh code, but im also not that familiar with TS. here's my code, maybe you'll find the issue? github.com/colbyfayock/my-cloudinary-images also check this out: support.cloudinary.com/hc/en-us/community/posts/4414912109586-CORS-Error-when-fetching-folders-in-browser

@savinsnsn 14 дней назад

brazil metioned :)))))))

@colbyfayock 14 дней назад

🇧🇷

@itbeat7899 Год назад

npm run dev time bookmark: 10:02

@colbyfayock Год назад

🚀

@daphnesimons1774 Год назад

Great video Colby, but i keep getting the following error, can you please help? error - src/pages/index.js (62:15) @ getStaticProps ReferenceError: r is not defined 60 | }, 61 | } > 62 | ).then((r = r.json())) | ^ 63 | console.log('results', results) 64 | return { 65 | props: {},

@colbyfayock Год назад

hey thanks! hard to tell from only that but something with the request seems to be failing. here's my code, see if that helps? github.com/colbyfayock/my-cloudinary-images/