Twitter but alt

Description.md

Twitter but alt

UserCSS to replace images with their alt text on twitter.

Version 1.0.0

Variants

• A-theme: images with alt text are replaced, images without are left alone
• B-theme: images with alt text are replaced, images without are removed (blanked)
• C: tweets with images with no alt text are blanked, others are left alone. made for dark theme, replace the background colour if you use another.

Themes

• dark
• dim
• light

twitter-but-alt_variant-A-dark.user.css

/* ==UserStyle==
@name           Twitter but alt
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Twitter but with ALT-ed images replaced by their alt text. Variant A-dark
@author         @passcod
@homepageURL    https://gist.github.com/passcod/826450295861677a68d9487e0515f1f5
==/UserStyle== */

@-moz-document domain("twitter.com") {
    [data-testid="tweetPhoto"]:not([aria-label="Image"]) {
        background: black;
        margin: 0 !important;
    }

    [data-testid="tweetPhoto"]:not([aria-label="Image"]) > * {
        opacity: 0;
    }
    
    [data-testid="tweetPhoto"]:not([aria-label="Image"])::after {
        content: attr(aria-label);
        color: white;
        font-family: sans-serif;
        padding: 1ch;
        max-height: 100%;
        max-width: 100%;
        overflow-y: auto;
    }
}

twitter-but-alt_variant-A-dim.user.css

/* ==UserStyle==
@name           Twitter but alt
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Twitter but with ALT-ed images replaced by their alt text. Variant A-dim
@author         @passcod
@homepageURL    https://gist.github.com/passcod/826450295861677a68d9487e0515f1f5
==/UserStyle== */

@-moz-document domain("twitter.com") {
    [data-testid="tweetPhoto"]:not([aria-label="Image"]) {
        background: #15202b;
        margin: 0 !important;
    }

    [data-testid="tweetPhoto"]:not([aria-label="Image"]) > * {
        opacity: 0;
    }
    
    [data-testid="tweetPhoto"]:not([aria-label="Image"])::after {
        content: attr(aria-label);
        color: white;
        font-family: sans-serif;
        padding: 1ch;
        max-height: 100%;
        max-width: 100%;
        overflow-y: auto;
    }
}

twitter-but-alt_variant-A-light.user.css

/* ==UserStyle==
@name           Twitter but alt
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Twitter but with ALT-ed images replaced by their alt text. Variant A-light
@author         @passcod
@homepageURL    https://gist.github.com/passcod/826450295861677a68d9487e0515f1f5
==/UserStyle== */

@-moz-document domain("twitter.com") {
    [data-testid="tweetPhoto"]:not([aria-label="Image"]) {
        background: white;
        margin: 0 !important;
    }

    [data-testid="tweetPhoto"]:not([aria-label="Image"]) > * {
        opacity: 0;
    }
    
    [data-testid="tweetPhoto"]:not([aria-label="Image"])::after {
        content: attr(aria-label);
        color: black;
        font-family: sans-serif;
        padding: 1ch;
        max-height: 100%;
        max-width: 100%;
        overflow-y: auto;
    }
}

twitter-but-alt_variant-B-dark.user.css

/* ==UserStyle==
@name           Twitter but alt
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Twitter but with ALT-ed images replaced by their alt text. Variant B-dark
@author         @passcod
@homepageURL    https://gist.github.com/passcod/826450295861677a68d9487e0515f1f5
==/UserStyle== */

@-moz-document domain("twitter.com") {
    [data-testid="tweetPhoto"] {
        background: black;
        margin: 0 !important;
    }

    [data-testid="tweetPhoto"] > * {
        opacity: 0;
    }
    
    [data-testid="tweetPhoto"]:not([aria-label="Image"])::after {
        content: attr(aria-label);
        color: white;
        font-family: sans-serif;
        padding: 1ch;
        max-height: 100%;
        max-width: 100%;
        overflow-y: auto;
    }
}

twitter-but-alt_variant-B-dim.user.css

/* ==UserStyle==
@name           Twitter but alt
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Twitter but with ALT-ed images replaced by their alt text. Variant B-dim
@author         @passcod
@homepageURL    https://gist.github.com/passcod/826450295861677a68d9487e0515f1f5
==/UserStyle== */

@-moz-document domain("twitter.com") {
    [data-testid="tweetPhoto"] {
        background: #15202b;
        margin: 0 !important;
    }

    [data-testid="tweetPhoto"] > * {
        opacity: 0;
    }
    
    [data-testid="tweetPhoto"]:not([aria-label="Image"])::after {
        content: attr(aria-label);
        color: white;
        font-family: sans-serif;
        padding: 1ch;
        max-height: 100%;
        max-width: 100%;
        overflow-y: auto;
    }
}

twitter-but-alt_variant-B-light.user.css

/* ==UserStyle==
@name           Twitter but alt
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Twitter but with ALT-ed images replaced by their alt text. Variant B-light
@author         @passcod
@homepageURL    https://gist.github.com/passcod/826450295861677a68d9487e0515f1f5
==/UserStyle== */

@-moz-document domain("twitter.com") {
    [data-testid="tweetPhoto"] {
        background: white;
        margin: 0 !important;
    }

    [data-testid="tweetPhoto"] > * {
        opacity: 0;
    }
    
    [data-testid="tweetPhoto"]:not([aria-label="Image"])::after {
        content: attr(aria-label);
        color: black;
        font-family: sans-serif;
        padding: 1ch;
        max-height: 100%;
        max-width: 100%;
        overflow-y: auto;
    }
}

twitter-but-alt_variant-C.user.css

/* ==UserStyle==
@name           Twitter no no alt
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Twitter but with tweets that don't have alt blanked
@author         @passcod
@homepageURL    https://gist.github.com/passcod/826450295861677a68d9487e0515f1f5
==/UserStyle== */

@-moz-document domain("twitter.com") {
    [data-testid="tweetPhoto"][aria-label="Image"] {
        background: black;
        height: 1000%;
        width: 1000%;
        margin: -20rem 0 0 -20rem !important;
    }
    
    [data-testid="tweetPhoto"][aria-label="Image"] > * {
        opacity: 0;
    }
    
    article [data-testid=tweet] * {
        overflow: unset !important;
    }
}