Search photos on Unsplash and use them directly inside of your Sanity Studio.

License: MIT License

JavaScript 9.54% TypeScript 89.70% Shell 0.77%

plugin sanity-io sanity-studio sanity-plugin team-ecosystem

sanity-plugin-asset-source-unsplash's Introduction

Sanity Asset Source Plugin: Unsplash

This is a Sanity Studio v3 plugin. For the v2 version, please refer to the v2-branch.

What is it?

Search for photos on Unsplash and add them to your project right inside Sanity Studio.

Installation

npm install --save sanity-plugin-asset-source-unsplash

yarn add sanity-plugin-asset-source-unsplash

Usage

Add it as a plugin in sanity.config.ts (or .js):

import { unsplashImageAsset } from 'sanity-plugin-asset-source-unsplash'

export default defineConfig({
  // ...
  plugins: [unsplashImageAsset()],
})

This will add unsplashAssetSource to all image-fields in Sanity Studio

Manually configure asset sources

If you need to configure when Unsplash should be available as an asset source, filter it out as needed in form.image.assetSources:

import { unsplashImageAsset, unsplashAssetSource } from 'sanity-plugin-asset-source-unsplash'

export default defineConfig({
  // ...
  plugins: [unsplashImageAsset()],
  form: {
    image: {
      assetSources: (previousAssetSources, { schema }) => {
        if (schema.name === 'movie-image') {
          // remove unsplash from movie-image types
          return previousAssetSources.filter((assetSource) => assetSource !== unsplashAssetSource)
        }
        return previousAssetSources
      },
    },
  },
})

Example Unsplash API Photo result

{
  "id": "1_CMoFsPfso",
  "created_at": "2016-08-27T05:14:20-04:00",
  "updated_at": "2019-11-07T00:01:26-05:00",
  "promoted_at": "2016-08-27T05:14:20-04:00",
  "width": 6016,
  "height": 4016,
  "color": "#170801",
  "description": "Minimal pencils on yellow",
  "alt_description": "two gray pencils on yellow surface",
  "urls": {
    "raw": "https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEwMDg3MX0",
    "full": "https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjEwMDg3MX0",
    "regular": "https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDg3MX0",
    "small": "https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjEwMDg3MX0",
    "thumb": "https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjEwMDg3MX0"
  },
  "links": {
    "self": "https://api.unsplash.com/photos/1_CMoFsPfso",
    "html": "https://unsplash.com/photos/1_CMoFsPfso",
    "download": "https://unsplash.com/photos/1_CMoFsPfso/download",
    "download_location": "https://api.unsplash.com/photos/1_CMoFsPfso/download"
  },
  "categories": [],
  "likes": 4450,
  "liked_by_user": false,
  "current_user_collections": [],
  "user": {
    "id": "kA9qRJtrtA4",
    "updated_at": "2019-11-12T05:10:00-05:00",
    "username": "joannakosinska",
    "name": "Joanna Kosinska",
    "first_name": "Joanna",
    "last_name": "Kosinska",
    "twitter_username": "joannak.co.uk",
    "portfolio_url": null,
    "bio": null,
    "location": "Leeds",
    "links": {
      "self": "https://api.unsplash.com/users/joannakosinska",
      "html": "https://unsplash.com/@joannakosinska",
      "photos": "https://api.unsplash.com/users/joannakosinska/photos",
      "likes": "https://api.unsplash.com/users/joannakosinska/likes",
      "portfolio": "https://api.unsplash.com/users/joannakosinska/portfolio",
      "following": "https://api.unsplash.com/users/joannakosinska/following",
      "followers": "https://api.unsplash.com/users/joannakosinska/followers"
    },
    "profile_image": {
      "small": "https://images.unsplash.com/profile-1477941848765-f577d5c83681?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32",
      "medium": "https://images.unsplash.com/profile-1477941848765-f577d5c83681?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64",
      "large": "https://images.unsplash.com/profile-1477941848765-f577d5c83681?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128"
    },
    "instagram_username": "joannak.co.uk",
    "total_collections": 26,
    "total_likes": 534,
    "total_photos": 209,
    "accepted_tos": true
  }
}

Example resulting asset document

{
  "ms": 7,
  "query": "*[_type == \"sanity.imageAsset\" \u0026\u0026 _id == \"image-a6904e5887baafcf72f686cfa3e98399fd3ff74a-2600x1548-jpg\"]",
  "result": [
    {
      "_createdAt": "2019-11-14T09:01:47Z",
      "_id": "image-a6904e5887baafcf72f686cfa3e98399fd3ff74a-2600x1548-jpg",
      "_rev": "fDOLlTLScw9kMkHEI4HC9S",
      "_type": "sanity.imageAsset",
      "_updatedAt": "2019-11-14T09:01:47Z",
      "assetId": "a6904e5887baafcf72f686cfa3e98399fd3ff74a",
      "creditLine": "Qingbao Meng by Unsplash",
      "extension": "jpg",
      "metadata": {
        "_type": "sanity.imageMetadata",
        "dimensions": {
          "_type": "sanity.imageDimensions",
          "aspectRatio": 1.6795865633074936,
          "height": 1548,
          "width": 2600
        },
        "hasAlpha": false,
        "isOpaque": true,
        "lqip": "data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAMABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAUHBv/EACMQAAIBAgYCAwAAAAAAAAAAAAECAwAEBQYREiExFDJBUWH/xAAWAQEBAQAAAAAAAAAAAAAAAAACAwX/xAAcEQACAgIDAAAAAAAAAAAAAAAAAQIREiFBUaH/2gAMAwEAAhEDEQA/AMbh2arnaqvdggfR1ppc52eOMi3V5SOyTwKjOFsxLNvbj9pniU81t4whlcCT2GvdZ8080RUK5KHNm6F33SBlfTkCiptcXkwk03dD5op2uvRbP//Z",
        "palette": {
          "_type": "sanity.imagePalette",
          "darkMuted": {
            "_type": "sanity.imagePaletteSwatch",
            "background": "#435c39",
            "foreground": "#fff",
            "population": 6.83,
            "title": "#fff"
          },
          "darkVibrant": {
            "_type": "sanity.imagePaletteSwatch",
            "background": "#698710",
            "foreground": "#fff",
            "population": 2.51,
            "title": "#fff"
          },
          "dominant": {
            "_type": "sanity.imagePaletteSwatch",
            "background": "#728863",
            "foreground": "#fff",
            "population": 6.83,
            "title": "#fff"
          },
          "lightMuted": {
            "_type": "sanity.imagePaletteSwatch",
            "background": "#bec6a9",
            "foreground": "#000",
            "population": 0.51,
            "title": "#fff"
          },
          "lightVibrant": {
            "_type": "sanity.imagePaletteSwatch",
            "background": "#cad67e",
            "foreground": "#000",
            "population": 0.62,
            "title": "#000"
          },
          "muted": {
            "_type": "sanity.imagePaletteSwatch",
            "background": "#728863",
            "foreground": "#fff",
            "population": 6.83,
            "title": "#fff"
          },
          "vibrant": {
            "_type": "sanity.imagePaletteSwatch",
            "background": "#91b31a",
            "foreground": "#000",
            "population": 1.83,
            "title": "#fff"
          }
        }
      },
      "mimeType": "image/jpeg",
      "originalFilename": "2bb1b89b-726e-4d1c-a148-7936f57a432f.jpeg",
      "path": "images/q2r21cu7/example/a6904e5887baafcf72f686cfa3e98399fd3ff74a-2600x1548.jpg",
      "sha1hash": "a6904e5887baafcf72f686cfa3e98399fd3ff74a",
      "size": 1101084,
      "source": {
        "id": "01_igFr7hd4",
        "name": "unsplash",
        "url": "https://unsplash.com/photos/01_igFr7hd4"
      },
      "url": "https://cdn.sanity.io/images/q2r21cu7/example/a6904e5887baafcf72f686cfa3e98399fd3ff74a-2600x1548.jpg"
    }
  ]
}

Futher reading

License

MIT-licensed. See LICENSE.

Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.

Release new version

Run "CI & Release" workflow. Make sure to select the main branch and check "Release new version".

Semantic release will only release on configured branches, so it is safe to run release on any branch.

sanity-plugin-asset-source-unsplash's People

Contributors

Stargazers

Watchers

Forkers

biblioteksentralen

sanity-plugin-asset-source-unsplash's Issues

No feedback when api requests fail

Current behavior

When choosing an image, and the request fails for some reason, no feedback is given to the user.

Expected behavior

Some feedback that the request failed.

Reproduction

Install Privacy Badger
Open Select From -> Unsplash
In Privacy Badger, block images.unsplash.com
Choose image
Error is logged in console, but no feedback is given to user

Environment

Software	Version
@sanity/core	0.146.3
@sanity/desk-tool	0.146.3
sanity-plugin-asset-source-unsplash	0.1.1

PS. Really good work with the pluggable asset sources. Really cool 💯

Cannot search Unsplash Image ID

When I know the exact image ID eg: m2J105CzEAU, it cannot filter the search properly. Also would be great if you could show some popular categories similar to the Figma version.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Using a curated preset maintained by

Sanity: The Composable Content Cloud

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

chore(deps): update non-major (@commitlint/cli, @sanity/pkg-utils, @sanity/plugin-kit, @sanity/ui, @types/react, @types/react-dom, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint-plugin-react-hooks, react, react-dom, sanity, semantic-release, styled-components)
chore(deps): lock file maintenance
🔐 Create all pending approval PRs at once 🔐

Detected dependencies

github-actions

.github/workflows/lock.yml

dessant/lock-threads v5@1bf7ec25051fe7c00bdd17e6a7cf3d7bfb7dc771

.github/workflows/main.yml

actions/checkout v4

actions/setup-node v4

actions/checkout v4

actions/setup-node v4

actions/checkout v4

actions/setup-node v4

npm

package.json

@sanity/icons ^2.11.8

@sanity/incompatible-plugin ^1.0.4

@sanity/ui ^2.1.2

react-infinite-scroll-component 6.1.0

react-photo-album 2.3.1

rxjs ^7.8.1

@commitlint/cli ^19.2.2

@commitlint/config-conventional ^19.2.2

@sanity/pkg-utils ^6.6.5

@sanity/plugin-kit 4.0.3

@sanity/semantic-release-preset ^4.1.7

@types/react ^18.2.79

@types/react-dom ^18.2.25

@typescript-eslint/eslint-plugin ^7.7.0

@typescript-eslint/parser ^7.7.0

eslint ^8.57.0

eslint-config-prettier ^9.1.0

eslint-config-sanity ^7.1.2

eslint-plugin-import ^2.29.1

eslint-plugin-prettier ^5.1.3

eslint-plugin-react ^7.34.1

eslint-plugin-react-hooks ^4.6.0

eslint-plugin-simple-import-sort ^12.1.0

prettier ^3.2.5

prettier-plugin-packagejson ^2.5.0

react ^18.2.0

react-dom ^18.2.0

sanity ^3.37.2

semantic-release ^23.0.8

styled-components ^6.1.8

typescript 5.4.5

react ^18

sanity ^3

styled-components ^6.1

node >=18

Check this box to trigger a request for Renovate to run again on this repository

Error building project after upgrading to 0.2.0

I've reproduced the following error after the following setp:

Start a new project with "sanity init" and select the movie template
Run "sanity install sanity-plugin-asset-source-unsplash"
Add the following to sanity.json parts array:

{
"implements": "part:@sanity/form-builder/input/image/asset-sources",
"path": "./parts/assetSources.js"
}
Add the following to ./parts/assetSources.js:

import Unsplash from 'part:sanity-plugin-asset-source-unsplash/image-asset-source'
export default [Unsplash]

RESULT:

webpack building...
⠙ Compiling...webpack built 4b16de742c34a9621d44 in 625ms
✔ Compiling...
Failed to compile.

Error in ./node_modules/react-photo-album/dist/index.esm.js
Module parse failed: Unexpected token (211:37)
You may need an appropriate loader to handle this file type.
| };
| const defaultRenderPhoto = ({ imageProps }) => {
| const { src, alt, srcSet, sizes, ...rest } = imageProps;
| return jsx("img", { src: src, alt: alt, ...(srcSet ? { srcSet, sizes } : null), ...rest });
| };
@ ./node_modules/sanity-plugin-asset-source-unsplash/dist/lib/components/UnsplashAssetSource.js 27:42-70
@ ./node_modules/sanity-plugin-asset-source-unsplash/dist/lib/index.js
@ ./node_modules/sanity-plugin-asset-source-unsplash/dist/lib (all:part:@sanity/form-builder/input/image/asset-source)
@ ./node_modules/@sanity/form-builder/lib/legacyParts.js
@ ./node_modules/@sanity/form-builder/lib/sanity/formBuilderValueStore.js
@ ./node_modules/@sanity/form-builder/lib/sanity/legacyPartImplementations/form-builder.js (part:@sanity/form-builder)
@ ./node_modules/@sanity/desk-tool/lib/panes/document/documentPanel/documentViews/FormView.js
@ ./node_modules/@sanity/desk-tool/lib/panes/document/documentPanel/documentViews/index.js
@ ./node_modules/@sanity/desk-tool/lib/panes/document/documentPanel/DocumentPanel.js
@ ./node_modules/@sanity/desk-tool/lib/panes/document/documentPanel/index.js
@ ./node_modules/@sanity/desk-tool/lib/panes/document/DocumentPane.js
@ ./node_modules/@sanity/desk-tool/lib/panes/document/index.js
@ ./node_modules/@sanity/desk-tool/lib/panes/DeskToolPane.js
@ ./node_modules/@sanity/desk-tool/lib/panes/index.js
@ ./node_modules/@sanity/desk-tool/lib/DeskTool.js
@ ./node_modules/@sanity/desk-tool/lib/_parts/base-tool.js
@ ./node_modules/@sanity/vision/lib/VisionTool.js (all:part:@sanity/base/tool)
@ ./node_modules/@sanity/default-layout/lib/util/getRegisteredTools.js
@ ./node_modules/@sanity/default-layout/lib/router.js
@ ./node_modules/@sanity/default-layout/lib/Root.js (part:@sanity/base/root)
@ ./node_modules/@sanity/base/lib/components/SanityRoot.js (part:@sanity/base/sanity-root)
@ ./node_modules/@sanity/server/lib/browser/entry-dev.js
@ multi ./node_modules/@sanity/server/lib/browser/entry-dev.js

Provide more info about the author from the API

Current state:
Currently there is only possibility to get creditLine and source.url from the sanity.mageAsset object if you want to give attribution to the author of the photo. creditLine doesn't follow the format proposed by Unsplash -> Photo by Andres Molina** on Unsplash. It says [user] by Unsplash. Also it's not language agnostic.

Proposed state
Add following fields from the Unsplash API to the sanity.imageAsset:

user.name <- full user name
user.username <- username if you want to display it as @johnsmith
user.links.html <- link to the profile

This will provide many possibilities to display attribution information on the frontend.

Error: Unauthorized - Could not resolve project user

Hi! I've been getting this error when attempting to open the "Select image from Unsplash" window. It happens in the Studio both locally and when deployed to sanity.

{
  "statusCode": 401,
  "error": "Unauthorized",
  "message": "Could not resolve project user"
}

Allow React 17?

Some Sanity plugins requires React 17 as peer dependencies and now becomes unable to use together with this plugin.

@sanity/vision/lib/index.esm.js not found

Using sanity-plugin-asset-source-unsplash with sanity@dev-preview and @sanity/vision@^3.0.0-rc.2 results in the following issue:

Error: ENOENT: no such file or directory, open '/Users/shaun/Desktop/work/bitfo/node_modules/@sanity/vision/lib/index.esm.js'
    at Object.openSync (node:fs:599:3)
    at Object.readFileSync (node:fs:467:35)
    at extractExportsData (file:///Users/shaun/Desktop/work/bitfo/node_modules/vite/dist/node/chunks/dep-c842e491.js:42970:31)
    at async runOptimizeDeps (file:///Users/shaun/Desktop/work/bitfo/node_modules/vite/dist/node/chunks/dep-c842e491.js:42647:29)
    at async optimizeNewDeps (file:///Users/shaun/Desktop/work/bitfo/node_modules/vite/dist/node/chunks/dep-c842e491.js:42050:16)
    at async runOptimizer (file:///Users/shaun/Desktop/work/bitfo/node_modules/vite/dist/node/chunks/dep-c842e491.js:42079:55)

It looks like a depedency within the plugin is expecting @sanity/vision to export from a index.esm.js file but inspecting the package, it only exports from an index.cjs file.

I'm on a Mac M1 // OSX Ventura if that's relevant to the issue.

How to change stored image size pulled from Unsplash?

Hey, I'm wondering if there's any way to default to using one of the smaller image sizes for the selected image that's stored on Sanity. Many of the images I select are way too large and it results in a large asset (4+ MB). It would be awesome to select one of the other image size urls provided by the Unsplash API:

 "urls": {
    "raw": "https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEwMDg3MX0",
    "full": "https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjEwMDg3MX0",
    "regular": "https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDg3MX0",
    "small": "https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjEwMDg3MX0",
    "thumb": "https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjEwMDg3MX0"
  },

any guidance in this would be appreciated. Thank you!

Replace react-photo-gallery

Hi @skogsmaskin,

I came across this repo while searching for active projects using react-photo-gallery library. react-photo-gallery hasn't been maintained for almost 3 years and still has a hard peer dependency on React 16. At this point, it's safe to assume its author abandoned the library for good.

I'm the maintainer of react-photo-album library, a successor to react-photo-gallery. react-photo-album is very similar to the original library and requires just some minor tweaks to migrate.

Please let me know if you are interested, and I'll be happy to assist with PR.

sanity-io / sanity-plugin-asset-source-unsplash Goto Github PK