Image search

Search for images from the comfort of your own CMS using various image providers.

https://github.com/user-attachments/assets/b99bb160-788f-4689-9e40-005a6fe0bced

Compatibility table

| Payload version | Image search version | | ------------------ | -------------------- | | v3.18.0 or earlier | Incompatible | | v3.19.0 to v3.23.0 | v1.x | | v3.24.0 or v3.42.0 | v2.x | | v3.43.0 or later | v3.x |

Quick start

1. Install the plugin:

pnpm add @payload-bites/image-search

2. Add environment variables:

| Name | CORS URL | Description | | ---------------- | --------------------------- | ---------------------------------------------- | | API_KEY_UNSPLASH | https://images.unsplash.com | The key you configured to use the Unsplash API | | API_KEY_PEXELS | https://images.pexels.com | The key you configured to use the Pexels API | | API_KEY_PIXABAY | https://pixabay.com | The key you configured to use the Pixabay API |

[!IMPORTANT] At least one API key is required to use this plugin.

3. Add the plugin to your payload.config.ts:

/// ....
import { imageSearchPlugin } from "@payload-bites/image-search";

export default buildConfig({
  // ...
  plugins: [
    // ...
    imageSearchPlugin({
      // ...
    }),
  ],
});

Defaults

For defaults, refer to defaults.ts.

Options

For options, refer to types.ts.

Providers

A provider is an online image library that allows you to view and download images for use in your own projects. In order to use them, you must register an API key with the provider and assign it to its respective environment variable in your project.

• Unsplash
• Pixels
• Pixabay

Liability

Before using any provider, ensure you have reviewed and agreed to their terms and usage policies. Contributors to this plugin are not responsible for how these images are used.

Roadmap

• [ ] Image search bulk upload (awaiting custom component implementation by Payload team - discussion).
• [x] Translations.
• [x] Custom access control for provider endpoints.