Bash Script to Get Vimeo Thumbnails for Hugo Website

Published on 2020-06-19 by Kenneth Flak

Back to Tech Research

Table of Contents

• The Workflow
• The Simplifications

Over the last six months or so we've steadily been trotting out new sketches on our website. The workflow for this has been quite laborious, so I started thinking about how to make my life a little bit easier.

The Workflow

This is the way we have produced the sketches:

1. Record the sketch (a whole process in itself)
2. Edit it in olive, a video editor for Linux which is still in alpha, but that is by far the best open-source video editor I've worked with.
3. Upload to vimeo through the website.
4. Go to depone.dev, paste the video link, click Get Thumbnail, right-click on the image, download it to the right directory
5. Compress the file with mogrify
6. Create a hugo page
7. Paste the vimeo id into the frontmatter
8. Type the filename of the thumbnail into the frontmatter.
9. Create a gitlab snippet containing the source code
10. Copy the link to the javascript for the gitlab snippet into the page.
11. Publish by git add, git commit, git push origin master.

At this point you are probably thinking what I'm thinking: there is potential for improvement here!

The Simplifications

Looking through the above, there are some obivous candidates for simplifications: The recording and editing are separate processes with separate issues. The uploading to vimeo could theoretically be done through ftp on the command line, but that requires a Pro subscription. Not going down that road. Downloading thumbnails, putting them in the right directory and compressing them, however, are eminently scriptable and, as such, automatable.

Enter Bash. This script presupposes a hugo blog page written in markdown, using a vimeo variable in the frontmatter to populate the resulting website:

---
title: Title of the sketch
vimeo: <id of the video>
image: "path/to/thumbnaildir/title-of-the-sketch.jpg"
other stuff...
---

The script is called like this: vimeothumbnailer.sh title-of-the-sketch.md. It extracts the vimeo id from the frontmatter, sends a call to vimeo's api to get a download link for the thumbnail, saves it to the thumbnail directory that I have hardcoded into the script, and compresses it. The next step is to rewrite the page template to automatically include the thumbnail without me having to specify the image file in the frontmatter.

#!/bin/bash

page="$1" 
thumbnaildir="$2"

if [[ -f "$page" ]]; then
    id=$(grep -n ^vimeo: $page | awk '{print $2}')

    thumbnaildir=/path/to/thumbnaildir

    echo "Using thumbnail directory: $thumbnaildir" 

    fullpath=$(readlink -f $page)
    file=$(basename -- "$page")
    filename="$thumbnaildir/${file%.*}.jpg" 

    url=$(curl http://vimeo.com/api/v2/video/$id.json | \
        jq '.[0].thumbnail_large' | \
        sed s/\"//g\
    )

    echo "Downloading thumbnail"

    curl $url -o $filename

    echo "Compressing filesize"
    if [[ $? -eq 0 ]]; then
        mogrify -resize 500x333 -quality 50% -strip $filename
        exit 0
    else
        exit 1
    fi
else
    echo "Please specify page!"
    exit 1
fi