Adding a custom tab with Unsplash.com?

Hi,

I’m creating an app where users need to select a photo to begin with. To make things easier, I would like to add a tab to the widget where they can search for and select freely-available images from Unsplash.com.

Has anyone done this already with publicly available code? Is there a way to do this without first pre-uploading images from Unsplash.com to Uploadcare (i.e. without having the UUID’s upfront)?

Any suggestions on how to implement this would be appreciated. Thanks!

To add a bit more context, and in case it’s more helpful, I’m trying to build this within a Vue.js app.

Any update on this? Thanks!

Hi @manohar.vanga

I’m sorry that it has taken so long to reply to your question!

I’ve made this CodePen demo to show how you can implement an Unsplash custom tab in the widget

https://codepen.io/optlsnd/pen/LweVge

The basic idea is that you send a request to Unsplash API inside the custom tab function. It returns a set of images, and you create an image element from each one and append them to the container element of the custom tab. Also, you can add a custom click handler to each image depending on the requirements of your app. In the demo, you’ll need to add your Unsplash API key to make it work.

Note that Unsplash requires the image URLs returned by the API to be directly used or embedded in your applications, so uploading them to Uploadcare for further use might infringe this requirement since, after uploading, the images will get different URLs hence Unsplash won’t be able to track them.

@manohar.vanga hi, we’ve made a live demo of Unsplash tab for React, check it out :eyes:

Hey Alex, this is exactly what I had in mind. Thanks so much for taking the time to hack it up!

@manohar.vanga you’re welcome :dizzy: