Stock media

The editor can search Pexels and Unsplash for photos, and GIPHY for stickers. You connect each service with your own account. Each one is off until you configure it.

This example connects all three through your own server, so that your keys stay on the server:

import { ImageEditor, builtInStickers, giphyStickers } from '@layermetry/media-editor/react';

export default function App() {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <ImageEditor
        licenseKey="YOUR_LICENSE_KEY"
        onClose={() => console.log('The editor was closed')}
        // Photos: your server adds your Pexels and Unsplash keys.
        stockMediaApis={{
          pexels: { endpointUrl: 'https://api.example.com/pexels' },
          unsplash: { endpointUrl: 'https://api.example.com/unsplash', showAttribution: true },
        }}
        // Stickers: the built-in set, then GIPHY through your server.
        stickers={{
          sources: [builtInStickers(), giphyStickers({ endpointUrl: 'https://api.example.com/giphy' })],
        }}
      />
    </div>
  );
}

Each service takes exactly one of three connections:

A searchFn receives the search (query, page, perPage, and more) and answers with { results, total, total_pages }. Each result is a StockPhoto items, both exported types. A StockPhoto has id and url, and can have thumbnailUrl, width, height, alt, attribution, and downloadTrackingUrl. The answer of Pexels or Unsplash, unchanged, is also accepted. The editor checks every page of results: an item without an id or a url is left out, with one console line, and an answer with no list of results is shown to the user as an error of that service.

A setting that names none, or more than one, of apiKey, endpointUrl, and searchFn turns off only that service. Its panel says, for example, "Unsplash photos are not available.", and the console says which setting is wrong.

PexelsCopy Anchor Link

stockMediaApis.pexels connects Pexels. Default: none, and the Pexels tab does not appear.

stockMediaApis={{ pexels: { endpointUrl: 'https://api.example.com/pexels' } }}

UnsplashCopy Anchor Link

stockMediaApis.unsplash connects Unsplash. Unsplash requires that the photographer's name is shown, so showAttribution: true is required. Default: none, and the Unsplash tab does not appear.

stockMediaApis={{ unsplash: { endpointUrl: 'https://api.example.com/unsplash', showAttribution: true } }}

Photo creditsCopy Anchor Link

A stock photo keeps its photographer's credit after the user places it. The placed item carries attribution, which is saved with templates and drafts.

When the design holds a stock photo with a credit, the Export panel shows two switches:

The user's choice is saved with the design, and it can be undone. showAttributionOverlay and includeAttributionInExport set the starting value of each switch. Both are false by default.

To show credits your own way, hide a switch. A hidden switch always follows your prop:

ui={{ exportOptions: { hidden: ['photoCreditsOverlay', 'photoCreditsInExport'] } }}

stockMediaApis.pexels.showAttribution: false hides the photographer's name on the Pexels photo tiles. Unsplash tiles always show the name, because Unsplash requires it.

GIPHYCopy Anchor Link

GIPHY is a source of stickers. You connect it in the stickers prop with giphyStickers, not in stockMediaApis. Default: the built-in stickers only.

import { builtInStickers, giphyStickers } from '@layermetry/media-editor/react';

// …
stickers={{ sources: [builtInStickers(), giphyStickers({ endpointUrl: 'https://api.example.com/giphy' })] }}

See Stickers and GIFs for what the user sees.

Where providers appearCopy Anchor Link

View full size

The screenshot shows pictures returned by the example host's searchFn. It is not a live search of a stock provider.

A search shows 15 photos at a time, and Load More shows the next 15. The editor asks for photos in the shape of the page: landscape, portrait, or square.