^{Photo by Patrick Fore on Unsplash}

I was getting a bit annoyed with having to download every picture from Unsplash and then drag it to an editor to resize it, then upload it again, copy the link and paste it in my blog articles. I discovered then that Unsplash allows developers to use an API which can easily grab a photo's link, resize and crop the photo to any size, and grab the credit easily.

I made a quick piece of code that does exactly that. You add the code as a bookmarklet, then go to Unsplash, open any photo, click the bookmarklet and it gives you a text to copy and paste in your blog. You can then edit the sizes as you want.

The code

(() => {
  const report = text => {
    prompt('url & credit', text)
  }

  const splitAddress = location.href.split('/')

  const ID = splitAddress[splitAddress.length-1]

  const headers = {'Content-Type': 'application/json',
  'Authorization': 'Client-ID ByNZ31dx-lH97g-4OmS8mwZAltk_x48-RGTbU72B-Lk'}

  fetch('https://api.unsplash.com/photos/' + ID, {headers})
    .then(r => r.json())
    .then(json => {
            //report(JSON.stringify(json.urls))
      const url = json.urls.raw.concat("&h=800&w=1200")
      const credit = `Photo by <a href="${json.user.links.html}">${json.user.name}</a> on <a href="${json.links.html}">Unsplash</a>`
      const html = `<center><img src="${url}"></center><br><center><sup>${credit}</sup></center>`
            report(html)
  }).catch(e => report(e))
})()

Minified code with javascript: prefix, ready to bookmark

javascript:(()=>{const t=t=>{prompt("url & credit",t)},e=location.href.split("/"),n=e[e.length-1];fetch("https://api.unsplash.com/photos/"+n,{headers:{"Content-Type":"application/json",Authorization:"Client-ID ByNZ31dx-lH97g-4OmS8mwZAltk_x48-RGTbU72B-Lk"}}).then(t=>t.json()).then(e=>{const n=e.urls.raw.concat("&h=800&w=1200"),s=`Photo by <a href="${e.user.links.html}">${e.user.name}</a> on <a href="${e.links.html}">Unsplash</a>`;t(`<center><img src="${n}"></center><br><center><sup>${s}</sup></center>`)}).catch(e=>t(e))})();

Sample result after clicking the bookmarklet

<center><img src='https://images.unsplash.com/photo-1506224988854-3f6992c9334d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExODg5NX0&h=800&w=1200'></center><br><center><sup>Photo by <a href='https://unsplash.com/@patrickian4'>Patrick Fore</a> on Unsplash</sup></center>

Sample result on a post

How to add the bookmarklet

You have 3 options:

Option 1: Drag the following link to your bookmarks bar

Attention: Most viewers won't let you even see the link due to security reasons. If your editor doesn't let you click the link, then go to Option 2.

UnsplashGrabber

Option 2: Select the following code and drag it to your bookmarks bar, then right-click the new bookmark -> 'Properties' -> change the name to UnsplashGrabber or something else of your preference

javascript:(()=>{const t=t=>{prompt("url & credit",t)},e=location.href.split("/"),n=e[e.length-1];fetch("https://api.unsplash.com/photos/"+n,{headers:{"Content-Type":"application/json",Authorization:"Client-ID ByNZ31dx-lH97g-4OmS8mwZAltk_x48-RGTbU72B-Lk"}}).then(t=>t.json()).then(e=>{const n=e.urls.raw.concat("&h=800&w=1200"),s=`Photo by <a href="${e.user.links.html}">${e.user.name}</a> on Unsplash`;t(`<center><img src="${n}"></center><br><center><sup>${s}</sup></center>`)}).catch(e=>t(e))})();

Option 3:

1. Read the code
2. Modify it if you want
3. Minify it
4. Paste it with the javascript: prefix so that it runs as a bookmarklet
5. Save it as a bookmark, then change the name to something of your preference.
6. Try it and see if it runs.

Now, on to try the bookmarklet!

Head over to Unsplash with your new bookmarklet, open a photo (I used this one), click the bookmarklet, press Ctrl + C, come to the comments section or wherever you want, paste the code you got, press 'send' and see if you like it! :)

Feedback is appreciated

If you want to change the code, the instructions or whatever you want, you're welcome to leave any suggestions in the comments section, or make a pull-request on the Github project.