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


< Newer
Netlify’s Merry Band of 1 Million Developers
Older >
The Lighthouse Scores Will Continue Until Morale Improves

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

11 Reposts

Jeremy Wagnerdemystifying.devAWebFactoryvictorkaneAndy BellPhil HawksworthJoel G GoodmanTorsten KnabeDan DenneyDave HarrisonShirish

51 Likes

Bryce WrayDaniel EhnissMatt O'Leary@thomas@social.tzi.frShirishhenry▘John MeyerhoferTom Hermans🤘Wayne ElginPeter AntoniusCorey MegownJakeFrank AdebiayeBiteworks ArtTanner DolbyBrett JankordStephen Brown-BourneBryan Robinson✨JoëlMatthias OttMichael GehrmannDan DenneySebastien Coupemason conkrightTorsten KnabeRicardo Blanch PMKÿle MacqüarrieEric Bailey0x1312babeAshur Cabrera 😷Andrew Ekdan leathermanLincoln MongilloMike Apariciof-elixBraden East 💡it-spirit - Black Lives MattervictorkaneSébastien Lavoiedemystifying.devJulien BidoretAWebFactoryNiyaz PoyilanDevin ClarkAndy BellLisa DavisMarco HengstenbergMarcus RelacionJacob D. Castro♟Pusha B 🐝Joel G Goodman

1 Bookmark

IndieWeb Avatar for https://barryfrost.com
1 Comment
  1. Andy Bell

    Handy!

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)