Installing and Configuring the Strapi Cloudinary Provider
To be able to render images in our markdown files, we are going to use Cloudinarly's provider on Strapi. In the Marketplace in our app on Strapi, we can copy the install command and use it in our app. npm install @strapi/provider-upload-cloudinary.
In our config folder, we will create a new plugins.js file and past in some code. (You'll be able to snag that from the github link below). We'll also setup our env folder for our cloudinary variables.
Instructor: [0:00] Despite using React Markdown, our Markdown image isn't rendering in the frontend of our Next application. If we check our Strapi content manager, our image is only a relative URL. We want to have an absolute URL so that no matter where we deploy our application, the image is rendered. [0:19] What we want to do then is install our image provider to manage our assets. If we're going to a Marketplace and click the provider tab, we have Cloudinary as an option. Click learn more and install our Cloudinary image provider. We'll copy the command and going to our terminal or switch tabs to open our Strapi terminal and stop our app.
[0:43] We'll paste the command npm install Strapi and upload provider upload Cloudinary. After our plugin is installed, we'll open up our Strapi application in VS Code so we can add some configuration. We'll close Thunder Client. Inside our config folder, we'll create a new file called plugins.js. Inside plugins.js, we'll paste in the configuration from the Cloudinary documentation, and save that.
[1:29] Then in middlewares.js, we need to add something to the security section of the security middleware. Right after errors, we'll change that to add a new security policy that helps us accept images from the endpoint as well as exception for our marketplace images, and we'll save that.
[1:57] In our nth, we need to paste our Cloudinary secrets and save. We'll run npm run build to build our admin. Now that our admin is built, we can run npm run develop to restart our Strapi server. Then we'll open our browser. Then we go to our content manager in our Strapi dashboard and open our first entry.
[2:28] We'll get rid of our first entry and replace that with a new image that we'll upload. Click add more assets and browse files. We'll add this file, edit it and say distraught character and change the file name to meme. Finish and upload that. Click that, finish.
[2:55] Now, we get the full Cloudinary URL. We'll save this and go back to our blog. I click that again, we get the image appearing as expected. That is how you add Cloudinary to your Strapi application.