Jekyll Gensocial

A Jekyll plugin that automatically generates images that will be used when your links are shared on social media.

^ Here's an example.

Installation

Dependencies

First install ImageMagick (and GhostScript if you don't supply your own font):

macOS

brew install pkg-config imagemagick [gs]

Linux and Windows

Haven't tried yet. If you have, please submit a PR.

Jekyll

Add gem "jekyll-gensocial" to the :jekyll_plugins group in your Gemfile:

# Gemfile

group :jekyll_plugins do
  gem "jekyll-gensocial"
end

Add these lines to your site's _config.yml:

# _config.yml

plugins:
  - jekyll-gensocial

Usage

You can customize the image's background layer and text appearance from your _config.yml.

# _config.yml

jekyll-gensocial:     # These are the default settings
  enabled: true       # Disables the output
  size:               # The size of the overall canvas
    width: 1920
    height: 1080
  background:         # The background image
    path: nil
  text:
    string: nil       # Overrides the post/page title
    font_path: nil    # Path to your custom font
    pointsize: 100    # Font size
    fill: "#000000"   # Font color
    rect:             # Text will appear inside this frame
      size:
        width: 1600
        height: 500
      origin:
        x: 150
        y: 100

Set the image front matter in the posts and pages that you want to generate images for.

# _posts/2020-03-19-macdevsclub.md

---
layout: post
title:  "Your #1 resource for building, distributing and selling Mac apps. Visit macdevs.club!"
date:   2020-03-19
categories: [swift-ui]
image: assets/img/macdevsclub.jpg
---

The contents of your post goes here.

After building the site, an image will appear in [your site's source]/assets/img/macdevsclub.jpg.

The plugin generates images in the source directory per default. This enables post-processors to minify and optimize the files if needed.

Overrides

You can override the default settings on a per post/page basis.

# _posts/2020-03-19-macdevsclub.md

---
layout: post
title:  "Your #1 resource for building, distributing and selling Mac apps. Visit macdevs.club!"
date:   2020-03-19
categories: [swift-ui]
image: assets/img/macdevsclub.jpg
jekyll-gensocial:
  text:
    string: "Let's display something else"
    fill: "#ff0000" # And make it red
---

The contents of your post goes here.

Example

# _config.yml

jekyll-gensocial:
  background:
    path: "_assets/img/gensocial_bg.jpg"
  text:
    fill: "#2d3748"
    font_path: "_assets/fonts/Lato-Regular.ttf"

Purpose

Used in conjuction with the jekyll-seo-tag plugin, this automatically improves how your links look when shared online.

Instead of having to create a new image for every page and post, why not automate the process.

Development

After checking out the repo, run script/bootstrap to install dependencies. Then, run bundle exec rake spec to run the tests.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in lib/jekyll-gensocial/version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/boyvanamstel/jekyll-gensocial. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to behave appropriately.

Stuff to work on

• Expand testing to verify generated images.
• Add support for setting a background color (instead of just an image).
• Don't overwrite existing images per default.
• Introduce a way to update images that have changed.

License

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