README
gridsome-plugin-blog-cover
Automatically create cover images for your blog posts
Installation
npm install gridsome-plugin-blog-cover
Setup
Ensure you have a Cloudinary account.
Important
Before using this plugin, at least one of your existing contents need to have a cover image field set. This is is because Gridsome ignores an update to a node when you pass new fields that are non-existent. In other words, ensure a cover image field can be queried in the GraphQL explorer before setting up the plugin. Cheers 🎉.
plugins: [
//...
{
use: 'gridsome-plugin-blog-cover',
options: {
typeName: 'Post',
outputDir: './content/images',
domain: 'https://example.com',
coverField: 'cover_image',
slugField: 'path',
cloudName: process.env.CLOUDINARY_CLOUD_NAME,
apiKey: process.env.CLOUDINARY_API_KEY,
apiSecret: process.env.CLOUDINARY_API_SECRET,
uploadFolder: 'covers'
}
}
]
Plugin options
[required] typeName
The collection name for your posts.
- expected value:
String
- default:
Post
[required] outputDir
The directory to generate the cover images in, this should be relative to your project's root directory
- expected value:
String
- default:
content/images/
[required] domain
The url of your blog site
- expected value:
String
- default:
https://awesomeblog.com
[required] coverField
The field on the node used for cover images
- expected value:
String
- default:
cover_image
[required] slugField
The field on the node that contains the sluggified title.
It is sometimes path
or slug
depending on your CMS, Inspect your Graphql data layer to confirm.
It looks like this: /title-of-the-post/
.
- expected type:
String
[required] cloudName
Your cloudinary cloud name
- expected value:
String
[required] apiKey
Your cloudinary API key
- expected value:
String
[required] apiSecret
Your cloudinary API secret
- expected value:
String
uploadFolder
The folder to use for all uploads on Cloudinary
- expected value:
String
- default:
blog_covers
border
Have a thin white border around the content
- expected value:
Boolean
- default:
true
backgroundColors
An array of Hex color codes to use for backgrounds
- expected value:
Array
- default:
['#30475e', '#381460', '#ba6b57', '#21243d', '#434e52']
imgHeight
A desired minimum height for the image
- expected value:
String
- default:
650px
imgWidth
A desired minmum width for the image
- expected value:
String
- default:
700px
productionOnly
In a case where your posts are increasing, generating images and uploading can take time. use this to limit it to production builds only.
- expected type:
Boolean
- default:
false
Usage
<page-query>
query{
posts: allPost{
edges{
node{
id
title
cover_image # or your specified cover field
}
}
}
}
</page-query>