How does Twitter align/position images in the timeline?


#1

I run an app that let’s users design images to tweet out (eg. put text and filters on an image they upload)
Since only part of the image is visible (526x260), I’m trying to figure out how Twitter aligns them

It seems like if I upload an image with a ratio of 2:1, no margin-top is assigned
However other times, margin-top properties are

I’d love to know the algorithm they/you are using to determine how much to “pull up” the image by
I tried applying an exponential regression (since the pattern seems exponential) to the data points I’ve stumbled on, but unfortunately, it seems like the data points are themselves being rounded before I receive them, so I’m not able to find the pattern.

Here are the data points I’ve found
Ratio represents the ratio of the image that is uploaded; margin-top represents that the number of pixels the image is “pulled up” by

Ratio: 6
margin-top: 0

Ratio: 3
margin-top: 0

Ratio: 2
margin-top: 0

Ratio: 6/4
margin-top: -42

Ratio: 6/5
margin-top: -84

Ratio: 6/6
margin-top: -126

Ratio: 6/7
margin-top: -168

Ratio: 6/8
margin-top: -210

Ratio: 6/9
margin-top: -253

Ratio: 6/10
margin-top: -295

Ratio: 6/11
margin-top: -337

Ratio: 6/12
margin-top: -379

Thanks for any help!


#2

Hi Onassar,

Did you ever get any further with this?
As far as I can tell it’s not documented anywhere but here.

For the moment, your stated ratios seem to work, with one notable exception.

Ratio: 2
margin-top: 0

This is no longer accurate, and seems to centre align the image, sharing 50% of the overlap above and below the twitter image preview.


#3

Hi @Peachey_A
Funny timing: I’m actually in the process of going over this exact thing again in the next week or so (and hoping to cover both desktop and mobile vertical alignment).

I did happen to find the pattern, but I can’t get into the logic of it at the moment. Head is dedicated to a few other prickly problems. Here is the code I settled on, though: https://i.imgur.com/Nyzbc9l.png

My guess is that since it’s been a year, that logic may not apply directly anymore (primarily because Twitter has changed their desktop UI a couple times since then, including the width of their timeline [which the calculation is in part founded on])

I sincerely don’t really remember the logic I employed here. #embarrassed
When I re-approach this problem shortly, I’ll likely write a blog post and throw up a small library on GitHub that returns back the margin-top you need to apply (likely, for both desktop and mobile versions)


#4

From experience twitter are scanning the photos for relevant information and will try to ensure that it’s within the frame. Faces are a good example. On top of that whilst images in a ratio of 2:1 tend to stay uncropped, on mobile (android at least) they end up being 3:2 (or something similar)


#5

Thanks for the feedback @artesea
Do you have any examples where Twitter will treat two different images differently, in terms of positioning?
When I tackled this a year ago, it turned out to be a relatively simple (but hard to find) algorithm. I’ms ure they could have changed things though. Would love to see what you ran into.


#6

An example is this tweet https://twitter.com/kany_burgess/status/659409646508187648 if you find it in a timeline (at the moment a manual retweet is showing below) it’s cropped from the top (no margin top at all). Whereas lots of other images are centred https://twitter.com/faisalislam/status/659751120143818752