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.
Before we can get to the cards, each Congress member needs an avatar.
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% 😅
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.
- 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
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 alias to
Whether for Representatives or Senators, funded or not funded, Republican or Democrat, Instagram or Twitter, cards for all!