Core support for WordPress images to open in a modal window

Goal: Create a mobile and user friendly default for viewing image details in WordPress.

One issue brought up in the NUX discussions on Slack is the way WordPress defaults handling of image details and linking when inserted into the content.

Screen Shot

Currently, by default, images link to attachment pages. There are options to link to nothing, the image source, or custom URLs.

Ticket #31467 proposes a new default to not link to anything when inserting an image.

I believe we should explore an option (and perhaps a default) to some style of mobile friendly modal window.

How others are doing it:

A number of sites have image detail linking methods that are worth looking into:

Tumblr links to modal Image only, with no flair:
Screen Shot
You can see more examples by clicking images on their Staff Picks page:

Image linking to full size with an “X” to leave the view:
Screen Shot

You can explore more examples:

Photo site pops up a modal with various options attached:
Screen Shot

The NYTimes has a hint on hover that the image can be viewed in more detail.
Screen Shot

Upon click, it pops up a model that includes pagination to other images in the article, as well as the caption, image source, and an exist button:
Screen Shot

Flickr has a similar method to 500px, but can additionally be clicked to review a full size non-screen restricted modal. See on their site. / Jetpack utilize a carousel with pagination of an article’s images, comments, and permalink:
Screen Shot

Live example:

I believe that something simple, but extensible would be ideal. Perhaps a modal with an “X” for intent, but that has extensibility for including other items, like image captions and pagination to other attached images in an article.

Challenges and requirements

There are a number of challenges to consider.

  • Technology: This may well introduce a need for front-end Javascript, though there are modals now that rely upon CSS only. Either will need to consider browser support.
  • Backward compatibility: We’d need to figure out how to treat images on existing posts and installs.
  • Gallery vs inline image support: We need to consider whether to utilize a feature like this for galleries and inline images, and even perhaps featured images outside of the_content (which would present challenges, as we can’t easily assume how those are being linked or not linked).
  • Library vs home-grown: Modals are not new to the web. Would we prefer to make our own solution for WordPress, or rely on an existing library.
  • Mobile and A11y: Excellent mobile support would not be an option for this feature. We’d need to ensure quality mobile and a11y experiences.

Feature or feature plugin?

I’m wondering if a project like this should be a small feature plugin. It’d be a good way to stretch our legs and test options in the real world, and prepare for merge to core at a later date.