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>

Example

Please support me on Patreon if you find this package helpful :)