Greasy Fork

Expand height

Is it possible to do 100% width and expand height to fill container? Like here: https://userstyles.org/styles/121426/twitter-expand-media

Maybe... sort of...

I think the link you provided is for the old Twitter UI? -> The new UI based on the React framework is VERY different. => I you find something like this for the new UI please let me know!

Nevertheless, there is a way to increase the height of image posts. However, it doesn't make the image use up all available width - instead it (!)seems(!) to set the zoom of the thumbnail image to 100%. This about doubles the height...

However, I've encountered a weird issue when this is applied for multi-image posts. It (!)sometimes(!) leads to a neverending event-cascade that slows down the browser - and to be honest, I'm currently at a loss why that is...

Something to be studied some other weekend when I have some more time on my hands, I think...

thanks I suspect, on a new react UI, this can only be done through js. They calculate padding-bottom for div.r-1adg3ll.r-13qz1uu {padding-bottom: 56.25%;}, when tweet is opened separately it is always 100% or more. This is the only thing that determines the height of container.

I would really appreciate this too! I assume this means show the entire image in the stream.

@saf: I cannot reliably modify the JS that comes from Twitter - it'll change often in small details... Adding additional JS won't work as there'll be execution conflicts... especially with React which strictly assumes full and singular ownership of the DOM model. In addition, modifying the CSS is also a no-go as the CSS-IDs are auto-generated and can change at any time.

My approach is exactly the "padding-bottom"... overriding the "default" 56.25% (weird value!) and set to 100% via a style attribute (which also takes precedence over CSS).

This is the same as what I'm already doing for "uncropping" and centering the thumbnails. It works fine regarding how the thumbnails then grow in size...

BUT there is that darn event-loop (I assume the browser warning about a script slowing down the page is due to an event loop) that happens (!)only sometimes(!). As said - I need to do some more research when I've some more time on my hands... If I can avoid the event-loop the solution is straight-forward and easy to implement.

@Yosh: The "entire image" is already shown in the stream with the script as-is today ("uncropping"). Saf's very reasonable suggestion is about displaying those image thumbnails larger than they are shown now...

It is not simple padding-bottom: 100% !important; there may be 135, 120 etc. 56.25% most common one = 16x9 aspect ratio

ah - A/R... good point!

Quick update: Any messing around that changed the overall height of a post has led to some issues, so far... some minor... some major...

-> I'm currently leaning towards creating a second, "aggressive" version of the script and placing it here on GreasyFork in parallel. It'll do more, but at the cost of minor issues.

I've updated the script to zoom images as much as possible while maintaining aspect ratio and honoring available width.

The side-effect is a slightly "jumpy" endless scrolling experience - especially when scrolling back UP and when scrolling very fast.

Any feedback about the new behavior and it's accompanying issues are very welcome.

Also, I only use this script on desktop PC without touch. If you use a touch display, feedback about the scrolling issues would be especially interesting...