Display Cloudinary Images in a Gallery with Next.js & React
Vložit
- čas přidán 27. 07. 2024
- 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-clo...
🗒️ Read More
spacejelly.dev/posts/how-to-l...
🔔 Subscribe for more tech and developer videos
czcams.com/users/colbyfayock?s...
🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
/ 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-i...
Cloudinary Admin Resources API
cloudinary.com/documentation/...
Cloudinary Search API
cloudinary.com/documentation/...
Cloudinary Admin Folders API
cloudinary.com/documentation/...
🎼 Music
Music from Uppbeat (free for Creators!):
uppbeat.io/t/mountaineer/camp...
License code: 5TZ4YQ0MH0KDIPUD
#colbyfayock #cloudinary #nextjs #images #imagegallery #media #react #webdevelopment - Věda a technologie
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
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.
No problem. Glad it helped!
CZcams 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!
wow thanks for the kind words!
Thanks Colby for this in depth tutorial on Cloudinary. Really appreciated!
no problem!
Hi I'm Brazilian. I really like your videos, I always learn amazing things from them.
Muito legal! so glad to hear that!
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.
that sounds fun! i can't wait to teach my 9 month old to code 🤩
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
Thank you!
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. 😃
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
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
thank you! let me know if you run into any issues
Thanks this video was helpfull
no problem!
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. 😅
check out the video at 25:50 czcams.com/video/XJWdLbw3QjY/video.html
@@colbyfayock Thank you I was having the exact same problem!
@@Fallfishtenkara1 awesome glad it helped
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.☺
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.
Success... this is useful for what I need bar the Load More Images.
@@BarryDocherty 🙌
You are great.I just need to slow the video down to 0.75, because you speak very fast. thanks!
😬 thanks and sorry about that!
Check out the Next Cloudinary for full feature-support in Next.js: next-cloudinary.spacejelly.dev/
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
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
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!
would you mind sharing the request you're making?
@@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); ----
@@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
@@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!
@@julianbustos3079 no worries glad to hear
How would you display images into individual img tags? Would it be best to use the URLs?
since releasing this video i launched a library! maybe this helps? next-cloudinary.spacejelly.dev/
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?
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
@@colbyfayock Many thanks
Hi Colby. Whats the difference in using the SDKs with the Admin API vs this method?
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
@@colbyfayock Thank you for the answer Colby.
Did you know the code in the video is different from the code in the linked Github repo?
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
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!
@@colbyfayock thanks for detail message. Means that now i understand the core concept of ssr and csr
@@NotBeHaris in that regard, this video might help out too czcams.com/video/pjhjqUrG9O4/video.html
@@colbyfayock thanks again for suggestion.
In the "cloudinary.js" file, at line 22 ( resources.map) get an error "Cannot read properties of undefined (reading 'map')" ... choro inconsolável
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
How do I use it if I want to get the images url from a different program. What is the calling point ?
can you elaborate on your question? What do you mean by get the url from a different program? What's an example?
I want to use the images for memory match game but I couldint figure out the calling point
@@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-
Hey Colby! great video. Im having some trouble rendering this funtioanl Component using React Router. Maybe you can help?
hey! are you getting any errors? are you takling about the next/image component? That would only be available in a Next.js app
@@colbyfayock yes Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
plus I'm using plain React
@@user-zj9fn8ry6r unfortunately you'll have trouble with some of this with plain react
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
how could you serve that on netlify as a jamstack fullstack
can you elaborate? this should work just fine deploying to Netlify
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...
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
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.
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.
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.
@@BarryDocherty those can be tricky to find, hope you find it
I used normal React for it and I have been having errors
Can you elaborate?
@@colbyfayock same here.. My componnet is not rendering when I use react router
npm run dev
time bookmark: 10:02
🚀
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 - czcams.com/video/XJWdLbw3QjY/video.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 ...
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
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: {},
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/