I previously wrote about feature images in Generating Feature Images: Getting Started with Gulp:

When I post a link to one of my articles on social media, I try to always upload a related image to go along with it. I’ve been told these increase engagement. Up until now, this has been a manul process. I decided to search for a method to generate feature images for my posts, the way Dev.to generates feature images for their posts. I’ve found one and it uses Gulp and Puppeteer.

My journey into Gulp started backwards (ie. I found a Gulp/Puppeteer solution to my feature image generation problem). Nic Raboy wrote an article about this very topic late last year. I decided to take the solution, deconstruct it, and determine how Gulp makes all of this possible. I then wanted to incorporate this into my website’s GitHub Actions-based build pipeline.

I prototyped the Gulp script and it worked well for me, but I wrote it in a way that was not that scalable or easy to use. I needed to memorize the syntax for running the Gulp script and at the end of the day, Gulp wasn’t the write framework for a task like this…where I may be generating feature images for more than one article at a time.

So I decided to learn some TypeScript and rewrote (and branded) it as Fig (Fig stands for feature image generator).

Fig logo

Background about Fig

The core of the Gulp script is intact. It leverages an HTML template that can be used to design your feature image layout.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,500,700&display=swap" rel="stylesheet">
    </head>
    <style>

    </style>
    <body>
        <div id="outer">
            <div id="container">
                <div id="body">
                    [[TITLE]]
                </div>
                <div id="footer">
                    <div id="author">
                        <img id="author-img" src="author.png">
                        <div id="author-name">
                            [[AUTHOR]] • [[DATE]]
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

You can include CSS and image assets in your HTML template. These assets must exist in the same directory as your HTML template or be accessible on the internet.

The script replaces [[TITLE]], [[AUTHOR]], and [[DATE]] with values from the frontmatter of my article markdown. Once the replacement happens, it’s rendered in Google Chrome (using Puppeteer). I generate an image from the rendered template in Chrome. The generated image is the feature image used for social media posts and referenced in the <head> of the blog articles HTML.

Installing and Running Fig

I primarily wrote Fig to improve the developer, user, my experience generating feature images. I rewrote it in TypeScript, wrapped a command-line interface around the core logic, and published it to NPM. Installing and running Fig turned into a simple endeavor.

You must have Nodejs v14.14+ installed to execute fig-cli.

  1. Run npm install @evanhalley/fig to install Fig.

  2. Execute fig-cli --version and verify a version number is printed in the terminal.

Executing

You can use this tool in two ways.

Pass in argument’s via command line

You want to specify the title, published date, and author’s name using the command line.

Usage: fig-cli args [options]

Generates an image using the options specified

Options:
  -t, --title <title>                                             Article's title
  -d, --date <date>                                               Article's published date
  -a, --author <author>                                           Article's author's name
  -h, --html-template <path to the folder containing index.html>  Path to index.html template used to generate your feature image
  -o, --output <name and path to output>                          Name and path of the output file, append with .jpg or .png
  -v, --verbose                                                   Turns on verbose logging
  --help                                                          display help for command

Example usage:

fig-cli args --title "How to do Great Things" --author "Fig Newton" --date 2021-01-09

Read arguments from a text file’s frontmatter

You want to retrieve the title, published, and author from the frontmatter embedded in a text file.

Usage: fig-cli fm [options] <input>

Generates an image by parsing metadata from the frontmatter in the input file

Options:
  -o, --output <name and path to output>                          Name and path of the output file, append with .jpg or .png
  -v, --verbose                                                   Turns on verbose logging
  -h, --html-template <path to the folder containing index.html>  Path to index.html template used to generate your feature image
  --help                                                          display help for command

Example usage:

fig-cli fm /Users/fig/blog/posts/how-to-do-great-things.md

Outro

I wrote Fig to make this process of generating feature images easier. I ultimately want to remove the manual labor entirely by automating it. At the moment this process is manual and Fig over-fitted to my needs. I want to write a reusable GitHub Action so that I can have these images generated when my website is built and deployed. Finally, I want to add some more customization to be able to specify attributes like date formats, additional templating options, etc.

I’m going to slowly improve it over time, but in the meantime, you can checkout all the source code on GitHub…feel free to fork it, open a PR, or suggest features.

As an aside, I love writing TypeScript. It enabled me to easily write really clean Node code and allowed me to do some things with types you can’t really do with pure JavaScript. I feel really good about extending Fig going forward. I’ll write about this on a deeper level sometime in the future, but so far, it was an enjoyable experience.

🧇