Skip to content
This repository was archived by the owner on Nov 17, 2024. It is now read-only.

Under the hood

imath edited this page May 22, 2017 · 5 revisions

MediaThèque (or MediaBrary) relies on the WordPress Rest API and the content endpoints. User Media (MediaThèque items) are very similar to Attachments. They are using a custom post type user_media and a specific Rest Controller that extends the Attachment one. User Media are subdivided in two sub types: files & directories. Directories can have multiple children of both sub types and aim to help users tidy their personal Media Library the way they prefer (just like in a regular desktop environment).

User Media location

All User Media are located in a subdirectory of your WordPress uploads directory. In most configs, it should be in /wp-content/uploads/mediatheque. Right under this directory, you will find directories representing the two available statuses of User Media: publish & private. The private is a bit specific as it contains the private User Media and will be protected by an .htaccess file in Apache servers and will require an extra configuration step for Nginx servers. In both subdirectories there will be folders for each WordPress users (their User ID will be the name of these folders). Finally User Media of both types will be listed there. You must know that User Media directories have a "real" representation on the WordPress filesystem. For instance if a user having an ID of 23 creates a public directory named "My folder" and uploads in it foo.jpg and bar.png, here's how it would look like in the mediatheque directory.

/wp-content
/wp-content/uploads
/wp-content/uploads/mediatheque
/wp-content/uploads/mediatheque/publish
/wp-content/uploads/mediatheque/publish/23
/wp-content/uploads/mediatheque/publish/23/my-folder
/wp-content/uploads/mediatheque/publish/23/my-folder/foo.jpg
/wp-content/uploads/mediatheque/publish/23/my-folder/bar.png

JavaScript to power User Interfaces

There is two different interfaces (well 3 if we consider the optional Avatar UI) from where users can interact with their user media.

  • The MediaThèque (or MediaBrary) UI.
  • The views added to the WordPress Media Editor.

For both UIs, MediaThèque is using external libraries (but always included natively in WordPress) Plupload, Backbone, Underscore & jQuery. It's also using the WordPress Backbone JavaScript client.

WordPress Embeds to manage inserted User Media display.

The WordPress Embeds feature was introduced in version 4.4. Unlike the native WordPress Media Library which directly includes uploaded Media URLs and a bunch of HTML markup into the Post/Page or any other post type's content, MediaThèque is simply inserting the User Media permalink (with an attach query argument set to true) and extends the WordPress Embeds feature to render the HTML markup for this inserted media during the page display.

Doing so has 2 advantages:

  • it prevents "vanished" media to leave a "shadow footprint" into your content, "vanished" User Media are simply not displayed at all.
  • it allowes the User Media to be stored in any directory. As it's very easy to edit a User Media parent's directory thanks to the Drag & Drop MediaThèque UI feature, it's a very important point.

Clone this wiki locally