Making a Twitter Collage

This is a lazy way of making a collage of Tweets.

I was originally going to use this method:

but, sadly, gnome-web-photo crashed repeatedly when I tried to use it. It is a typically unloved Linux program, hundreds of bug reports, but no one looking to fix them.

Instead, I used the Scheenshotlayer API - I passed wget the URLs and got back a bunch of full sized screenshots.

wget doesn't name the files nicely - so you just get the full URl as the filename. Here's a quick bash script to rename them all with padded zeroes.

for file in *;
   printf -v num '%02d' $var ;
   mv ${file} ${num}.png;

OK, so, how do we grab just the parts that we want? Rather than using any fancy image recognition stuff, I measured the area by hand.

And, to cut the image out? ImageMagick to the rescue! Let's grab a rectangle 624 pixels wide, but 900 tall, starting at 400 pixels from the left and 0 pixels from the top.

convert tweet.png -crop 624x900+400+0 +repage cropped.png

The +repage is needed to prevent offsetting issues.

And, to do that for all images in a directory:

mogrify -crop 624x900+400+0 +repage *.png

Right! Let's lay these out. Without a doubt, the simplest way is using ImageMagick's montage command.

montage *.png -tile 4x10 -geometry +0+0 montage.png

This lays out all the images on a grid 4 images wide and 10 high. The -geometry ensures there is no border around the image.

I then resized the image suitable for sticking on a web page.

The result?

poo emoji montage of tweets


The only rough spot in this process is cropping the images. At the moment, there's a lot of empty space around the Tweets. Some - with smaller photos - have gaps at the top and bottom. A more intelligent method of extracting the information is needed!

Share this post on…

One thought on “Making a Twitter Collage”

  1. mike says:

    No gnome-web-photo, at least in the two examples I tried, outputted images that could be nicely cropped to just the tweet using consistent coordinates at top left and bottom right. So it's a shame it didn't work for you as I think if it had you wouldn't now be wondering about how to do better cropping.

    Another cli webpage to image tool is cutycapt.

    $ cutycapt --delay=5000 --min-width=624 --min-height=1000 --url=  --out=cuty_edent_www.png

    Without the delay the image in the tweet isn't in the grab. No idea why.

    For getting better crops, the area you care about has a white background and, if you've made an image of the http://www.twitter version of the tweet, that area is surrounded by non-white. Flood fill that white area with a colour that almost certainly doesn't appear elsewhere in the page, then convert every other colour except that one to black. Thenhave ImageMagick auto crop the image and extract the width, height and offset of the cropped image. Use that offset to crop the original image.

    $ for i in cuty_jen_www.png cuty_edent_www.png ;do wh=$(convert "${i}" -fill lime -draw 'color 20,200 floodfill' -fill black +opaque lime -trim info:- | cut -d ' ' -f 3); convert "${i}" -crop ${wh}+16+61 "cropped_${i}";done

    +16+61 are offset of the cropped image which I found to be the same for both images so have assumed is consistent and hardcoded due to sloppiness/laziness. If it's not it's easy to extract it for use. Can probably be made to work with images you got from screenshotlayer by changing the 20,200 and maybe the +16+61. Or maybe the idea is fundamentally flawed and I got lucky in it working on the two example I tried. 😉

    Even with better cropping you still have a bunch of different height images. montaging them separately in N 1xY strips of approximately the same height then sticking those together might work well, but you'd need to figure out which images to put in to which strip. No idea how to do that off hand.


What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">