Media Handling in WordPress Explained

Slides from my WordCamp US 2017 talk. Details at https://2017.us.wordcamp.org/session/media-handling-in-wordpress-explained/

Transcript

1. Joe McGill MEDIA HANDLING IN 
 WORDPRESS, EXPLAINED WordCamp US 2017
2. Title of the Proposal WordCamp US 2016 Contributor Day
3. Currently photos are an attachment to a text post; but that kind of thinking lives in the older world of primarily text-based posts and when images were scarce. John Maeda • Design at WordCamp US 2016 make.wordpress.org/design/2016/12/04/design-at-wordcamp-us-2016 “ ”
4. Average Bytes Per Web Page November 2017 Other 20kb Video 792kb Fonts 112kb Scripts 457kb Stylesheets 89kb HTML 53kb Images 1815kb Total
 3378 kB Media Handling in WordPress Explained
5. WordPress 4.4 Responsive Images Use of SrcsetWDescriptor • chromestatus.com
6. The Mobile Test Upload a photo taken from your phone to a default install of WordPress on a basic $5/mo hosting plan really-cute-dog-photo.jpg HTTP error.
7. Media Handling in WordPress Explained Media Upload Flow 1. Media file uploaded HTTP Request 2. Upload handling async-upload.php • wp/v2/media 3. File and Post handling media_handle_upload()
8. 1/Media File Uploading WordPress includes plupload.js, 
 a cross-browser file uploading API to deliver a consistent file uploading experience in the browser. Regardless of the method used, an upload is sent to WordPress in the form of an HTTP Post request.
9. 2/Upload Handling WordPress generally handles media upload HTTP requests through async-upload.php or the wp/v2/media endpoint of the REST API. • Receive HTTP Request • Return either created attachment data or an error
10. 3/File Processing WordPress processes the file data and saves the file data to the filesystem. For most uploads, this is done in wp_handle_upload(). Before saving the file, check: • User capabilities • Is filesystem is writable • The filetype is allowed Returns an array containing the file path, URL, and type on success.
11. 4/Prepare and Save Post Data Attachments in WordPress are a combination of a WP_Post object with specialized post meta values. WordPress combines data passed in the upload request with data from the file itself to build post properties like title, content, and excerpt Once assembled, an attachment array is saved to the database using wp_insert_attachment() (or wp_insert_post() in the REST API).
12. PUBLIC SERVICE ANNOUNCEMENT: Media items may appear in the library before they are fully ready.
13. 5/Generate Attachment Metadata WordPress creates additional attachment metadata in wp_generate_attachment_metadata(). Media types with support for attachment metadata: • Images • Audio • Video • PDF (Since WP 4.7)
14. 5/Generate Attachment Metadata (Images) 1. Calculate image dimensions 2. Get file path relative to the uploads directory 3. Build an array of intermediate sizes to create by combining default image sizes with those defined by add_image_size() 4. Use wp_get_image_editor() to get a WP_Image_Editor for creating intermediate files. Default image editors use either ImageMagick or GD. 5. Pass the array of sizes to the editor's mulit-resize() method. Make the files, return the data. 6. Extract EXIF/IPTC data (aperture, credit, camera, copyright, shutter speed, ISO, etc.)
15. Example image attachment meta Media Handling in WordPress Explained array( 'width' 'height' 'file' // Includes upload path relative to upload_dir 'sizes' => array( 'thumbnail' => array( 'file', 'width, 'height', 'mime' ), 'medium' => array( 'file', 'width, 'height', 'mime' ), 'large' => array( 'file', 'width, 'height', ‘mime' ), // etc. ), 'image_meta' => array( 'aperture', 'credit', 'camera', 'caption', 'created_timestamp', 'copyright', 'focal_length', 'iso', 'shutter_speed', 'title', 'orientation', ‘keywords' ), )
16. 5/Generate Attachment Meta (Audio/Video) 1. Read the file’s ID3 data 2. That’s it.
 
 well…
 
 unless…
 
 If the ID3 data includes a cover image, we need to process that file like an image upload and save it as the `post_thumbnail` for the audio or video attachment post.
 
 Neat.
17. 5/Generate Attachment Meta (PDFs) 1. Load a WP_Image_Editor 2. Create a preview JPG from the first page of the PDF 3. Create intermediate sizes from the preview JPG
18. 6/Save Attachment Metadata Once WordPress is finished generating all of the attachment metadata, it is saved to the database using the function wp_update_attachment_metadata() and the attachment ID is returned. Note: Additional metadata, like the `alt` attribute value, and context (for custom headers) may also be generated.
19. 7/Prepare and Return the Response Once WordPress has finished processing the file, creating an attachment post, and saving all relevant metadata, it can prepare the response to send back to the client. Traditionally this will use wp_prepare_attachment_for_js() to create a JSON representation of the attachment. The REST API, returns a response which is similar, but not identical. Server errors return as an HTTP 503 error.
20. Review of WP Media Handling Systems 1. File Uploader (client) 2. Upload Handler (server) 3. File Handler (file system) 5. Data Handler (database) • Post data • Post metadata 6. Image Editor (intermediate sizes)
21. WordPress 5.0 (and beyond) What happens next is up to us, 
 but here are some ideas: 1. Asynchronous image generation 2. Make media a first-class data type (WP_Image) 3. Streamline integration for 3rd party services 5. Post-upload image optimization (ImageOptim) 6. Support modern formats (WebP, SVG) 7. ¯\_(ツ)_/¯ Media Handling in WordPress Explained
22. Joe McGill joemcgill • joemcgill@humanmade.com THANK YOU.