Skip to content

Instantly share code, notes, and snippets.

@ajfisher
Last active March 1, 2018 06:42
  • Star 12 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ajfisher/7273847 to your computer and use it in GitHub Desktop.
CSS fixes to Twitter web client to remove all the inline previews

Twitter Web Client Inline Image Removal

If you're a heavy user of the Twitter web client like me then you'll find the new inline preview feature extremely intrusive as it breaks up the timeline too much. If I wanted to use facebook or linkedin then I'd be using facebook or linkedin. Having said that, cards in Twitter are great and the ability to preview media before jumping off site is really cool - but it should be my choice, not have everything foisted on my timeline.

That the mobile client allows for this with a setting is even more annoying.

So here's the fix. This only works in Chrome but I'm sure an enterprising person could do something similar for Safari and Firefox using the same CSS. Pull requests to update instructions for other browsers are of course very welcome.

Updates

2016-06-04

  • Another update to get the right hooks after a bunch of code changes on the twitter side. Have now added a style so if you do select a tweet, it will pop into the permalink mode and will show you the details which feels like a more desired response (and is what happens on mobile when going from stream to tweet view).

2015-12-14

  • A new fix after Twitter have actually rationalised their code significantly in the way all media is now displayed. Makes the hooks far more simple to implement.

Install and configure.

Download and install the stylish chrome extension

Once that is done open up the style manager and "Write a new style"

Call it whatever you want and then paste the following code into the "code" section.

.js-media-container {
    display: none;
}

.AdaptiveMedia {
    display: none;
}

.permalink-tweet .AdaptiveMedia {
    display: block;
}

.permalink-tweet .js-media-container {
    display: block;
}

In the "Applies to" section at the bottom leave it as "everything" as there is some weirdness with binding to the domain.

Save your config. Reload twitter in your browser and voila, now more annoying inline media. However you should still be able to click on "Expand" and your image preview will be there just like it always was - it's just not opened by default any more.

As a side effect, you'll stop seeing promoted tweets as well.

@number5
Copy link

number5 commented Nov 2, 2013

Thanks @ajfisher

And here is my Tampermonkey/Userscript script version

// ==UserScript==
// @name       GTFO Twitter Embedded Images
// @namespace  http://brucewang.net/
// @version    0.1
// @description  hide Twitter inline images
// @match      https://twitter.com/*
// @match      http://twitter.com/*
// @copyright  2012+, You
// ==/UserScript==

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}


addGlobalStyle("a.is-preview { display: none !important; }");
addGlobalStyle("li.open * a.is-preview { display: block !important; }");
addGlobalStyle("div.promoted-tweet { display: none !important; }");

@ajfisher
Copy link
Author

ajfisher commented Nov 2, 2013

@number5 awesome!

@raol
Copy link

raol commented Nov 4, 2013

The same for firefox. Not as cool as yours, but I had no idea what CSS is before today :)
https://gist.github.com/raol/7300549

@number5
Copy link

number5 commented Nov 26, 2013

Twitter updated and the filter rules not working, the fix is easy, just change a.is-preview to div.is-preview

@ajfisher
Copy link
Author

Yep just noticed that when I went to use it this morning. Updating now

@insin
Copy link

insin commented Jul 21, 2014

Additional rules to remove previews from tweets which have multiple images attached:

div.multi-photos {
    display: none !important;
}

li.open * div.multi-photos {
    display: block !important;
}

@ajfisher
Copy link
Author

New update to twitter means all adaptive media is a bit easier to get hold of

div.AdaptiveMedia {
    display: none !important;
}
li.open * div.AdaptiveMedia {
    display: block !important;
}

Code updated to reflect this.

@ajfisher
Copy link
Author

ajfisher commented Jun 4, 2016

And another set of modifications because their site has changed and is using a bit more JS to load components in individually into the stream. Sorted in code above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment