Using Cloudinary For Ghost Image Storage

Ghost already has image processing that can increase image load, but since you search how to integrate ghost with Cloudinary I bet you host the Ghost on your own hosting. So that's why image load also will depend on your hosting provider.

How To Integrate Cloudinary Into Ghost Installation.

But first, you might have a doubt, because actually there are a few more of Ghost storage adaptor. So..

Why Cloudinary?

In the context of image media library alternatives for Ghost integration, Cloudinary can be used for photography or entertainment blog.

Get Ghost theme and Unlimited Resources (*aff*)

It is faster load and easy media management.

To be honest, this blog also using Ghost as the CMS and I integrate it with Cloudinary. Well, guess it too much..

Are there any Cloudinary alternatives?

There are some other alternatives If you need just for assets management. You can try :

How to install the ghost CMS?

We will be using this recommended adapter.

You can check this repo: https://github.com/eexit/ghost-storage-cloudinary

Installation

Go to your Ghost root directory on the server

Run this command:

$ yarn add ghost-storage-cloudinary

$ mv node_modules/ghost-storage-cloudinary content/adapters/storage/ghost-storage-cloudinary

We add ghost storage adapter dependencies to the root folder.
Then we move the adapter directory into the theme storage adapter directory.

Configurations

We can set the configurations now.

Open your ghost configuration file, either config.production.json or config.development.json file. Then add a storage and imageOptimization options.

"storage": {
    "active": "ghost-storage-cloudinary",
    "ghost-storage-cloudinary": {
      "useDatedFolder": false,
      "auth": {
        "cloud_name": "<CLOUDINARY_NAME>",
        "api_key": "<CLOUDINARY_API_KEY>",
        "api_secret": "<CLOUDINARY_API_SECRET>"
      },
      "upload": {
        "use_filename": true,
        "unique_filename": false,
        "overwrite": false,
        "folder": "blog-images",
        "tags": [
          "blog"
        ]
      },
      "fetch": {
        "quality": "auto",
        "secure": false,
        "cdn_subdomain": true
      }
    }
  },
  "imageOptimization": {
    "resize": false
  },

You can find your CLOUDINARY_NAME , CLOUDINARY_API_KEY, and CLOUDINARY_API_SECRET on your Cloudinary dashboard.
If you want to avoid the browser warning about mixed content, you should set the secure value to true.

Save the configuration JSON file and make a restart your Ghost!

Try to add an image to your post, the image should now be uploaded to your Cloudinary Media Library.

Don't forget you can set the folder and tag to make it easy to manage your assets.

Configure Storage Adapter After Ghost Update.

Updating Ghost installation will add the new version to the version folder on the root. And we know from the integration of storage adaptor is, placing the "ghost-storage-cloudinary" to the Ghost version directory.

So it simply after you have done updating the version is done, you must move the "ghost-storage-cloudinary" directory again to the new version of ghost.

Then try to restart the Ghost. Make a test by upload an image to the post.

You can support this blog with cup of a coffee :

Buy Me A Coffee