Tag Archives: media

Justin Ahinon 11:15 am on October 14, 2019
Tags: , , , media   

Improvements in Media component accessibility in WordPress 5.3

Form controls are still unlabelled in WordPress media views. Some don’t have associated <label> element, <aria-label>attribute or some have an empty label.

Properly labeling form controls is essential for a basic level of accessibilityAccessibility 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), as labels give form controls their accessible name. The name is then used by assistive technologies to inform users what the form control is about. Not to mention visible <label> elements are clickable and help users with motor impairments to set focus on the associated form control.

Also, the WordPress accessibility coding standards recommend explicitly associated labels (with for/id) attributes instead of implicitly (wrapping) labels.

WordPress 5.3 will now include some accessibility improvements of all the media views from controls:

  • Changes the media views form controls to have explicitly associated labels with for/id attributes
  • Adds a few missing labels / aria-labels
  • Improves a few existing labels / aria-labels
  • Improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes
  • Improves the image custom size input fields and their labeling
  • Adds role=”status” to the “saved” indicator so that status messages are announced to assistive technologies
  • Swaps the columns source order in the image details template, to make visual and DOM order match
  • Swaps the “Replace” and “Back” buttons source order in the Replace Image view, to make visual and DOM order match
  • Gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right
  • Merge similar strings, unified to “Drop files to upload” (removed “Drop files here”, and “Drop files anywhere to upload”)
  • Makes the “upload-ui” consistent across the media views
  • Hides the IE 11 “X” ::-ms-clear button in the Insert from URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org field, as it conflicts with the uploading spinner
  • Adds comments to all the media templates to clarify their usage
  • Slightly increases the vertical spacing between form fields in the media sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.
  • Removes some CSSCSS Cascading Style Sheets. selectors introduced as backwards compatibility for WordPress pre-4.4
  • Removes some CSS still targeting Internet Explorer 7 and 8
  • Fixes buttons group layout for Internet Explorer 11

The most important change to clarify is that the labeling changed from this (implicit labeling):

<label>
    My input
    <input type="text" />
</label>

to this (explicit labeling):

<label for="my-input">My input</label>
<input type="text" id="my-input" />

Simplified code sample

More details on these improvements can be found in TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker. #47122.

This note was drafted by @justinahinon and proofread by @afercia.

#5-3, #accessibility, #dev-notes, #media

Andrew Ozz 8:24 pm on October 11, 2019
Tags: , , media,   

Updates to Image Processing in WordPress 5.3

WordPress 5.3 includes several enhancements to how images are used and post-processed after upload.

When an image is uploaded to WordPress, alternate smaller sizes are automatically created. Some of these “intermediate” sizes are defined by coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., and others by themes or plugins. These are used both for art direction uses, like alternate crops, and automatically by core for responsive images if they are the same aspect ratio.

Resizing images is very resource intensive. As average image sizes have increased over time, this has only increased the chances that requests may time out or run out of memory. WordPress 5.3 includes several enhancements to help more uploads succeed, and to aid users in recovery when they do not. These changes also enable WordPress to generate two new, higher resolution default sizes, to help user images look their best.

Saving of image metadata while creating intermediate sizes

Before 5.3, WordPress would first generate all intermediate sizes before saving proof of their existence in the database in metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress..

This meant that if an upload failed in the middle, there could be many sizes that had completed successfully stored, but this wouldn’t be reflected in the database. A user’s only recourse was to re-upload over and over again in the hope that their server was less busy and all of the sizes would be generated.

In 5.3, this problem is fixed through saving metadata for each size as it is created in the database. This means more database writes, but allows WordPress to use the sizes generated earlier, and to resume failed uploads.

To make this possible, a new method make_subsize() was introduced in the WP_Image_Editor_GD and WP_Image_Editor_Imagick classes. It returns the new sub-size image path and dimensions ready to be added to the image meta’s sizes array. See #40439.

Additional changes:

  • Introduces wp_get_missing_image_subsizes() and wp_update_image_subsizes() to generate image sub-sizes that are missing or were not created after the upload.
  • Adds a way to display errors that happened while creating sub-sizes.
  • Introduces wp_create_image_subsizes() intended for use after an image was uploaded. It saves/updates the image metadata immediately after each sub-size is created.

With that in place it became possible to attempt to finish post-processing of images after upload if the server runs out of resources while creating intermediate image sizes (the dreaded “HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. Error” message). See #47872.

“BIG image” enhancements

Until now it was possible to use the originally uploaded images on the front-end even when they are were not “web ready”. In WordPress 5.3 when a large image is uploaded it is stored in the uploads directory but is not used on the web site. A new scaled down image is created and used as the largest available size. This scaled down image is usually much more suitable for web use, the file size is up to ten times smaller than the original. See #47873.

Additional changes:

  • Introduces wp_get_original_image_path() that retrieves the path to the originally uploaded image in all cases.
  • Introduces big_image_size_threshold filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to set the pixel value above which images will be scaled. The same value is used as max-width and max-height when scaling the original.

These enhancements also made it possible to automatically rotate uploaded photos according to the EXIF data, and to add two additional default image sizes to better support high-density displays. See #14459 and #43524.

Thanks @mikeschroder for helping to write this post.

#5-3, #dev-notes, #media, #upload

Anthony Burchell 2:37 pm on September 19, 2019
Tags: , , , media,   

Media Meeting Recap – September 19, 2019

The following is a summary of the weekly media component meeting that occurred on Thursday, September 19, 2019. Weekly media meetings are held every Thursday at 13:00 UTC. A full transcript can be found here in the #core-media room in the Make WordPress Slack.

Attendees: @anevins, @joemcgill , @FahimMurshed, @mikeschroder, @antpb, @afercia

Media Focus update: @mikeschroder has been hard at work on a 5.3 intro post. In it will be a focus on calling for testing.  Coming soon!

Add width and height attributes to <img> elements – https://github.com/WordPress/gutenberg/issues/6652
Discussion is taking place in this Slack thread. Maintainers in attendance all agreed that this would be great to be considered a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. and a potential impactful improvement to the editor experience. @joemcgill said, “Realistically, I think a first step is just adding a proof of concept that modifies the save attribute of the image blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. so the h/w attributes are always saved and then see what breaks.”

5.3 Ticketticket Created for both bug reports and feature development on the bug tracker. Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.

#47120 – Media modals: Upload errors and field information are not associated with their control : @antpb has taken ownership of the ticket and will investigate how we would best inject the recommended code into the various buttons/views.

#47137 – Insufficient form semantics : This issue was split into two issues (the other below) to allow the overall problem to improve in pieces. Ownership for this one is needed. It’s a bit of a tough issue that no one has yet to see an immediate solution.

#48028 – Media Library ‘featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.’ dialogue missing link text that describes ‘opens in new tab’. – @afercia said “I think there’s the need to check how editState is implemented in the post frame and what is intended for. That implementation completely lacks in other frames. I think this is for historical reasons because the post frame was the only frame supposed to be used in the “edit post” context.” and @joemcgill responded “The classic editor used the Post frame in most places, rather than the Select frame. Now that most of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ is using the Select frame, some odd bits aren’t working the same—just like that other featured image bug you (@antpb) just fixed” @antpb assigned the issue to himself given his recent exposure to the featured image frames. A githubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issue is needed also to track this change in the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party @antpb is working on that. More to come!

#47144 – Text inadvertently rendered by assistive technologies – Was mentioned at end of meeting but discussion was not able to be had. This issue is in need of ownership for the 5.3 release.

#47611 – Media views: hide the “file upload button” from assistive technologies – Was mentioned at end of meeting but discussion was not able to be had. This issue is in need of ownership for the 5.3 release.

Bug Scrubs next week!

@mikeschroder and @antpb have offered to lead two bug scrubs in #core-media next week to find ownership for the remaining accessibility issues planned for the 5.3 milestone:

Feedback

If you have any feedback on the above, please feel free to leave a comment, join in #core-media for a chat, or attend the next meeting on September 26, 2019 at 1300UTC!

#core, #core-accessibility, #core-media, #media, #summary

Anthony Burchell 3:59 pm on September 9, 2019
Tags: , , , media,   

Media Meeting Recap – September 5, 2019

The following is a summary of the weekly media component meeting that occurred on Thursday, September 5, 2019. Weekly media meetings are held every Thursday at 13:00 UTC. A full transcript can be found here in the #core-media room in the Make WordPress Slack.

Attendees: @anevins, @sergeybiryukov, @pstonier , @afercia, @francina, @mikeschroder

Media Focus Lead for 5.3

Much like the 5.0 release, 5.3 will have many designated release leads around each focus/component in the project. 5.3 is right around the corner and now is the time for a decision to be made on a release leadRelease Lead The community member ultimately responsible for the Release. representing the Media component. Previously @antpb had offered to take on the role if no others were interested. In this weeks Media meeting, a volunteer emerged! @mikeschroder has graciously offered to take on this role. Thanks Mike! Mike is in the JST time zone. This brings an awesome opportunity to have global representation in the team. @antpb has offered to help with relaying information or representing where time zones do not conveniently meet for Mike.

5.3 Ticketticket Created for both bug reports and feature development on the bug tracker. Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.

#47135 – Drag and drop functionality unavailable to keyboard or touchscreen — It was determined by the team that this issue exists more globally in metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes. It was deemed appropriate to document the information from the Media focused instance of this in an existing ticket on the issue: #39074 No method to move meta boxes using keyboard which was also given the keyword wpcampus-report for tracking purposes.

#47137 Insuficient form semantics – @anevins asked “Is there a technical reason why there isn’t a form element being used around that attachments browser code? That would defeat all of the remediation advice.” @afercia had these recommendations: “Ideally it should be a form because that helps in establishing semantic relationships. However, the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. is not rendered in all the views, so including the select area, the attachments list and the sidebar within one form might be a bit complicated.
The list of attachments is perceived as a list of checkboxes so it makes sense to wrap it within a fieldset + legend. I’d tend to think it would need more work in the future because yes, it’s a group of checkboxes but it actually works like a mini-application with custom interaction. I’d say fieldset + legend would help, for now.”

Triage on unanswered tickets continued after the meeting closed, and can be followed here.

Feedback

If you have any feedback on the above, please feel free to leave a comment, join in #core-media for a chat, or attend the next meeting on September 12, 2019 at 1300UTC!

#core, #core-accessibility, #core-media, #media, #summary

Kira Schroder 2:31 pm on September 3, 2019
Tags: , , , media,   

Media Meeting Recap – August 29, 2019

The following is a summary of the weekly media component meeting that occurred on Thursday, August 29, 2019. Weekly media meetings are held every Thursday at 13:00 UTC. A full transcript can be found here in the #core-media room in the Make WordPress Slack.

Attendees: @joemcgill, @anevins, @desrosj, @horttcore, @paaljoachim, @mikeschroder

5.3 Tickets

@azaozz requested review on the latest patches in #43524, #47873, #47872, #32437. He plans to commit them before the end of the week.

Chatting About Sizes

@pierlo asked for a discussion on #43524, which is about adding an additional image size.

Folks seemed to agree that it makes sense to add another one, and that it’d be great if sizes could be backfilled in the future, but that’s likely not for 5.3.

Connected to that, there was a conversation about the direction WordPress could take with sizes in 5.4 and beyond. Things discussed included a feature like add_image_size for attachments, delivering srcset sizes based on file size, and resizing after theme change.

If that sounds interesting, you can read the whole discussion here.

Ticketticket Created for both bug reports and feature development on the bug tracker. Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.

Triage on unanswered tickets continued after the meeting closed, and can be followed here.

Feedback

If you have any feedback on the above, please feel free to leave a comment, join in #core-media for a chat, or attend the next meeting on September 5, 2019 at 1300UTC!

#core, #core-accessibility, #core-media, #media, #summary

Joe McGill 8:18 pm on August 23, 2019
Tags: , , , media,   

Media Meeting Recap – August 23, 2019

The following is a summary of the weekly media component meeting that occurred on Thursday, August 23, 2019. Weekly media meetings are held every Thursday at 13:00 UTC. A full transcript can be found here in the #core-media room in the Make WordPress Slack.

Attendees: @joemcgill, @anevins, @pbiron, @desrosj

5.2.3 Media Tickets

All relevant tickets have been closed. 🎉 Props @sergeybiryukov on back-porting bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes.

5.3.0 Release Media Lead

Following up on the 5.3.0 Release Schedule and Scope, we were asked to identify a Media release leadRelease Lead The community member ultimately responsible for the Release.. To coordinate media related tickets.

  • @antpb has expressed interest in doing this again, but wanted to open up the opportunity to anyone else interested.
  • @joemcgill wondered if this role was redundant with @azaozz role as CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. technical lead, since most of the priority Media items are ones he is already working on.

If you’re interested in volunteering for this role, feel free to comment here, in #core-media, or DM @joemcgill or @antpb directly in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

5.3.0 Tickets

#core, #media, #summary

Joe McGill 4:40 pm on August 15, 2019
Tags: , , media,   

Media Meeting Recap – August 15, 2019

Overview

The following is a summary of the weekly media component meeting that occurred on Thursday, August 15, 2019. Weekly media meetings are held every Thursday at 13:00 UTC. A full transcript can be found here in the #core-media room in the Make WordPress Slack.

Attendees: @joemcgill, @anevins, @sergey, @antpb, @adamsilverman

5.3 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). (https://en.wikipedia.org/wiki/Accessibility) Related Tickets

@anevins lead a triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. of the a11y related tickets from the WPCampus audit for 5.3 to try and make sure everything had an owner and/or some next steps to move forward.

Now that all tickets have been triaged, @joemcgill suggested that we keep the latest information in TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. so we can use this report to track status of the a11y related tickets throughout the 5.3 cycle.

5.3 Release Media Lead

@antpb asked if anyone was interested in being the Media lead for the 5.3 release. He served in this capacity for the 5.0 release and is willing to do so again for 5.3 if needed. @joemcgill reached out to @chanthaboune in #core following the meeting to clarify what this role would be responsible for (see chat). Essentially, this person would be the primary person responsible for communicating status from the component team and gathering consensus when decisions need to be made. This person is not responsible for completing all the work themselves, but should be leaning on the rest of the component maintainers and contributors to meet our release goals.

If you’re interested in volunteering for this role, feel free to comment here or in #core-media.

5.2.3 Release Tickets

@joemcgill noted that there are several Media issues listed in @jeffpaul‘s 5.2.3 release proposal. These need to be reopened as fixed-major so they can be back ported to the minor releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. and the milestone needs to be updated. @joemcgill volunteered to handle this.

#media, #summary

Andrew Ozz 11:08 pm on May 15, 2019
Tags: media,   

Improve processing of uploaded images

As mentioned in dev chat on May 15 there are quite a few “stalled” tickets on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. dealing with image processing/resizing after uploading:

All of these, and more, can be “unblocked” by: Save progress of intermediate image creation after upload #40439.

Fixing this will also enable “refreshing” of the way we do responsive images, and will enable improvements in how we generally work with images in the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor. Then we will be able to enhance the Image block and make it “just work” regardless of the context, see Enhancement: images handling and more importantly https://github.com/WordPress/gutenberg/issues/6177#issuecomment-442953527.

In short: fixing the above tickets will greatly improve user experience especially when uploading large images or the server is slow/busy. It will also open the way for enhancing how we work with images in the editor, and let us show better fitting images on the front-end.

#media, #upload

designsimply 10:30 pm on February 7, 2019
Tags: media,   

Media Meeting Recap – February 7, 2019

Overview

The following is a summary of the weekly media component meeting that occurred on Thursday, February 7, 2019. Weekly media meetings are held every Thursday at 21:00 UTC. A full transcript can be found here in the #core-media room in the Make WordPress Slack.

Attendees: @antpb, @aaroncampbell, @mikeschroder, @designsimply, @sergeybiryukov, @pbiron, @swinterroth, @dave_navarro

Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.

The agenda today was extended ticketticket Created for both bug reports and feature development on the bug tracker. triage for this list.

  • #41753: _wp_get_attachment_relative_path uses hardcoded uploads directory path: noted that it affects multisitemultisite Used to describe a WordPress installation with a network of multiple blogs, grouped by sites. This installation type has shared users tables, and creates separate database tables for each blog (wp_posts becomes wp_0_posts). See also network, blog, site and needs testing.
  • #41816: attachment_url_to_postid() should find post_id for URLs of intermediate size images: patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. was previously abandoned because the heuristic wasn’t reliable, @pbiron will dig up the gist and leave a comment. In summary: #44095 and #42437 need to be fixed before moving forward with a revised patch for #41816.
  • #41922: Gallery hard to open for edit – rtl (hebrew) version: @antpb will test and leave feedback in the ticket.
  • #42063: Media: Indicate if image is used as a site option: @mikeschroder will leave a reply. It’s already future release.
  • #42487: Avoid redundant crops for all CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. media controls: moved to future release.
  • #42751: Can we please enqueue media-views independently? @antpb offered to move the question about how mediaelement CSSCSS Cascading Style Sheets. is loaded to a separate issue. No consensus on the original question, left in awaiting review.

Next meeting

The next weekly media meeting will be held on Thursday, February 14, 2019, at 21:00 UTC in the #core-media room in the Make WordPress Slack.

#media, #summary

Jonathan Desrosiers 10:28 pm on January 31, 2019
Tags: media   

Media Meeting Recap: January 31, 2019

The following is a summary of the weekly media component meeting that occurred on January 30, 2019. Weekly media meetings are held every Thursday at 21:00 UTC. A full transcript can be found here in the #core-media room in the Make WordPress Slack.

Attendees: @joemcgill, @antpb, @mikeschroder, @desrosj, @paaljoachim, @karmatosed, @joehills, @sergeybiryukov, @birgire, @designsimply, @garrett-eclipse, @markoheijnen.

Here are the highlights of the meeting:

Meeting Agendas and Summaries

Many components that hold regular meetings have been posting agendas and summaries more regularly to start the year. This seems to have resulted in a slight uptick in attendance for some components, and many non-attendees have expressed an appreciation for this increase of posts as it helps them stay informed of what is being worked on and discussed.

Moving forward, the media component will work to be more consistent with both agenda and summary posts. @desrosj suggested having an official note taker to write the summary post during the meeting. This approach, in his experience, greatly decreases the time it takes to compile the post.

5.1 Items

The only known remaining 5.1 task for media is for @joemcgill to write a dev note for #45707.

5.2 Priorities

Meeting attendees worked to scrub the list of media tickets currently in the 5.2 milestone with the goal of ensuring each ticketticket Created for both bug reports and feature development on the bug tracker. has an owner. #44675, #36661, #42826, and #43524 all met that criteria. All but #42826 were assigned owners.

An upcoming meeting will focus on 5.2 priorities more generally.

@paaljoachim called out two GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ related issues to focus on (a third one mentioned has already been resolved):

Ticket Scrub

The remainder of the meeting was spent scrubbing the Awaiting Review list for the Media component.

The next weekly media meeting will be held on Thursday, February 7, 2019, at 21:00 UTC in the #core-media room in the Make WordPress Slack.

#media