@mtcmedia/vue-wordpress-media-library

Vue component to allow user to access/upload files using Wordpress' build in media library. Uses draggable to allow user to re-order files when using multiple functionality

Install to production site

npm install @mtcmedia/vue-wordpress-media-library

Usage

import MtcWordpressMediaLibrary from '@mtcmedia/vue-wordpress-media-library'

Vue.component('mtc-wordpress-media-library', MtcWordpressMediaLibrary)

Add this to your theme where you want the button to show. The condition prevents user from seeing the button who don't have permissions to upload files to your site

<?php
if (current_user_can('upload_files')) {
  ?>
  <mtc-wordpress-media-library
    v-model="images"
  >
  </mtc-wordpress-media-library>
  <?php
}
?>

Example with custom item slot and access to slotPropItem (selected file object)

<mtc-wordpress-media-library
  v-model="images"
>
  <template #item="{ slotPropItem }">
    {{ slotPropItem }}
   </template>
</mtc-wordpress-media-library>

images should equal and array of images in the following format as a minimum.

const images = [{
    "alt": "Alt tag of image",
    "id": 0,
    "mime": "image/jpeg",
    "sizes": {
        "thumbnail": {
            "url": "path_to_thumbnail_image" // pass in wordpress document icon managing document files
        }
    },
    "url": "path_to_main_image"
}]

Add the following to your themes function file

<?php
// enqueue js and css for wp media library
if (current_user_can('upload_files')) {
    add_action('wp_enqueue_scripts', 'wp_enqueue_media', 999);
}

// This limits users so that they can only see content that they have uploaded to the media library
function hideMediaFromOtherUsers($query) {
    $user_id = get_current_user_id();
    if ($user_id && !current_user_can('manage_options')) {
        $query['author'] = $user_id;
    }
    return $query;
}
add_filter('ajax_query_attachments_args', 'hideMediaFromOtherUsers');

Props

The component accepts these props:

Attribute	Type	Default	Description	Required
multiple	Boolean	false	Set to true to allow user to select more than one image	false
max	Number	Infinity	Define the maximum number of images that can be selected. Only useful when multiple is true	false
delete-image	Boolean	true	Allow user to remove images from selection	false
edit	Boolean	false	Allow user to make a change to selected image	false
imageSize	String	'thumbnail'	Image size used when displaying selected image image must contain this images size	false
resetSelection	Boolean	false	When true users selection will be cleared when they open the media library	false
showFilename	Boolean	false	Add filename to DOM after displayed image or can be used to display filename when file is a document	false
hideImage	Boolean	false	Choose to hide the image, useful if you are only managing documents and don't want to show the wordpress default icons	false
mimeType	String	''	Define the mime type of valid files	false

Slots

The component accepts these slots:

Name	Default	Description
item	HTML see here	Markup for images that are selected from the media library. Has access to file object
remove-button-content	HTML see here	Entire cntent of remove button
remove-button-icon	'×'	Icon within remove button
add-button-content	'Select File'	Content of select file button
edit-button-content	'Update File'	Content of update file button - this button shows when max number of files have been selected

item slot default html ```html

```

remove-button-content slot default html ```html Remove × ```

Development Setup

For developing it's best to download the directory from bitbucket and use the full component directly within a wordpress theme.