Sanity Asset Source Plugin: Unsplash

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

Installation

sanity install asset-source-unsplash

Part name

If you need to do customize available asset sources, the plugin part name for this asset source is:

part:sanity-plugin-asset-source-unsplash/image-asset-source

Developing on this module

To simulate using your development version as a real module inside a studio, you can do the following:

• Run npm install && npm link from the root of this repository.
• Run npm run watch to start developing and build the module when changes are made.

Displaying your development version inside a studio

With the mono-repo's test-studio:

• Bootstrap the monorepo: npm run bootstrap
• Add sanity-plugin-asset-source-unsplash with the current version number to package.json in the test-studio root folder (but don't run npm install afterwards)
• Run npm link sanity-plugin-asset-source-unsplash inside the mono-repo's root.
• Add asset-source-unsplash to the list of the studios plugins in sanity.json.
• Restart the test-studio

With a regular Sanity Studio:

• Run npm install
• Add sanity-plugin-asset-source-unsplash with the current version number to package.json.
• Run npm link sanity-plugin-asset-source-unsplash
• Add asset-source-unsplash to the list of the studios plugins in sanity.json.
• Start the studio

When you are done and have published your new version, you can run npm unlink inside this repo, and npm unlink sanity-plugin-asset-source-unsplash inside the mono-repo or studio to get back to the normal state. Then run npm run bootstrap for the mono-repo or npm install inside the regular studio to use the published version.

Example Unsplash API Photo result

1{
2  "id": "1_CMoFsPfso",
3  "created_at": "2016-08-27T05:14:20-04:00",
4  "updated_at": "2019-11-07T00:01:26-05:00",
5  "promoted_at": "2016-08-27T05:14:20-04:00",
6  "width": 6016,
7  "height": 4016,
8  "color": "#170801",
9  "description": "Minimal pencils on yellow",
10  "alt_description": "two gray pencils on yellow surface",
11  "urls": {
12    "raw": "https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEwMDg3MX0",
13    "full": "https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjEwMDg3MX0",
14    "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",
15    "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",
16    "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"
17  },
18  "links": {
19    "self": "https://api.unsplash.com/photos/1_CMoFsPfso",
20    "html": "https://unsplash.com/photos/1_CMoFsPfso",
21    "download": "https://unsplash.com/photos/1_CMoFsPfso/download",
22    "download_location": "https://api.unsplash.com/photos/1_CMoFsPfso/download"
23  },
24  "categories": [],
25  "likes": 4450,
26  "liked_by_user": false,
27  "current_user_collections": [],
28  "user": {
29    "id": "kA9qRJtrtA4",
30    "updated_at": "2019-11-12T05:10:00-05:00",
31    "username": "joannakosinska",
32    "name": "Joanna Kosinska",
33    "first_name": "Joanna",
34    "last_name": "Kosinska",
35    "twitter_username": "joannak.co.uk",
36    "portfolio_url": null,
37    "bio": null,
38    "location": "Leeds",
39    "links": {
40      "self": "https://api.unsplash.com/users/joannakosinska",
41      "html": "https://unsplash.com/@joannakosinska",
42      "photos": "https://api.unsplash.com/users/joannakosinska/photos",
43      "likes": "https://api.unsplash.com/users/joannakosinska/likes",
44      "portfolio": "https://api.unsplash.com/users/joannakosinska/portfolio",
45      "following": "https://api.unsplash.com/users/joannakosinska/following",
46      "followers": "https://api.unsplash.com/users/joannakosinska/followers"
47    },
48    "profile_image": {
49      "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",
50      "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",
51      "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"
52    },
53    "instagram_username": "joannak.co.uk",
54    "total_collections": 26,
55    "total_likes": 534,
56    "total_photos": 209,
57    "accepted_tos": true
58  }
59}
60

Example resulting asset document

1{
2  "ms": 7,
3  "query": "*[_type == \"sanity.imageAsset\" \u0026\u0026 _id == \"image-a6904e5887baafcf72f686cfa3e98399fd3ff74a-2600x1548-jpg\"]",
4  "result": [
5    {
6      "_createdAt": "2019-11-14T09:01:47Z",
7      "_id": "image-a6904e5887baafcf72f686cfa3e98399fd3ff74a-2600x1548-jpg",
8      "_rev": "fDOLlTLScw9kMkHEI4HC9S",
9      "_type": "sanity.imageAsset",
10      "_updatedAt": "2019-11-14T09:01:47Z",
11      "assetId": "a6904e5887baafcf72f686cfa3e98399fd3ff74a",
12      "creditLine": "Qingbao Meng by Unsplash",
13      "extension": "jpg",
14      "metadata": {
15        "_type": "sanity.imageMetadata",
16        "dimensions": {
17          "_type": "sanity.imageDimensions",
18          "aspectRatio": 1.6795865633074936,
19          "height": 1548,
20          "width": 2600
21        },
22        "hasAlpha": false,
23        "isOpaque": true,
24        "lqip": "data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAMABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAUHBv/EACMQAAIBAgYCAwAAAAAAAAAAAAECAwAEBQYREiExFDJBUWH/xAAWAQEBAQAAAAAAAAAAAAAAAAACAwX/xAAcEQACAgIDAAAAAAAAAAAAAAAAAQIREiFBUaH/2gAMAwEAAhEDEQA/AMbh2arnaqvdggfR1ppc52eOMi3V5SOyTwKjOFsxLNvbj9pniU81t4whlcCT2GvdZ8080RUK5KHNm6F33SBlfTkCiptcXkwk03dD5op2uvRbP//Z",
25        "palette": {
26          "_type": "sanity.imagePalette",
27          "darkMuted": {
28            "_type": "sanity.imagePaletteSwatch",
29            "background": "#435c39",
30            "foreground": "#fff",
31            "population": 6.83,
32            "title": "#fff"
33          },
34          "darkVibrant": {
35            "_type": "sanity.imagePaletteSwatch",
36            "background": "#698710",
37            "foreground": "#fff",
38            "population": 2.51,
39            "title": "#fff"
40          },
41          "dominant": {
42            "_type": "sanity.imagePaletteSwatch",
43            "background": "#728863",
44            "foreground": "#fff",
45            "population": 6.83,
46            "title": "#fff"
47          },
48          "lightMuted": {
49            "_type": "sanity.imagePaletteSwatch",
50            "background": "#bec6a9",
51            "foreground": "#000",
52            "population": 0.51,
53            "title": "#fff"
54          },
55          "lightVibrant": {
56            "_type": "sanity.imagePaletteSwatch",
57            "background": "#cad67e",
58            "foreground": "#000",
59            "population": 0.62,
60            "title": "#000"
61          },
62          "muted": {
63            "_type": "sanity.imagePaletteSwatch",
64            "background": "#728863",
65            "foreground": "#fff",
66            "population": 6.83,
67            "title": "#fff"
68          },
69          "vibrant": {
70            "_type": "sanity.imagePaletteSwatch",
71            "background": "#91b31a",
72            "foreground": "#000",
73            "population": 1.83,
74            "title": "#fff"
75          }
76        }
77      },
78      "mimeType": "image/jpeg",
79      "originalFilename": "2bb1b89b-726e-4d1c-a148-7936f57a432f.jpeg",
80      "path": "images/q2r21cu7/example/a6904e5887baafcf72f686cfa3e98399fd3ff74a-2600x1548.jpg",
81      "sha1hash": "a6904e5887baafcf72f686cfa3e98399fd3ff74a",
82      "size": 1101084,
83      "source": {
84        "id": "01_igFr7hd4",
85        "name": "unsplash",
86        "url": "https://unsplash.com/photos/01_igFr7hd4"
87      },
88      "url": "https://cdn.sanity.io/images/q2r21cu7/example/a6904e5887baafcf72f686cfa3e98399fd3ff74a-2600x1548.jpg"
89    }
90  ]
91}

Futher reading

• https://unsplash.com/documentation
• https://www.sanity.io/docs/custom-asset-sources