sanity-plugin-asset-source-pexels

| This is a Sanity Studio v3 plugin. For the v2 version, please refer to the v2-branch

What is it?

Search for photos on Pexels and add them to your project inside Sanity Studio.

Installation

sanity install asset-source-pexels

or

npm install --save sanity-plugin-asset-source-pexels

or

yarn add sanity-plugin-asset-source-pexels

Configuration

Using your own API (recommended)

The plugin can be configured to provide your Pexels API Key.

export default defineConfig({
  plugins: [
    pexelsImageAsset({
      API_KEY: 'YOUR_PEXELS_API_KEY',
    }),
  ],
})

Be careful with your API key. If you use this Sanity plugin, it's a good idea to make your repository private. Technically, the said API key can be accessed inside of the JS-bundle if someone knows the domain for the studio.

Using proxy client (alternative)

Alternatively, if you like to use the proxy client hosted in AWS (source here), then all you need to do is add it as a plugin in your sanity.config.ts (or .js).

export default defineConfig({
  plugins: [
    pexelsImageAsset({
      useProxyClient: true,
    }),
  ],
})

I don't have the resource to always make sure the proxy client is available at all times so use at your own discretion.

Additional options

You can configure how many photos are returned initially on load from search and succeeding results via results.perPage which is by default set to 24. Also, we set your search keyword to debounced by 500 ms so as not to blast your API usage as soon as your search keyword changes. You can change this with by adjusting searchKeyword to any number of your liking.

export default defineConfig({
  plugins: [
    pexelsImageAsset({
      // ..., <- previous config here `API_KEY` or `useProxyClient`
      results: {
        perPage: 50,
      },
      searchTimeout: 1000,
    }),
  ],
})

Manually configure asset sources

If you need to configure when Pexels should be available as an asset source, filter it out as needed in form.image.assetSources:

import {pexelsImageAsset} from 'sanity-plugin-asset-source-pexels'

export default defineConfig({
  // ...
  plugins: [pexelsImageAsset()],
  form: {
    image: {
      assetSources: (previousAssetSources, {schema}) => {
        if (schema.name === 'movie-image') {
          // remove pexels from `movie-image` types
          return previousAssetSources.filter(({name}) => name !== 'pexels')
        }
        return previousAssetSources
      },
    },
  },
})

License

MIT © Dorell James See LICENSE