Authoraleph-naught2tog
LicenseNo License
Categorytwitter
Created
Updated
Size2.5 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
This tool is currently designed to:
highlight images with no alt-text in red
show you the alt-text for images that have it when you hover over the image
[requires extra configuration] hides images from your timeline (note: this won't hide them if you actually click the link)
These are meant to be injected via Stylus, an extension that allows customization and styling of various websites. (It's likely these styles would work in other tools allowing for customization or adding CSS, but I haven't checked any other tools personally. This uses pure vanilla CSS.)
This tool is currently designed to:
(If anyone else tries any other tools for any browsers, let me know!)
Once you have set up a stylesheet for a domain and the rule is this: "Applies to All Urls On the Domain of twitter.com", copy and paste the CSS file in this gist into the styleshet.
(If you already have styles for Twitter, please insert these at the bottom, unless you know of conflicts.)
Max Cerrina (https://twitter.com/alephnaught2tog)
/* ==UserStyle==
@name Alt text + hiding individual images on Twitter
@version 20211215.01.51
@namespace userstyles.world/user/aleph-naught2tog
@description This tool is currently designed to:
highlight images with no alt-text in red
show you the alt-text for images that have it when you hover over the image
[requires extra configuration] hides images from your timeline (note: this won't hide them if you actually click the link)
@author aleph-naught2tog
@license No License
==/UserStyle== */
@-moz-document domain("twitter.com") {
/*
===== Images+Alt styling =====
We outline the images with *no* alt text in red, to draw our attention to
them. (This style is supposed to not match and stick out.)
The other styles tweak spacing, and the `:hover:after` styles allow us to
see the alt text when we hover over an image in a relatively nice-looking
way.
*/
/* Outline images with no alt text in red */
div[aria-label="Image"] {
margin: 0 !important;
border: 2px solid #f00;
}
/* Fix spacing */
div[data-testid="tweetPhoto"]:not([aria-label="Image"]) {
margin: 0 !important;
}
/* Show alt text for other images when you hover over them */
div[data-testid="tweetPhoto"]:not([aria-label="Image"]):hover:after {
content: attr(aria-label);
background: rgba(0,0,0,.75);
color: #fff;
padding: 10px;
font-family: sans-serif;
font-size: 90%;
}
/*
===== Hide Specific Images =====
*/
/*
To add more, find the `<a>` wrapping the image, and use the `href`
as below. The `href` should be URL starting with a slash and the username
of the account posting it.
**Note: this won't hide them if you actually click the link**
e.g., swapping in the `href` for `URL_OF_SAD_DOG_PIC` below:
[href="URL_OF_SAD_DOG_PIC"] { visibility: hidden; }
Note: this will _only_ work for each tweet the photo is in specifically.
That is, if you want to hide a very popular image that *many* folks are
uploading, you will have to add the URL of each tweet that contains it
as you find it.
e.g.,
[href="URL_OF_SAD_DOG_PIC_UPLOADED_BY_BOB"] { visibility: hidden; }
[href="URL_OF_SAME_SAD_DOG_PIC_UPLOADED_BY_STEVE"] { visibility: hidden; }
*/
/* This hides the image showing the conversation re an amazon worker before the tornadoes */
[href="/MorePerfectUS/status/1470513075489054720/photo/1"] { visibility: hidden; }
}