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 :
- Google Drive
- Azure Storage
- Google Cloud
- Blackblaze
- Amazon S3
- Or create a custom webhook
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
, andCLOUDINARY_API_SECRET
on your Cloudinary dashboard. - If you want to avoid the browser warning about mixed content, you should set the
secure
value totrue
.
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.
Also read: