https://github.com/kwinyyyc/strapi-plugin-zeasy-image-api
Strapi plugin to ease the process importing Unsplash image with attribution
https://github.com/kwinyyyc/strapi-plugin-zeasy-image-api
javascript node- nodejs strapi strapi-plugin unsplash unsplash-api
Last synced: 8 months ago
JSON representation
Strapi plugin to ease the process importing Unsplash image with attribution
- Host: GitHub
- URL: https://github.com/kwinyyyc/strapi-plugin-zeasy-image-api
- Owner: kwinyyyc
- License: mit
- Created: 2020-06-16T11:16:24.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-27T02:59:02.000Z (over 3 years ago)
- Last Synced: 2025-03-18T14:13:37.441Z (about 1 year ago)
- Topics: javascript, node-, nodejs, strapi, strapi-plugin, unsplash, unsplash-api
- Language: JavaScript
- Homepage:
- Size: 218 MB
- Stars: 33
- Watchers: 2
- Forks: 4
- Open Issues: 79
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Strapi plugin image-api
This is a plugin for [strapi](https://github.com/strapi/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](https://github.com/kwinyyyc/strapi-plugin-wysiwsg-react-md-editor)
[strapi-plugin-ckeditor](https://github.com/TechQuery/strapi-plugin-ckeditor)
[strapi-plugin-ckeditor5](https://github.com/Roslovets-Inc/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`
2. Config Unsplash
1. Register an Unsplash account [here](https://unsplash.com/developers)
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
3. Config Giphy
1. Register a Giphy account [here](https://developers.giphy.com/)
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.
4. Generate a config file at `config/plugins.js`
```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
```sh
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](./example/extensions/content-manager/admin/src/components/WysiwygWithErrors/index.js)
The code will get the image api panel component
```js
const {
strapi: {
componentApi: { getComponent },
},
} = useStrapi();
const ImageApiPanel = getComponent('image-api-panel').Component;
```
Then you can render it to any place you want.
```js
```