Nitrate Processed Mincemeat

    @pesdk/getty-images
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    Getty Images plugin for PhotoEditor SDK

    This plugin helps to integrate Getty Images API into PhotoEditor SDK.

    Prerequisite

    You need to use your backend endpoint that provides an OAuth token for the Getty Images API.

    Getting Started

    yarn add @pesdk/getty-images

    or

    npm install --save @pesdk/getty-images
    
    import { Tool, CustomButtonProps } from 'photoeditorsdk';
    const sdkConfiguration = {
      // include custom tool into tools list
      tools: [Tool.CUSTOM, Tool.TRANSFORM],
      // provide tool configuration
      [Tool.CUSTOM]: {
        // toolbar icon
        icon: React.ElementType,
        // See Toolbar component API
        toolControlBar: React.ElementType 
      },
      custom: {
        components: {
          buttons: {
            // Export action behaviour for Getty Images usage
            // See Export button API
            mainCanvasActionExport: React.ElementType<CustomButtonProps>
          },
        },
        languages: {
          en: {
            customTool: {
              // toolbar title
              title: 'Getty Images',
              // ...other localization strings
            },
          },
        },
      },
    }

    Examples

    PhotoEditor SDK & Getty Images example

    Codesandox

    Toolbar component

    Default Getty Images toolbar represents a debounced input for search and infinite images grid using:

    import { GettyImagesToolbarProps } from '@pesdk/getty-images'
    // equivalent to
    export type GettyImagesToolbarProps = {
        // public getty images api key
        apiKey: string;
        // promise that returns OAuth token
        fetchToken(): Promise<string>;
        /**
         * handle errors occurred during API call
         * https://github.com/imgly/pesdk-web-plugins/tree/main/plugins/getty-images/src/types.ts
         */
        onError: OnError;
        /**
         * configure image search params
         * Typescript types https://github.com/imgly/pesdk-web-plugins/tree/main/plugins/getty-images/src/api/searchImages.ts
         * Getty API https://api.gettyimages.com/swagger/index.html#Images
         */
        searchParams?: SearchImagesParams;
        // image size for editor preview, default DisplaySizeName.High = 'high_res_comp'
        displaySize?: DisplaySizeName;
    };
    
    const params: GettyImagesToolbarProps = {}
    // non-react environment
    const GettyToolbar = createGettyImagesToolbar(params);
    // react environment
    const GettyToolbarAlt: React.FC<CustomToolProps> = props => {
        return (
            <GettyImagesToolControlBar
                {...props}
                {...params}
            />
        );
    };

    Customization

    You can replace the toolbar using any library that you want or have in the app environment.

    To override the toolbar you must keep:

    • createAPIClient instance
    • gettyStore calls
    • handleSetImage function

    Export button

    The export button should be used to get a higher resolution and licensed image from Getty Images.

    import { GettyImagesExportButtonProps } from '@pesdk/getty-images'
    // equivalent to
    
    export type GettyImagesExportButtonProps = {
        /**
         * Function to be called before licensing an image
         * {function} callback to license an image
         * {GettyImage} image data object
         */
        onConfirm: OnConfirm;
        // image size to generate final output, default ImageSize.Medium = 'medium'
        imageSize?: ImageSize;
    };
    const params: GettyImagesExportButtonProps = {}
    // non-react environment
    const ExportButton = createGettyImagesExportButton(params);
    // react environment
    const ExportButtonAlt: React.FC<CustomButtonProps> = props => {
        return (
            <GettyImagesExportButton
                {...props}
                {...params}
            />
        );
    };

    Customization

    You can replace the export button with a custom one.

    To override the toolbar you must keep:

    • Passing custom button props if ContainedPrimaryButton is going to be used
    • onLicenseImage function

    Localization

    The plugin accepts title and placeholder string in localization object

    {
        "custom": {
            "en": {
                "customTool": {
                    "title": "Getty Images",
                    "placeholder": "Search the world’s best images"
                }
            }
        }
    }

    PhotoEditor SDK Documentation

    Visit our docs

    License

    Please see LICENSE for licensing details.

    Support and License

    Use our service desk for bug reports or support requests. To request a commercial license, please use the license request form on our website.

    Install

    npm i @pesdk/getty-images

    Homepage

    www.img.ly/

    DownloadsWeekly Downloads

    10

    Version

    1.2.0

    License

    BSD-3-Clause

    Unpacked Size

    190 kB

    Total Files

    46

    Last publish

    Collaborators

    • maerch
    • sascha_
    • alanuecker
    • schiewe