@lachlanjc/notebook

Page views:

Shareable image profiles for Gun Funded

I’m working on a new project called Gun Funded, showcasing the gun lobby’s funding of the U.S. Congress. Sharing links to Congresspeople’s profiles on Twitter, Facebook, etc, I wanted to highlight the gun funding amount before people even open the site. But I also wanted the profiles to be shareable on Instagram Stories (for us youths), which requires a vertical format (as seen on the left & right). Here’s how I made a social cards service for Gun Funded.

Avatars

Before we can get to the cards, each Congress member needs an avatar.

The unitedstates.io project has the unitedstates/images archive on GitHub, but it’s unfortunately out of date. Someone forked it with updates, then I added a few missing members.

Next, I wanted to compress the images (they’re also used on the main website, where Google PageSpeed flagged their extra size as slowing down the site). I wrote a quick Bash script to run Google’s fantastic Guetzli image compressing library on the folder. (There’s probably a better way to do this, but I’m terrible at Bash.)

#!/bin/bash
for file in $@
do
  guetzli $file $file
done

It took about half an hour & drained half my laptop’s battery, fans up 100% 😅

Getting online

I’ve been using & loving ZEIT Now for the main Gun Funded site, so I deployed the static folder to a new Now project:

One more command (now alias gunfunded-avatars.now.sh avatars.gunfunded.com) and our images are live!

The lineup, visually

I wrote a quick iOS Shortcut to get the headshots of every member of Congress, ranked by their gun funding, & create a grid of them all:

It took a few minutes to run, since it has to download hundreds of photos individually, but here’s the result:

Yes, Congress is that white.

Social cards

Back to the original mission. I’ve written in the past about making custom social card services based on ZEIT’s og-image, but this project is more complicated.

• I need to fetch data from the Gun Funded records database, to show funding
• I need to change styling based on the data
• I want variants for Twitter/Facebook/Open Graph social cards as well as vertical Instagram Stories

I cloned my ima-cards project, and removed the web testing UI code to simplify development.

The development process took several hours but wasn’t too hard—mostly, I don’t have much experience using TypeScript, but running the project with now dev was great. I copied the full data JSON file directly over, then worked on the design.

The design references the “I Voted” stickers, but with the brand, candidate, and funding amount. For Instagram Stories, I used the Instagram handle (@gunfunded), whereas on the web it uses the domain (gunfunded.com). With the Stories’ extra vertical space, it also shows the current term of the Congressperson.

I copied the same color palette as the site to keep the vibe/brand consistent. Though the site uses San Francisco/system-ui for typography, the incredible Inter font stepped in here.

Deployment was just as easy as for Avatars—just now & now alias to cards.gunfunded.com.

End results

Whether for Representatives or Senators, funded or not funded, Republican or Democrat, Instagram or Twitter, cards for all!

View source on GitHub, check out Gun Funded (launching soon!), & most importantly, register to vote.