Grab, resize and credit any Unsplash picture with just one click! — A quick bookmarklet I made

in OCD2 years ago (edited)


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.

Sort:  

Hey that's pretty cool! I don't know when I will use it, since I download most of my images from pixabay and they are already the size I need them to be, but just knowing that this option exists is pretty awesome.

Thanks!

Posted via Steemleo

I used to do that too but Unsplash has prettier pictures and creates a more satisfying aesthetic style for me. But Pixabay has flexible pictures for every topic! So, before I used to grab all my pictures from Pixabay, but now I only look there if I have a specific need that a stock photo wouldn't cover.

I'll see if Pixabay has a similar API that can be triggered with a bookmarklet and if it does I'll make a tool for that as well.

NinjaEdit: Just remembered that Pixabay doesn't allow hotlinking unlike Unsplash, so a bookmarklet would have to resize, then upload to imgur and that wouldn't be optimal.

Thanks for sharing your creative and inspirational post!



This post got curated by our fellow curator @tibfox and you received a 100% upvote from our non-profit curation service!

Join the official DIYHub community on steem and show us more of your amazing work!

Hi @cryptosharon!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 4.344 which ranks you at #1593 across all Steem accounts.
Your rank has improved 2 places in the last three days (old rank 1595).

In our last Algorithmic Curation Round, consisting of 78 contributions, your post is ranked at #30.

Evaluation of your UA score:
  • Some people are already following you, keep going!
  • The readers like your work!
  • Try to work on user engagement: the more people that interact with you via the comments, the higher your UA score!

Feel free to join our @steem-ua Discord server

Congratulations @cryptosharon! You received a personal award!

Thank you for the witness votes you made to support your Steem community and for keeping the Steem blockchain decentralized

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Do not miss the last post from @steemitboard:

Use your witness votes and get the Community Badge
Vote for @Steemitboard as a witness to get one more award and increased upvotes!