Skip to content

Instantly share code, notes, and snippets.

@daggerhart

daggerhart/WordPress Media Library

Last active May 17, 2017 20:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save daggerhart/64e6748c81e7c29ad3d0c7db27ce4a1a to your computer and use it in GitHub Desktop.
Save daggerhart/64e6748c81e7c29ad3d0c7db27ce4a1a to your computer and use it in GitHub Desktop.
Download ZIP
Description of WP Media Library (In comments)
Raw
WordPress Media Library
details in the first comment
@daggerhart
Copy link
Author

This is an overview of the WordPress Media Library. In WordPress, media items are a Post object (their "node").

1. Media Library browser on admin dashboard

  1. Handles any file type
  2. Is file-type aware (seen later)
  3. Filter and search options
  4. Alternate table-view instead of grid

1-media-library

2. Uploading media to the library on admin dashboard

  1. Drag and drop upload
  2. Select a file to upload

2-media-library-upload

3. Single media: Image

  1. File details
  2. File type aware (appropriate fields)
  3. Advanced editing for images (seen later)
  4. Edit the media's Post

3-single-media-image

3.a Single media: Image editing

  1. Crop, rotate, resize, etc

3a-single-media-image-edit

3.b Single media: edit as Post

  1. Media has a URL
  2. File type appropriate fields

3b-single-media-as-post

4. Single media: Video

  1. File type aware

4-single-media-video

5. WYSIWYG

  1. Detached "Add Media" button
  2. No image upload button in the WYSIWYG

5-wysiwyg

6. WYSIWYG: Add Media

  1. Upload tab
  2. Media library tab w/ filters and search
  3. Insert from URL
  4. Selecting media opens file-type appropriate details in sidebar

6-wysiwyg-add-media

7. WYSIWYG: with media present

  1. Selecting media provides a mini-toolbar for modifying it
  2. Edit button from within that toolbar opens an edit modal (seen later)

7-wysiwyg-with-media

8. WYSIWYG: edit media modal

  1. WYSIWYG specific options
  2. File-type appropriate fields

8-wysiwyg-edit-media

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment