Jekyll OG Image

A Jekyll plugin to automatically generate open graph images for posts.

Installation

Add this line to your site's Gemfile:

  gem 'jekyll-og-image'

And then add this line to your site's _config.yml:

plugins:
  - jekyll-seo-tag
  - jekyll-og-image

This plugin requires libvips to be installed. If you are using GitHub Pages to host your Jekyll site, don't forget to install libvips before running jekyll build. See the example below.

jobs:
  build:
    needs:
      - lint
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: .ruby-version
          bundler-cache: true

      - name: Set Node.js 20.x
        uses: actions/setup-node@v3
        with:
          node-version: 20.x

      - name: Run install
        uses: borales/actions-yarn@v4
        with:
          cmd: install

      - name: Update apt
        env:
          DEBIAN_FRONTEND: noninteractive
        run: sudo apt-get update -qq

      - name: Install libvips
        env:
          DEBIAN_FRONTEND: noninteractive
        run: sudo apt-get install --fix-missing libvips

      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v5

      - name: Build with Jekyll
        run: ./bin/jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
        env:
          JEKYLL_ENV: production

      - name: Upload artifact
        # Automatically uploads an artifact from the './_site' directory by default
        uses: actions/upload-pages-artifact@v3

Usage

Jekyll OG Image works together with jekyll-seo-tag plugin. It automatically generates open graph images for posts and inserts them into the posts metadata.

Configuration

The plugin can be configured in the _config.yml file or in the post's front matter.

The following configuration options are available:

• collections - An array specifying which types of collections to generate images for. Supports "posts", "pages", and the names of any custom collections. Default: ["posts"]

• output_dir – The directory where the generated images will be saved. Images will be placed in subdirectories named after their collection type (e.g., assets/images/og/posts, assets/images/og/pages). Default: assets/images/og

• force – If set to true, the plugin will generate an image for every document, even if the document already has an image. Default: false

• verbose – If set to true, the plugin will output additional information about the image generation process. Default: false

• skip_drafts – If set to true, the plugin will skip post drafts when generating images. Default: true

• canvas – The canvas configuration options:

  • background_color – The background color of the canvas. Default: #FFFFFF
  • background_image – The background image of the canvas. Default: nil
  • width – The width of the generated image in pixels. Default: 1200
  • height – The height of the generated image in pixels. Default: 600

• header – The header configuration options:

  • font_family – The font family of the header text. Default: Helvetica, Bold
  • color – The color of the header text. Default: #2f313d

• content – The content configuration options:

  • font_family – The font family of the content text. Default: Helvetica, Regular
  • color – The color of the content text. Default: #535358

• border_bottom – The border bottom configuration options:

  • width – The width of the border bottom. Default: 20
  • fill – The array of colors to fill the border bottom. Default: ["#000000"]

• domain – The domain name to use in the image. Default: nil

• image – Path to the image to use as the logo. Default: nil

Examples

Configuration can be defined on the site level or on the post level.

For a side wide level configuration, edit your _config.yml, for a post level configuration, edit the post's front matter.

Single Color

# _config.yml
og_image:
  collections: ["posts", "pages"]
  output_dir: "assets/images/og"
  domain: "igor.works"
  border_bottom:
    width: 20
    fill:
      - "#4285F4"

Multiple Colors

# _config.yml
og_image:
  output_dir: "assets/images/og"
  image: "/assets/images/igor.jpeg"
  domain: "igor.works"
  border_bottom:
    width: 20
    fill:
      - "#820C02"
      - "#A91401"
      - "#D51F06"
      - "#DE3F24"
      - "#EDA895"

Background Color and Text Color

# _config.yml
og_image:
  output_dir: "/assets/og"
  image: "/assets/images/igor.jpeg"
  canvas:
    background_color: "#F9E065"
  header:
    font_family: "Roboto, Bold"
    color: "#333333"
  content:
    font_family: "Roboto, Regular"
    color: "#333333"
  force: false
  domain: "igor.works"
  border_bottom:
    width: 50
    fill:
      - "#002B7F"
      - "#FCD116"
      - "#CE1126"

Background Image

# _config.yml
og_image:
  output_dir: "/assets/og"
  image: "/assets/images/igor.jpeg"
  header:
    font_family: "Roboto, Bold"
    color: "#333333"
  content:
    font_family: "Roboto, Bold"
    color: "#333333"
  force: false
  domain: "igor.works"

# _posts/2024-02-15-traefik-tunning-for-rails-applications-part-1.md
---
title: Traefik Tuning for Rails Applications (part 1)
layout: post
tags:
  - Rails
  - Traefik
  - Kamal
og_image:
  canvas:
    background_image: "/assets/images/bc_3.jpg"

Contributing

• Fork it (https://github.com/igor-alexandrov/jekyll-og-image)
• Create your feature branch (git checkout -b my-new-feature)
• Commit your changes (git commit -am 'Add some feature')
• Push to the branch (git push origin my-new-feature)
• Create a new Pull Request

License

The gem is available as open source under the terms of the MIT License.