Zach’s ugly mug (his face)

Zach Leatherman

Download a Twitter User’s Profile Image

January 16, 2019

The 11ty.dev web site uses avatar images for its Testimonial and Sites Using Eleventy features. I wrote a script to automatically download those avatar images based on usernames stored in data files in the 11ty.dev repository.

In that same vein, I created a simpler utility borne from that script. It will:

  1. Fetch the avatar image for any twitter username
  2. Add the correct file extension (png or jpg)
  3. Optimize the image using jpegtran or pngcrush (some of them were not optimized 🤷‍♂️)

Here’s an example:

$ ./fetch-twitter-image.sh zachleat
Created zachleat.jpg

(Don’t type the $ there)

And here’s the script. Save the following content as fetch-twitter-image.sh:

wget --quiet -O $1.jpg https://twitter.com/$1/profile_image?size=bigger

file="$1.jpg"
type=$(file-type $file)

if [[ $type == *"image/jpeg"* ]]
then
jpegtran "$file" > "$file_"
mv "$file_" "$file"
echo "Created $1.jpg"
elif [[ $type == *"image/png"* ]]
then
pngcrush -brute "$file"
rm $1.jpg
mv pngout.png $1.png
echo "Created $1.png"
fi

Don’t forget to add execute permissions to this file:

chmod +x fetch-twitter-image.sh

Install the Dependencies

  • wget: You probably already have this
  • file-type-cli npm install -g file-type-cli
  • jpegtran npm install -g jpegtran-bin
  • pngcrush npm install -g pngcrush-bin

(This script should be its own module on npm, huh?)

Bonus tip: Iterate over a Data File

Given this arbitrary data.json JSON file:

[{
"twitterUsername": "zachleat"
},{
"twitterUsername": "filamentgroup"
}]

Iterate over data.json using jq and fetch all the images.

for handle in $(cat data.json | jq -r '.[] | .twitterUsername'); do
./fetch-twitter-image.sh $handle
done
Zach’s ugly mug (his face)

Zach is a builder for the web. He created IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator now full-time sponsored by IndieWeb Avatar for https://www.netlify.comNetlify. At one point he became entirely too fixated on web fonts. He has given 63 talks in eight different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. Formerly part of Filament Group, NEJS CONF, and NebraskaJS. Read more about Zach »

Previous
Eleventy Quick Tip №7: Fetch GitHub Stargazers Count (and More) at Build Time
Next
Build your own Blog from Scratch using Eleventy

Shamelessly plug your related post:

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)