Page MenuHomePhabricator

Semantic image styles / beautiful layout
Closed, InvalidPublic


Mediawiki is lacking tools to generate truly beautiful layouts across a range of devices. As a result, our articles look so-so on the web (but we are continually challenged to do better) and often broken on mobile and print (although we make heroic efforts to workaround our limitations).

This topic at the developer summit would include features such as T90914: Provide semantic wiki-configurable styles for media display and T351: RfC: Square bounding boxes which attempt to provide better tools for describing the way images are laid out in our articles, but hopefully we could expand the scope to include design input: what would a truly beautiful presentation on web/mobile/print/etc look like? What are the features we're missing to enable that?

Some seeds for discussion:

  • Can we have designers create different article layouts? Can we make "article style" into a first-class notion in mediawiki?
    • For example, many article are most readable in a two-column layout, but math-related articles tend to look better in PDF form in a single column, since the mathematical expressions are often wide.
  • What are the different categories of media presentation? Can we expose "full width", "single column", "double column", "lead image" as properties authors can apply? What others are needed?
  • What features from the <gallery> extension should be brought into core? It is often used to work around limitations in image styling in core.
  • Can articles have "sidebar" content?
  • Can images be tagged with a "focal point" so that we can more intelligently crop and resize them for different platforms?
  • How can we describe the acceptable limits for cropping? Cropping the top off the Eiffel tower would be unfortunate, but cropping some of the sky off a landscape is perfectly fine.
  • Should we allow the user to manually crop images from within an article?

The outcome of this topic would hopefully include a beautiful aspirational design for mediawiki which motivates specific work on features to enable it.


  • Collect a portfolio of media usage, to inform the scope of the work.
  • Create an aspirational "design for mediawiki", which can inform specific implementation work to enable it.
  • Identify specific focus tasks for the coming year, for example support for cropping, or for bounding boxes, or for semantic style tagging.

Event Timeline

cscott raised the priority of this task from to Needs Triage.
cscott updated the task description. (Show Details)
cscott added a subscriber: cscott.

@cscott I'm already crazy about this task.

For example, many article are most readable in a two-column layout, but math-related articles tend to look better in PDF form in a single column, since the mathematical expressions are often wide.

We should collect some of these use cases to look at the variety of articles in a big picture and design around on these needs and wants.

Or we can collect some examples around the web on effective layouts for specific kinds of content.

@violetto The use cases from enwiki I use to evaluate OCG are:

  1. Moon
  2. List of integrals of trigonometric functions
  3. List of trigonometric identities

The Moon article contains a large number of different items to format. It opens with an infobox, and has a lead article. But it also contains a number of "multiple image templates", presenting for example, the moon's near side, far side, and north and south poles. It has some embedded video content (about the evolution of the moon), an animated gif (showing the libration of the moon), audio content ("That's one small step.."), and textual tables (giving mineral content percentages). It contains a reasonable number of "standard" right-hand margin figures, but they are in a variety of aspect ratios, currently not consistently sized, and some jump over to the left-hand margin. It also contains a few "very wide" images, for example showing the earth-moon distance to scale, as well as another illustrating the phases of the moon. There's also a "sister projects" box, some navboxes, citations, references, *and* bibliography sections, categories, and external links.

So if you can some up with a beautiful design for [[Moon]], made up of standard elements, you'd probably have covered most of the necessary features for most articles.

The list of integrals article is pretty straightforward, but the formulae vary in length quite a bit and can quite long. It might be worth consulting a mathematics textbook for hints about high-quality presentation of content of this sort.

The list of trigonometric identities article is much more challenging. It is a higher quality article, but it contains a number of tables, some which can be hoisted from the text and floated in a sidebar as independent content, some which can not. It also contains some quite long formulae and wide tables.

Congratulations! This is one of the 52 proposals that made it through the first deadline of the Wikimedia-Developer-Summit-2016 selection process. Please pay attention to the next one: > By 6 Nov 2015, all Summit proposals must have active discussions and a Summit plan documented in the description. Proposals not reaching this critical mass can continue at their own path out of the Summit.

I collected some screenshots with a more complete look on how our contributors are using images and their intentions. Some help is needed to better group the use cases / image types and an idea of their intention.

I also sketched some ideas on how images (small to fullscreen-width) can be laid out on the page as a start.

Photo Oct 03, 12 11 24 PM.jpg (2×3 px, 1 MB)

cc @Nihiltres (noticed your list of key images used on T90914

cscott set Security to None.

On the 2015 Community Wishlist Survey there is a proposal for automatic numbering of pictures, which is also T7600: Request for feature: automatic figure and equation (formula) numbering. That would also be a useful feature to add while we're refreshing our media support.

@violetto Could I get your help leading this session? I know it's last minute, but if you'd be willing to present the screenshots and ideas you posted above, it would be a great help.

This will be a discussion session. We will be discussing:

FYI, We've also collected different image usages on Wikipedia, feel free to expand.


  • Articles look so-so on the web and often broken on mobile and print
  • Example: Repositioning images on mobile is a challenge;
  • Example: PDF backend would like better insight into figures and layout. Any hacks added tend to be enwiki-specific, different wikis have different templates for styling figures.


  • Mediawiki is lacking tools to generate truly beautiful layouts across a range of devices
  • There is no easy separation between content and skin

Aspirations and goals

  • Give editors freedom while retaining flexibility we need for performance, etc.;
  • Better separation between different entities on the page.

Suggestions on moving forward

  • Prioritize problems to solve / ideas

Session etherpad:

Wikimedia Developer Summit 2016 ended two weeks ago. This task is still open. If the session in this task took place, please make sure 1) that the session Etherpad notes are linked from this task, 2) that followup tasks for any actions identified have been created and linked from this task, 3) to change the status of this task to "resolved". If this session did not take place, change the task status to "declined". If this task itself has become a well-defined action which is not finished yet, drag and drop this task into the "Work continues after Summit" column on the project workboard. Thank you for your help!

This task about a WikiDevSummit 2016 session is still open, has no owner, and has no active projects associated.

The Etherpad document for the session lists seems to list no action items / "suggestions on moving forward" that could be turned into followup tasks.

@cscott: How to proceed before closing this task as resolved?

No feedback, no followup so far.
I'm closing this task as invalid (as this does not seem to get anywhere).