Zach’s ugly mug (his face)

Zach Leatherman

Bulk Generating OG Images

August 03, 2020

While working on the 1 Million Developers site for Netlify (which is open source, by the way), I was tasked with generating the images that would appear on tweets shared out from the site.

For a first draft, I was given a bunch of static images of varying sizes and I wanted to generate a bulk set of Open Graph images out of these. While I didn’t end up using this in the final product (we went with videos instead), I thought it was worthwhile to share in case someone else found this useful (and for future me, too).

This shell script uses imagemagick.

  1. Uses a directory of input images. It doesn’t matter what size they are, but the bigger the better.
  2. Resizes each image to the expected OpenGraph image canvas size (with padding).
  3. Adds a background color.
  4. Adds watermark image of your choosing to the bottom right corner.
  5. Writes them all to the output directory.

Code #

echo "Uses imagemagick."

images="input/*.png"
watermark="watermark.png"
outputDir="output/"
bgColor="#00dc9e"

mkdir tmp/
mkdir $outputDir

convert "$watermark" -resize x60 -gravity center -background "transparent" "tmp/watermark.png"

for i in $images
do
# resize image
convert "$i" -resize x530 -background $bgColor -gravity center -extent 1200x630 "tmp/${i##*/}"
# add watermark
composite -gravity SouthEast -geometry +20+20 "tmp/watermark.png" "tmp/${i##*/}" "${outputDir}${i##*/}"
done

rm -rf tmp/

Sample Input #

Sample Output #

Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He’s currently fixated on web fonts and static site generators. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

Previous
Netlify’s Merry Band of 1 Million Developers
Next
The Lighthouse Scores Will Continue Until Morale Improves

9 Retweets

ShirishDan DenneyTorsten KnabePhil HawksworthAndy BellvictorkaneAWebFactorydemystifying.devJeremy Wagner
51 Likes
Bryce WrayDaniel EhnissMatt O'Leary@thomas@social.tzi.frShirishhenry▘John MeyerhoferTom Hermans🤘Wayne ElginPeter AntoniusJakeCorey MegownFrank AdebiayeBiteworks ArtTanner DolbyBrett JankordStephen Brown-BourneBryan RobinsonMatthias Ott✨JoëlMichael GehrmannDan Denneymason conkrightSebastien CoupeTorsten KnabeRicardo Blanch PMKÿle MacqüarrieEric Bailey0x1312babeAshur Cabrera 😷Andrew Ekdan leathermanLincoln MongilloMike Apariciof-elixBraden East 💡victorkaneit-spirit - Black Lives MatterSébastien Lavoiedemystifying.devJulien BidoretAWebFactoryNiyaz PoyilanDevin ClarkLisa DavisAndy BellMarco HengstenbergMarcus RelacionJacob D. Castro♟Pusha B 🐝Joel G Goodman
1 Bookmark
  1. Barry Frost

    Barry Frost https://barryfrost.com/ #

1 Reply
  1. Andy Bell

    Andy Bell @hankchizljaw #

    Handy!

    2 Mentions
    1. Dave Harrison

      Dave Harrison @daveharrisonnet #

      I can see this getting a turn!💕

    2. Joel G Goodman

      Joel G Goodman @joelgoodman #

      Very fun.