Bash Script to Get Vimeo Thumbnails for Hugo Website
Published on: 2020-06-19
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:
- Record the sketch (a whole process in itself)
- 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.
- Upload to vimeo through the website.
- Go to depone.dev, paste the video
link, click
Get Thumbnail, right-click on the image, download it to the right directory - Compress the file with
mogrify - Create a hugo page
- Paste the vimeo id into the frontmatter
- Type the filename of the thumbnail into the frontmatter.
- Create a gitlab snippet containing the source code
- Copy the link to the javascript for the gitlab snippet into the page.
- 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