Automate your social post images the easy way

Using jekyll and gulp to build your blog? I made a little tool that skips a step so you can post faster and go further.

Currently, I am learning unix at work, so what better way to learn something than to build a tool for myself. My tool takes a gulp task that runs through my uncompressed image assets folder and compresses/resizes/moves images to the desired social media folder. I only care about Open Graph and Twitter. The Open Graph should also work for schema.org, which I coupled together.

To start off this is my directory structure.

You can modify my script any way you want, but just so you have a clear view of where to begin.

Here are the steps you’ll need to take in order to implement this process.

1. Read David Ensinger blog post about creating meta tag logic. Very helpful if you forget to add an image or leave something out. I like the idea that my pages all have default title/descriptions/images.

2. Have your head look something like mine.

3. Here is the bash script I made. Named my file social.sh and it is in the root of the project.

4. $ brew install imagemagick

5. $ npm install gulp-exec --save-dev be sure to be in the root of your project.

6. Edit your gulp.js and be sure to restart gulp after changes are made.

    //initiate
    var gulp = require("gulp"), exec = require('child_process').exec;

    // Compress/Resize/Move images
    gulp.task('share', function(){
        exec('./social.sh', function (err, stdout, stderr) {
            console.log(stdout);
        });
    });
    

7. Since this is jekyll we need to edit the front matter so our default image is not used. Here is an example of my yaml front matter I have on this very article. As you can see I am only using the file name for the image data. The rest of the information is hidden away on the meta data.

---
layout: post
date: 2016-01-20
title:  Automate your social post images the easy way
description: Using jekyll gulp build system I made a script to help automate social post image formatting and resizing.
categories: article
image: automating-social-images
---

8. Open terminal and cd into the root of your project then type gulp share … BOOM! or if you have built a string of production commands to run once you’re ready to publish just add it and forget about it. Something like this.

gulp.task("publish", ["build"], function () {
  gulp.start("html", "share", "copy", "images", "fonts", "javascript", "javascriptScripts");
});