Gridsome-plugin-blog-cover NPM

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

`typeName` required

The collection name for your posts.

expected value: String
default: Post

`outputDir` required

The directory to generate the cover images in, this should be relative to your project's root directory

expected value: String
default: content/images/

`domain` required

The url of your blog site

expected value: String
default: https://awesomeblog.com

`coverField` required

The field on the node used for cover images

expected value: String
default: cover_image

`slugField` required

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

`cloudName` required

Your cloudinary cloud name

expected value: String

`apiKey` required

Your cloudinary API key

expected value: String

`apiSecret` required

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>