grid view for media tab

[THErlego]

something that could be placed as a toggle in the ... menu on the tab selector on profiles, have images show in a grid similar to the new newtwitter update (its also canon because 2017 twitter mobile did not show any text on media tab)

[JimMcBubbles]

would also like somthing like this (or any way to veiw only images/videos when searching)

[mmaker-gh]

I wrote some CSS that accomplishes this. Note your browser needs to support the :has() selector (in order to only target when the media tab is active, or in photo/video searches). It's not perfect but works enough for my needs.

Preview


:is(
    #tweet-nav:has(#tweet-nav-media.tweet-nav-active) ~ section #timeline,
    #left-cell:has(:is(#ns-photos, #ns-videos).search-switch-active) + div #timeline
) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    width: 590px;
    gap: 2px;
}

:is(
    #tweet-nav:has(#tweet-nav-media.tweet-nav-active) ~ section #timeline,
    #left-cell:has(:is(#ns-photos, #ns-videos).search-switch-active) + div #timeline
)
:is(
    .tweet,
    .tweet *
) {
    padding: 1px; /* Setting this to 0 seems to trigger some browser optimization and causes images in first column to fail to load. */
    margin: 0;
    box-sizing: border-box;
}

:is(
    #tweet-nav:has(#tweet-nav-media.tweet-nav-active) ~ section #timeline,
    #left-cell:has(:is(#ns-photos, #ns-videos).search-switch-active) + div #timeline
)
.tweet {
    width: calc((590px / 3) - 2px);
}

:is(
    #tweet-nav:has(#tweet-nav-media.tweet-nav-active) ~ section #timeline,
    #left-cell:has(:is(#ns-photos, #ns-videos).search-switch-active) + div #timeline
)
:is(
    .tweet > :not(.tweet-body),
    .tweet-body > :not(.tweet-media, .tweet-card),
    .tweet-media :is(.tweet-media-element:not(:first-of-type), video ~ img, img ~ video),
    .tweet-media br
) {
    display: none;
}

:is(
    #tweet-nav:has(#tweet-nav-media.tweet-nav-active) ~ section #timeline,
    #left-cell:has(:is(#ns-photos, #ns-videos).search-switch-active) + div #timeline
) 
:is(.tweet-media, iframe) {
    max-width: calc(590px / 3);
    aspect-ratio: 1 / 1;
}

:is(
    #tweet-nav:has(#tweet-nav-media.tweet-nav-active) ~ section #timeline,
    #left-cell:has(:is(#ns-photos, #ns-videos).search-switch-active) + div #timeline
)
:is(.tweet-media-element) {
    max-width: 100%;
    max-height: 100%;
}

:is(
    #tweet-nav:has(#tweet-nav-media.tweet-nav-active) ~ section #timeline,
    #left-cell:has(:is(#ns-photos, #ns-videos).search-switch-active) + div #timeline
)
:is(.tweet-media-element, iframe) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    /* pointer-events: none; */
}

:is(
    #tweet-nav:has(#tweet-nav-media.tweet-nav-active) ~ section #timeline,
    #left-cell:has(:is(#ns-photos, #ns-videos).search-switch-active) + div #timeline
)
.tweet-active::after {
    display: none;
}

:is(
    #tweet-nav:has(#tweet-nav-media.tweet-nav-active) ~ section #timeline,
    #left-cell:has(:is(#ns-photos, #ns-videos).search-switch-active) + div #timeline
)
.tweet:hover {
    padding: 8px 1px;
    border-bottom: 2px solid var(--link-color);
}

---

Also made a version that works globally and includes interaction buttons. Be weary of this one if you visit a page without much media because it can easily trigger the rate limit.

#center-cell :is(#timeline, #list-tweets) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    width: 590px;
    gap: 2px;
}

#center-cell :is(
    .tweet,
    .tweet *
) {
    padding: 1px; /* Setting this to 0 seems to trigger some browser optimization and causes images in first column to fail to load. */
    margin: 0;
    box-sizing: border-box;
}

#center-cell .tweet {
    width: calc((590px / 3) - 2px);
}

#center-cell :is(
    .tweet:not(:has(:is(.tweet-media, iframe))),
    .tweet > :not(.tweet-body),
    .tweet-body > :not(.tweet-media, .tweet-card, .tweet-interact),
    .tweet-interact :not(.tweet-button),
    .tweet-interact-views,
    .tweet-media :is(.tweet-media-element:not(:first-of-type), video ~ img, img ~ video),
    .tweet-media br
) {
    display: none;
}

#center-cell .tweet-interact .tweet-button {
    font-size: 0px;
}

#center-cell :is(.tweet-media, iframe) {
    max-width: calc(590px / 3);
    aspect-ratio: 1 / 1;
}

#center-cell :is(.tweet-media-element) {
    max-width: 100%;
    max-height: 100%;
}

#center-cell :is(.tweet-media-element, iframe) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    /* pointer-events: none; */
}

#center-cell .tweet-active::after {
    display: none;
}