Adam Laycock

AboutProjectsContact

Featured Posts

Moving to Gatsby

4th December 2018

Ive moved my site over to Gatsby!

Everything an Option in the Theme

18th August 2016

My aproach to WordPress theme development.

RADIUS With Windows Server 2012R2

22nd July 2016

RADIUS authentication for wireless networks using NAP in Windows Server 2012R2.

Generated Social Images

23rd January 2019

  • Gatsby

I follow dev.to who have some great images on their tweets that are bascially just the post title and author. I really like the way it looks and want to try something here.

dev.to example

I’m not a fan of manual labour and that includes using photoshop to create an image for each post so that only leaves generating the images with Gatsby.

JIMP

I wanted to keep the image generation entirely in Gatsby to keep things easier. This meant I needed a JS only image creation library which is where I found JIMP.

I fire my createImage function for nodes that I might share like posts, notes and books during the on-create-node hook.

This function creates an image for both Facebook and Twitter that I link to through the open graph tags in the templates Helmet.

The images themselves are nothing special just the content background colour, the sites icon, the post date, and the title. Take the one for this post:

This posts image

The code to do this is pretty simple and can be found in the sites source here. I was surprised how easy this turned out to be.

Having gatsby generate the images instead is pretty handy. I can keep the images out of the git repository which is already pretty big and I wont have to remember to make sure they commit.

This is a small feature that most users of the site wont even see but its a nice one to have. I’ve been more and more impressed with Gatsby as I’ve been using it to the point that I now think along with Netlify CMS it can be a complete replacement for WordPress for the School websites I build.

Syndication

Dev.to

Other Posts

Snow Crash

22nd January 2019

    WP Update Provider

    14th February 2019

    An easy to manage update provider for WordPress

    Adam Laycock
    TwitterGitHubDev.toInstagramYouTube
    Recent Articles
    Disclaimer

    All content is my own unless otherwise stated.

    My content is licensed under the CC-BY-NC-SA 4.0 license

    cc by-nc-sa