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 SlackSlack Slack is a Collaborative Group Chat Platform The WordPress community has its own Slack Channel at 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. An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. / Jetpack utilize a carousel with pagination of an article’s images, comments, and permalink:
Screen Shot

Live example:

I believe that something simple, but extensibleExtensible This is the ability to add additional functionality to the code. Plugins extend the WordPress core software. 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 JavascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser., though there are modals now that rely upon CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. 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 A11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). ( Excellent mobile support would not be an option for this feature. We’d need to ensure quality mobile and a11y experiences.

Feature or feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins.?

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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. at a later date.