All Projects → kwinyyyc → strapi-plugin-zeasy-image-api

kwinyyyc / strapi-plugin-zeasy-image-api

Licence: MIT license
Strapi plugin to ease the process importing Unsplash image with attribution

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to strapi-plugin-zeasy-image-api

python-unsplash
Python wrapper for the Unsplash API.
Stars: ✭ 130 (+364.29%)
Mutual labels:  unsplash, unsplash-api
Monotone
An Unsplash Application for iOS.
Stars: ✭ 181 (+546.43%)
Mutual labels:  unsplash, unsplash-api
strapi-plugin-vercel
▲ Strapi plugin for Vercel Platform
Stars: ✭ 28 (+0%)
Mutual labels:  strapi, strapi-plugin
go-unsplash
Go Client for the Unsplash API
Stars: ✭ 70 (+150%)
Mutual labels:  unsplash, unsplash-api
instant-images
Instantly upload photos from Unsplash, Pixabay and Pexels to your website without leaving WordPress.
Stars: ✭ 26 (-7.14%)
Mutual labels:  unsplash, unsplash-api
strapi-plugin-import-export-content
Csv and Json import / export content plugin to Strapi
Stars: ✭ 129 (+360.71%)
Mutual labels:  strapi, strapi-plugin
strapi-plugin-sync-roles-permissions
Store user roles and permissions configuration as a JSON file and then import and reuse it any time.
Stars: ✭ 34 (+21.43%)
Mutual labels:  strapi, strapi-plugin
strapi-plugin-migrate
Strapi-Plugin-Migrate helps to migrate Strapi data from one environment of your app to another. For example development > staging
Stars: ✭ 71 (+153.57%)
Mutual labels:  strapi, strapi-plugin
Laravel-Unsplash-Wrapper
A Laravel wrapper for Unsplash API's.
Stars: ✭ 21 (-25%)
Mutual labels:  unsplash, unsplash-api
strapi-plugin-sitemap
🔌 Generate a highly customizable sitemap XML in Strapi CMS
Stars: ✭ 136 (+385.71%)
Mutual labels:  strapi, strapi-plugin
strapi-plugin-github-publish
This is a plugin for Strapi headless CMS. It lets you trigger a GitHub Action workflow when the site is ready to be published.
Stars: ✭ 35 (+25%)
Mutual labels:  strapi, strapi-plugin
vue-unsplash
A sample photo search app using Vuejs and unsplash Api
Stars: ✭ 27 (-3.57%)
Mutual labels:  unsplash, unsplash-api
MacOS-Developers-Excuses
A macOS screen saver that shows a random developer excuse over a beautiful photo background. Made with ❤
Stars: ✭ 53 (+89.29%)
Mutual labels:  unsplash, unsplash-api
ios-rentateam
Тестовое приложение Rentateam
Stars: ✭ 13 (-53.57%)
Mutual labels:  unsplash
nx-extend
Nx Workspaces builders and tools
Stars: ✭ 67 (+139.29%)
Mutual labels:  strapi
strapi-starter-nuxt-e-commerce
Strapi Starter Nuxt.js E-commerce
Stars: ✭ 170 (+507.14%)
Mutual labels:  strapi
image
mpvue-Unsplash
Stars: ✭ 31 (+10.71%)
Mutual labels:  unsplash
Palette
Android application to get the #hexcode and rgb() values for any image
Stars: ✭ 31 (+10.71%)
Mutual labels:  unsplash
wongames
🎮 Ecommerce de jogos no estilo Steam. Desenvolvido com Next.js, TypeScript, GraphQL, etc.
Stars: ✭ 18 (-35.71%)
Mutual labels:  strapi
strapi-starter-minimal-sapper-blog
A minimal Sapper Blog built with Strapi
Stars: ✭ 44 (+57.14%)
Mutual labels:  strapi

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.
  3. 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} />
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].