Bulk Generating OG Images

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 …


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

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 #


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman


Print Share Comment Cite Upload Translate
APA
Zach Leatherman | Sciencx (2022-12-01T21:25:47+00:00) » Bulk Generating OG Images. Retrieved from https://www.scien.cx/2020/08/03/bulk-generating-og-images/.
MLA
" » Bulk Generating OG Images." Zach Leatherman | Sciencx - Monday August 3, 2020, https://www.scien.cx/2020/08/03/bulk-generating-og-images/
HARVARD
Zach Leatherman | Sciencx Monday August 3, 2020 » Bulk Generating OG Images., viewed 2022-12-01T21:25:47+00:00,<https://www.scien.cx/2020/08/03/bulk-generating-og-images/>
VANCOUVER
Zach Leatherman | Sciencx - » Bulk Generating OG Images. [Internet]. [Accessed 2022-12-01T21:25:47+00:00]. Available from: https://www.scien.cx/2020/08/03/bulk-generating-og-images/
CHICAGO
" » Bulk Generating OG Images." Zach Leatherman | Sciencx - Accessed 2022-12-01T21:25:47+00:00. https://www.scien.cx/2020/08/03/bulk-generating-og-images/
IEEE
" » Bulk Generating OG Images." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2020/08/03/bulk-generating-og-images/. [Accessed: 2022-12-01T21:25:47+00:00]
rf:citation
» Bulk Generating OG Images | Zach Leatherman | Sciencx | https://www.scien.cx/2020/08/03/bulk-generating-og-images/ | 2022-12-01T21:25:47+00:00
https://github.com/addpipe/simple-recorderjs-demo