Create Custom Social Images for Building Pages

[vkoves]

If we want to make Electrify Chicago easy to share, adding a helpful social preview image (maybe showing the building image, the energy mix, and some rankings) would be helpful. Here's how it looks right now:

For comparison, here's how GitHub's social images look when you share this repo:

I did something like this with imagemagick for chiwho.bike, where I created a template image and then added the interview photo on top of it, but adding text or graphs is likely to be more complex.

For Chicagoans Who Bike, the command looked like:

  # Resize the source image to 630px tall to match the social image, then add it onto our template
  # on the left hand side (-gravity West). We output to JPG (rather than WEBP) for higher
  # compatibility, since social media images can be ingested by back-end services
  convert ./imgs/cwb-social-template.png $prim_img_path -resize x630 -composite -quality 80 -gravity West ./imgs/interviews/$1/$1-social.jpg

Where $prim_img_path was the image I was using, and cwb-social-template.png was the underlying base image. This just combines two images, but ImageMagick also has tools to write text.

[vkoves]

Here's the social image file we worked on tonight, in this Figma:

And here's the image without everything:

[vkoves]

The Python package wand may also help, see: https://github.com/emcconville/wand

[vkoves]

@vaidehia something else I stumbled upon, that you could consider:

https://joyofcode.xyz/dynamic-social-share-images#javascript

Hypothetically we could do this via a page on the website and then export screenshots, which would let us do more complex stuff via CSS, and could let us import our existing graphs. Might be a good option if Image Magick has been pretty complex!