Goal: Create a mobile and user friendly default for viewing image details in WordPress.
One issue brought up in the NUX discussions on Slack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. is the way WordPress defaults handling of image details and linking when inserted into the content.
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:
You can see more examples by clicking images on their Staff Picks page: https://www.tumblr.com/explore/staff-picks
Image linking to full size with an “X” to leave the view:
You can explore more examples: https://michelesons.exposure.co/the-colors-of-antarctica
Photo site 500px.com pops up a modal with various options attached:
The NYTimes has a hint on hover that the image can be viewed in more detail.
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:
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.
WordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com 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. https://wordpress.com/ / Jetpack utilize a carousel with pagination of an article’s images, comments, and permalink:
Live example: http://en.blog.wordpress.com/2015/01/27/customizing-twenty-fifteen/
I believe that something simple, but extensible 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.
- 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 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). (https://en.wikipedia.org/wiki/Accessibility): 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 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 core Core is the set of software required to run WordPress. The Core Development Team builds WordPress. at a later date.