spz

strapi-plugin-zeasy-image-api

Strapi plugin to ease the process importing Unsplash image with attribution

Showing:

Popularity

Downloads/wk

29

GitHub Stars

27

Maintenance

Last Commit

8mos ago

Contributors

2

Package

Dependencies

4

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Strapi plugin image-api

This is a plugin for strapi headless CMS It helps you to search for images on Unsplash and Giphy, import it to your media library and insert to your Rich Text content with appropriate attribution.

Screenshots

Import from Unsplash

Import from Giphy

Get Started

Option 1, with React based wysiwyg strapi plugin installed

Tested supported plugin

strapi-plugin-wysiwsg-react-md-editor

strapi-plugin-ckeditor

strapi-plugin-ckeditor5

  1. Install the package

With yarn:

yarn add strapi-plugin-zeasy-image-api

With npm:

npm install strapi-plugin-zeasy-image-api

  1. Config Unsplash

    1. Register an Unsplash account here
    2. Create an app on Unsplash, take a note on your app name and your Access Key, it will be used later. Note: there would be a limit of 50 requests per hour for a demo app
  2. Config Giphy

    1. Register a Giphy account here
    2. Create an API app on Giphy, take a note on your API Key, it will be used later. Note: there would be a rate limited to a maximum of 42 search requests an hour and 1000 search requests a day for a beta key.
  1. Generate a config file at config/plugins.js
module.exports = ({ env }) => {
  return {
    'zeasy-image-api': {
      providerOptions: {
        unsplash: {
          appName: env('UNSPLASH_APP_NAME'),
          accessKey: env('UNSPLASH_ACCESS_KEY'),
        },
        giphy: {
          accessKey: env('GIPHY_API_KEY'),
        },
      },
    },
  };
};

Then make sure you have below variables in your .env file

UNSPLASH_APP_NAME=XXXXXXX
UNSPLASH_ACCESS_KEY=XXXXXX
GIPHY_API_KEY=XXXXXX

Option 2, without React based wysiwyg strapi plugin installed

  1. Follow the same steps in option 1

  2. Create a file under this path /extensions/content-manager/admin/src/components/WysiwygWithErrors/index.js with the content here

The code will get the image api panel component

const {
    strapi: {
      componentApi: { getComponent },
    },
  } = useStrapi();
  const ImageApiPanel = getComponent('image-api-panel').Component;

Then you can render it to any place you want.

<ImageApiPanel editor={{ value, name }} onEditorChange={onChange} />

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100