Thumbnail style update

This thumbnail style update seeks to showcase our images with clean, simplified styling and captions, to highlight their beauty without distraction. It will also bring consistency with the new image galleries, image styles on mobile and most Main Pages.

Before and after change, in English

Before and after change, in Armenian

Before and after change, in Dutch

Before and after change, in Hebrew

Summary of the change

• Image border styling is removed
• Image box background color (previously #F9F9F9) is removed
• Image margin and padding is increased between the thumbnail and adjacent text
• Image caption text-size is altered (to 0.85em from 0.875em) for better readability at the decreased size and to distinguish it from body text
• Image caption text-color is changed to better distinguish it from body text (from grey #252525 to #555).
• Magnify icon is removed (now that MediaViewer enlarges images by default)

Timeline

• Postponed. See Talk:Thumbnail style update#25 July update

FAQ

Was there an on-wiki discussion about this change?

Yes, this was discussed at length during the mw:Typography Refresh discussion (1, 2, 3 and 4) but a decision was made to implement the change separately from the Typography Refresh BetaFeature graduating, in order to have additional testing.

Does this affect infoboxes?

No. They don’t use the “thumb” parameter. No images that are not thumb styles are impacted by this change.

Does this affect video or audio files?

Video and Audio files which rely on the same styling (CSS) as the image thumbnail style will be updated as well. Images and video which use special templates or in-line styles may not be affected.

Does this affect all skins or only the default (Vector) site skin?

This change only affects the default site skin (Vector).

What happens to articles with in-line styles on images?

In-line styles will not be overridden. We recommend editors remove in-line styles where they are present for consistency and compatibility purposes. Where appropriate, switch to m:Template:Multiple image which will update to reflect the new thumbnail styling.

What code do I add to my personal style sheet, to add the borders back again?

See code below.

.thumb {
    border: 1px solid #ccc;
    padding: 3px !important;
    background-color: #f9f9f9 !important;
    text-align: center;
    overflow: hidden;
}
.thumbcaption {
    color: #252525 !important;
}

Where can I review the code for this change?

The related patch is Gerrit change 133301

Where can I try this out right now?

The Beta Labs test wiki has the updated thumb style, such as on this example article.

Documentation cleanup needed

Pages in documentation that will need to be cleaned up based on this change:

• Help:Images
• Help:Images and other uploaded files on Meta
• Wikipedia:Extended image syntax on English Wikipedia

Plus all the other languages. (Please add, and strike when complete)