Using Cloudinary For Ghost Image Storage

Sponsor: Quick testing across devices with this browser built for web developers.

Ghost already has image processing that can increase image load, but since you searched 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 doubt it because, actually, there are a few more Ghost storage adaptors. So..

Why Cloudinary?

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

It is a faster load and easy media management.

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

Are there any Cloudinary alternatives?

There are some other alternatives If you need them 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 restart your Ghost!

Try to add an image to your post, and 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. We know from the integration of the storage adaptor that it is placing the "ghost-storage-cloudinary" in the Ghost version directory.

So, 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 uploading an image to the post.