sanity-plugin-media-library

    2.0.0 • Public • Published

    Media Library for Sanity

    The missing media library for Sanity. With support for filters per tag and extension 🔥

    Media library List view Media library Grid view

    Media library Asset input view

    Features

    • Media library appears in CMS navigation
    • Support for images and files
    • View/Edit your assets in once single place:
      • View asset details
      • Add alt tags to your image in a central place
      • Easily add custom fields to your assets (like location and attribution)
    • Grid view and list view (with more details):
      • Sort by latest or alphabetically
      • Search by alt, tag, or file name
      • View asset details in a list view
    • Asset organizing:
      • Add tags to your assets to create structure in your media library
      • See which assets are unused
      • Select 1 or multiple assets with cmd/ctrl or shift
      • Delete 1 or multiple asset(s) at a time
      • Filter by (multiple) file extension(s) or tag(s)
      • Clear filters with a click on a button
      • Drag 1 or multiple assets to a tag to add them
    • Asset uploading:
      • Upload 1 or multiple files with the upload button
      • Also drag to upload 1 or multiple files
    • Asset source:
      • Use it where it's useful: select images with the media library in your documents
    • Quick action: Double click an asset to trigger it's primary action
    • Customizable fields
      • Define custom fields for your assets (text, number, checkbox, textarea)

    Installation

    Automagically

    In your Sanity project's directory run :

    sanity install media-library
    

    Manually

    yarn add sanity-plugin-media-library
    

    or

    npm install --save sanity-plugin-media-library
    

    Adding the library

    In your sanity.json add it to the list of plugins:

    {
      "plugins": [
        "@sanity/base",
        "@sanity/components",
        "@sanity/default-layout",
        "@sanity/default-login",
        "@sanity/desk-tool",
        "media-library"
      ]
    }

    Using the Media Library

    Setting Globally

    By default the media library will be added to all image fields, next to any other asset sources you might have. You can customise this behaviour in your sanity.json by adding the following to the parts array:

    {
      "implements": "part:@sanity/form-builder/input/image/asset-sources",
      "path": "./assetSources.js"
    }

    In assetSources.js:

    import AssetSource from "part:sanity-plugin-media-library/asset-source";
    export default [AssetSource];

    Setting per field

    If you want to define the media library for specific fields, you can set the sources option on your field:

    import AssetSource from "part:sanity-plugin-media-library/asset-source";
    
    export default {
      name: "mySchema",
      type: "document",
      title: "My Schema",
      fields: [
        {
          name: "image",
          type: "image",
          title: "Image",
          options: { sources: [AssetSource] },
        },
      ],
    };

    See Sanity Custom Asset Sources for more options.


    Theming

    In the 2.0.0 release support for custom themes has been dropped, the interface is built using Sanity UI. If you want to continue theming, pick a version in the 1.0.x range.


    Configuration

    After installing the plugin, a config file is automatically created at config/media-library.json.

    Example with asset fields listed and custom fields added:

    {
      "customFields": [
        {
          "label": "Additional description",
          "name": "description",
          "placeholder": "No description yet...",
          "type": "textarea"
        },
        {
          "label": "Decade when photo captured",
          "max": 2200,
          "min": 1800,
          "name": "decade",
          "placeholder": "Between 1800 and 2200",
          "step": 10,
          "type": "number"
        },
        {
          "label": "Is a premium photo",
          "name": "premiumPhoto",
          "type": "checkbox"
        },
        {
          "label": "Attribution",
          "name": "attribution",
          "placeholder": "No attribution yet"
        },
        {
          "name": "location",
          "label": "Location",
          "type": "location"
        },
        {
          "label": "Copyright",
          "name": "copyright",
          "placeholder": "pick one…",
          "type": "select",
          "options": [
            { "title": "Copyright", "value": "copyright" },
            { "title": "Public Domain", "value": "public-domain" },
            { "title": "Creative Commons", "value": "creative-commons" }
          ]
        },
      ],
    }

    Contributing

    If you run into problems or have feature requests, please create an issue or pull request and I'll look into it as soon as I can.

    Development

    Run yarn dev in the root folder to make changes.

    Optional: To use the included studio while developing, make a symlink inside the /test/studio/plugins folder that links to the root directory. Then run sanity start in test/studio. You can also add the plugin to the plugins directory in a Sanity studio of your own.

    Testing

    Create a Sanity bot token with write access at manage.sanity.io. Add a dataset named 'testing'. Then make a .env file inside the /test folder:

    SANITY_PLAYWRIGHT_TEST_TOKEN=<SANITY_WRITE_API_TOKEN>
    SANITY_PROJECT_ID=<PROJECT_ID>
    

    Install

    npm i sanity-plugin-media-library

    DownloadsWeekly Downloads

    1,516

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    1.72 MB

    Total Files

    326

    Last publish

    Collaborators

    • dennispassway
    • aratramba