@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 |

Development Setup

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