{"id":28197,"date":"2022-03-23T22:59:01","date_gmt":"2022-03-23T22:59:01","guid":{"rendered":"http:\/\/Making-a-Media-Library-with-Redwood"},"modified":"2022-03-23T22:59:01","modified_gmt":"2022-03-23T22:59:01","slug":"making-a-media-library-with-redwood","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/","title":{"rendered":"Making a Media Library"},"content":{"rendered":"

You might have a blog or a site that specializes in giving users video and image content. You can make yourself a media library to manage all of your content and keep it relevant to your users. That way you can see the exact data you need and you can arrange your images and videos in ways that don\u2019t affect users.<\/p>\n

In this tutorial, we\u2019ll make a small media library to handle videos and images for us. You\u2019ll be able to upload the videos and images to Cloudinary and then show them in your own library. We\u2019ll be storing references to that content in our own Postgres database that we could use to reference images in other places.<\/p>\n

Setting up a Cloudinary account<\/h2>\n

The first thing we\u2019ll do is set up a Cloudinary account. You can sign up for a free account here<\/a>.<\/p>\n

Then you\u2019ll have a single place to upload all of your users\u2019 media content. That way you don\u2019t have to worry about storing all of your content and you can just fetch and upload your videos.<\/p>\n

Setting up the Redwood app<\/h2>\n

Now you can go to a terminal and we\u2019ll make our new Redwood app with the following command.<\/p>\n

yarn create redwood-app media-library<\/code><\/p>\n

When this finishes, you\u2019ll have a full-stack app that just needs a little updating. In the api<\/code> folder you\u2019ll find all of the code to handle your database and GraphQL back-end. In the web<\/code> folder you\u2019ll find the code for the React front-end. We\u2019ll start with the database schema because Redwood uses this to handle a lot of work for us.<\/p>\n

Making the models<\/h3>\n

Open schema.prisma<\/code> in the api > db<\/code> directory. Make sure to update your provider<\/code> to postgresql<\/code> instead of sqlite<\/code> since we\u2019ll using a Postgres database. Take a moment to update the .env<\/code> file in the root of the project. You\u2019ll need to uncomment the DATABASE_URL<\/code> value and update it to your Postgres connection string. It might look like this.<\/p>\n

DATABASE_URL=postgres:\/\/postgres:admin@localhost:5432\/media_library<\/code><\/p>\n

If you don\u2019t have Postgres installed locally, you can download it here<\/a> and get your connection string from pgAdmin once the installation is finished.<\/p>\n

You can close .env<\/code> now and go back to schema.prisma<\/code> because we need to add our models. You can delete the example model in the file and add the following ones.<\/p>\n

model Video {\n  id       Int    @id @default<\/span>(autoincrement())\n  name     String<\/span>\n  duration Float\n  url      String<\/span>\n}\n\nmodel Image {\n  id     Int    @id @default<\/span>(autoincrement())\n  name   String<\/span>\n  url    String<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We have the database schema ready so we can run a quick migration to set up the database.<\/p>\n
yarn rw prisma migrate dev<\/code><\/p>\n
This will create the tables with the columns and constraints we defined in the models. Just to have some data to look at, we\u2019ll seed our database.<\/p>\n
Seeding the database<\/h3>\n
Inside of api > db<\/code>, open seed.js<\/code> and delete all of the commented out code in the main<\/code> function. We\u2019ll be adding our own seed calls with the following code.<\/p>\n
await<\/span> db<\/span>.video<\/span>.create<\/span>({\n  data<\/span>: { name: 'Beth_vid'<\/span>, duration: 765.34<\/span>, url: 'example.com'<\/span> },\n})\nawait<\/span> db<\/span>.image<\/span>.create<\/span>({\n  data<\/span>: { name: 'Beth_img'<\/span>, url: 'example.com\/beth.jpg'<\/span> },\n})\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Now you can run this command to seed your database.<\/p>\n
yarn rw prisma db seed\n<\/code><\/span><\/pre>\n
With your fresh data applied, we can move on to the best part of Redwood.<\/p>\n
Using Redwood to generate the front-end and back-end<\/h2>\n
Now we\u2019ll use my favorite Redwood command to generate the CRUD to work with videos for the front-end and back-end of this project.<\/p>\n
yarn rw g scaffold video<\/code><\/p>\n
This one command generates a React front-end to handle everything we need to add video records to the database. If you look in api > db > src > graphql<\/code>, you\u2019ll see a new sdl file that contains all of the types for our queries and mutations for handling videos. In api > db > src > services<\/code>, you\u2019ll see a new videos<\/code> directory. This folder has all of the resolvers to handle the database updates. It also has a test that you can add on to.<\/p>\n
On the front-end of the app, take a look at web > src > pages<\/code>, you\u2019ll see a lot of new directories for videos. These contain pages that show different aspects of the CRUD functionality.<\/p>\n
Take a look in web > src > components<\/code> and you\u2019ll see even more directories for videos. These directories contain the files that handle the data on the front-end and the form we could use to handle adding videos to the database.<\/p>\n
We\u2019re going to run the scaffold<\/code> command one more time to generate all of the files for images.<\/p>\n
yarn rw g scaffold image\n<\/code><\/span><\/pre>\n
This is everything we need to start working with the Cloudinary upload widget.<\/p>\n
Adding the Cloudinary upload widget<\/h2>\n
We\u2019re not actually going to use the form to add videos to the database. We\u2019re going to do that automatically after we upload the videos to Cloudinary. To start with, we\u2019ll add the Cloudinary widget to the NewVideo<\/code> component. We can use a package to add this widget so we\u2019ll install that in the web<\/code> directory first.<\/p>\n
yarn add react-cloudinary-upload-widget\n<\/code><\/span><\/pre>\n
Let\u2019s go to web > src > components > NewVideo<\/code> and edit the file there. This is where the edit form for the video gets pulled in. We\u2019ll add the import for the upload widget components we need along with the other imports.<\/p>\n
import<\/span> { WidgetLoader, Widget } from<\/span> 'react-cloudinary-upload-widget'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Then we\u2019ll add the uploader widget components. In the code right above the VideoForm<\/code>, add this code.<\/p>\n
<WidgetLoader \/>\n<Widget\n  sources={['local'<\/span>, 'camera'<\/span>]}\n  cloudName={process.env.CLOUD_NAME}\n  uploadPreset={process.env.UPLOAD_PRESET}\n  buttonText={'Open'<\/span>}\n  style={{\n    color: 'white'<\/span>,\n    border: 'none'<\/span>,\n    width: '120px'<\/span>,\n    backgroundColor: 'green'<\/span>,\n    borderRadius: '4px'<\/span>,\n    height: '25px'<\/span>,\n  }}\n  folder={'test0'<\/span>}\n  onSuccess={successCallBack}\n\/>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
While you can check out what each of these props does for the widget in the README in the repo<\/a>, there are a few we need to highlight. The CLOUD_NAME<\/code> and UPLOAD_PRESET<\/code> need to be defined in your .env<\/code>.<\/p>\n
Making an upload preset in the Cloudinary console<\/h3>\n
You\u2019ll need the values for these two fields and you\u2019ll get those from your Cloudinary console. The cloud name is on the dashboard as soon as you log in.<\/p>\n
\"cloud<\/p>\n
You\u2019ll need to go to the settings page for uploads<\/a> and create a new unsigned upload preset. Your upload setting page will look something like this.<\/p>\n
\"upload<\/p>\n
If you scroll down the page a bit, you\u2019ll see the \u201cUpload presets\u201d section. Click on \u201cAdd upload preset\u201d to create a new unsigned preset. You be taken to a page that looks like this and the only thing you need to do is change \u201cSigned\u201d to \u201cUnsigned\u201d and save that change.<\/p>\n
\"preset<\/p>\n
The value you see for \u201cUpload preset name\u201d is what you will need to set for your UPLOAD_PRESET<\/code> in the .env<\/code>. With these two values, you\u2019re .env<\/code> should look similar to this.<\/p>\n
CLOUD_NAME=test0\nUPLOAD_PRESET=rftg435ebtre4\n<\/code><\/span><\/pre>\n
Making the success callback<\/h3>\n
Now that we have those values in place, we need to define the callback for a successful video upload. This is where we\u2019ll get the URL to store in the database and where we\u2019ll make that GraphQL call now. You can delete the form now!<\/p>\n
The success callback will look like this. It\u2019ll go right above the return<\/code> statement.<\/p>\n
const<\/span> successCallBack = (results<\/span>) =><\/span> {\n  const<\/span> videoInfo = results.info\n  const<\/span> input = {\n    name<\/span>: videoInfo.original_filename,\n    duration<\/span>: videoInfo.duration,\n    url<\/span>: videoInfo.url,\n  }\n  createVideo({ variables<\/span>: { input } })\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
When you run the app with yarn rw dev<\/code> and go to http:\/\/localhost:8910\/videos\/new<\/code> in your browser, you should see a new button above the form that says \u201cOpen\u201d. This opens the Cloudinary upload widget.<\/p>\n
\"upload<\/p>\n
\"upload<\/p>\n
Upload a few videos and you\u2019ll see you get redirected to the main videos page that has a table with references to all your videos.<\/p>\n
\"video<\/p>\n
All that\u2019s left now is to show the videos on this page in a library format!<\/p>\n
Showing the media<\/h2>\n
Now you\u2019ll need to go to web > src > components > Videos<\/code> and open Video.js<\/code>. This is the file that has the table we see with our video info listed. We\u2019re going to keep the table and add the videos above it.<\/p>\n
Since this component already has all of the video data fetched, we\u2019re going to add another .map<\/code> over the videos and create new elements. Add this code right above the table element.<\/p>\n
<div<\/span>\n  style<\/span>={{<\/span>\n    display:<\/span> 'flex<\/span>',\n    flexWrap:<\/span> 'wrap<\/span>',\n    justifyContent:<\/span> 'space-evenly<\/span>',\n    marginBottom:<\/span> '24px<\/span>',\n  }}\n><\/span>\n  {videos.map((video) => (\n    <video<\/span> width<\/span>=\"320\"<\/span> height<\/span>=\"240\"<\/span> controls<\/span>><\/span>\n      <source<\/span> src<\/span>={video.url}<\/span> type<\/span>=\"video\/mp4\"<\/span> \/><\/span>\n      Your browser does not support the video tag.\n    <\/video<\/span>><\/span>\n  ))}\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
If you reload your page, you should see something similar to this, but with your videos.<\/p>\n
\"video<\/p>\n
We\u2019re done! Now you have a fully functional media library. You can customize how content is displayed and how users interact with it if you add a little more imagination to what we started. You could add this functionality to the Image<\/code> components we didn\u2019t cover. (It\u2019s why I put them in this guide.)<\/p>\n
Finished code<\/h2>\n
You can check out the full code in this GitHub repo in the media-library<\/code> directory. Or you can check out the front-end in this Code Sandbox<\/a>.<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
Note: You won\u2019t be able to see everything in the Code Sandbox because it doesn\u2019t support monorepos like Redwood.<\/em><\/p>\n
Conclusion<\/h2>\n
Storing media references to your own database can give you the flexibility to monitor changes over time. They can also act as a buffer against people trying to access your Cloudinary account. Some performance aspects might also make media references in your database useful.<\/p>\n
Regardless of what your reasons are, now you know how to handle this use case quickly with the help of Redwood.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28198,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,246,371,303],"class_list":["post-28197","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-react","tag-under-review","tag-video"],"acf":[],"yoast_head":"\nMaking a Media Library<\/title>\n<meta name=\"description\" content=\"Having a customizable media library can help you keep track of relevant content and manage settings around it. In this post, we'll create a media library that can be extended to cover a lot of different needs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Making a Media Library\" \/>\n<meta property=\"og:description\" content=\"Having a customizable media library can help you keep track of relevant content and manage settings around it. In this post, we'll create a media library that can be extended to cover a lot of different needs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-23T22:59:01+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925138\/Web_Assets\/blog\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Making a Media Library\",\"datePublished\":\"2022-03-23T22:59:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925138\/Web_Assets\/blog\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"React\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/\",\"name\":\"Making a Media Library\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925138\/Web_Assets\/blog\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2.jpg?_i=AA\",\"datePublished\":\"2022-03-23T22:59:01+00:00\",\"description\":\"Having a customizable media library can help you keep track of relevant content and manage settings around it. In this post, we'll create a media library that can be extended to cover a lot of different needs.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925138\/Web_Assets\/blog\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925138\/Web_Assets\/blog\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2.jpg?_i=AA\",\"width\":5957,\"height\":3493},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Making a Media Library\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Making a Media Library","description":"Having a customizable media library can help you keep track of relevant content and manage settings around it. In this post, we'll create a media library that can be extended to cover a lot of different needs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/","og_locale":"en_US","og_type":"article","og_title":"Making a Media Library","og_description":"Having a customizable media library can help you keep track of relevant content and manage settings around it. In this post, we'll create a media library that can be extended to cover a lot of different needs.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-23T22:59:01+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925138\/Web_Assets\/blog\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/"},"author":{"name":"","@id":""},"headline":"Making a Media Library","datePublished":"2022-03-23T22:59:01+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/"},"wordCount":4,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925138\/Web_Assets\/blog\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2.jpg?_i=AA","keywords":["Guest Post","React","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/","name":"Making a Media Library","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925138\/Web_Assets\/blog\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2.jpg?_i=AA","datePublished":"2022-03-23T22:59:01+00:00","description":"Having a customizable media library can help you keep track of relevant content and manage settings around it. In this post, we'll create a media library that can be extended to cover a lot of different needs.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925138\/Web_Assets\/blog\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925138\/Web_Assets\/blog\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2.jpg?_i=AA","width":5957,"height":3493},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-media-library-with-redwood\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Making a Media Library"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925138\/Web_Assets\/blog\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2\/cb1ca04df335d4cd75a8d49433a2a5c3612f418b-5957x3493-1_281980dcd2.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28197"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28197\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28198"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}