Agrega hermosas imágenes con la API Unsplash

¿Quizás conoces Unsplash? Apuesto a que es el sitio de fotografías de archivo más popular que existe por dos grandes razones:

1. Cada foto que hay ahí es bastante bonita.
2. Cada foto es completamente gratuita incluso para uso comercial. No es necesario pedir permiso ni siquiera darle crédito (aunque se agradece).

Sin embargo, aquí hay algo que quizás no sepas: Unsplash tiene una API, y es ilimitada y gratuita . Tachuelas de latón: es exactamente lo que esperas que sea. Una API JSON realmente limpia, bien documentada y de buen rendimiento que le brinda URL de fotos con metadatos.

¿Para qué usarías la API Unsplash?

Hay muchos ejemplos en el área de desarrolladores de Unsplash, desde Medium hasta Squarespace y Trello, ¡pero aquí tienes otro de mis favoritos!

Utilizo Notion todos los días. Es una gran aplicación para tomar notas, planificar y todo tipo de cosas. Una de las características que tiene es darle a cada documento que cree un encabezado de imagen personalizado. Estos dan a los documentos una gran personalidad. Notion tiene varios entre los que puedes elegir o puedes cargar el tuyo propio. ¡O puedes buscarlos en Unsplash!

¿Cómo funciona? Déjame mostrarte primero:

Usa la API Unsplash para hacerlo y aquí hay un artículo al respecto. Hay un punto final de búsqueda como parte de la API que hace que esto sea bastante fácil de hacer.

Por ejemplo, accederías a una URL como:

https://api.unsplash.com/search/photos?page=1query=SEARCH_QUERY

Y recuperarás JSON como:

{  "total": 133,  "total_pages": 7,  "results": [    {      "id": "eOLpJytrbsQ",      "created_at": "2014-11-18T14:35:36-05:00",      "width": 4000,      "height": 3000,      "color": "#A7A2A1",      "likes": 286,      "liked_by_user": false,      "description": "A man drinking a coffee.",      "user": {        "id": "Ul0QVz12Goo",        "username": "ugmonk",        "name": "Jeff Sheldon",        "first_name": "Jeff",        "last_name": "Sheldon",        "instagram_username": "instantgrammer",        "twitter_username": "ugmonk",        "portfolio_url": "http://ugmonk.com/",        "profile_image": {          "small": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5q=80fm=jpgcrop=facescs=tinysrgbfit=croph=32w=32s=7cfe3b93750cb0c93e2f7caec08b5a41",          "medium": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5q=80fm=jpgcrop=facescs=tinysrgbfit=croph=64w=64s=5a9dc749c43ce5bd60870b129a40902f",          "large": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5q=80fm=jpgcrop=facescs=tinysrgbfit=croph=128w=128s=32085a077889586df88bfbe406692202"        },        "links": {          "self": "https://api.unsplash.com/users/ugmonk",          "html": "http://unsplash.com/@ugmonk",          "photos": "https://api.unsplash.com/users/ugmonk/photos",          "likes": "https://api.unsplash.com/users/ugmonk/likes"        }      },      "current_user_collections": [],      "urls": {        "raw": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f",        "full": "https://hd.unsplash.com/photo-1416339306562-f3d12fefd36f",        "regular": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5q=80fm=jpgcrop=entropycs=tinysrgbw=1080fit=maxs=92f3e02f63678acc8416d044e189f515",        "small": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5q=80fm=jpgcrop=entropycs=tinysrgbw=400fit=maxs=263af33585f9d32af39d165b000845eb",        "thumb": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5q=80fm=jpgcrop=entropycs=tinysrgbw=200fit=maxs=8aae34cf35df31a592f0bef16e6342ef"      },      "links": {        "self": "https://api.unsplash.com/photos/eOLpJytrbsQ",        "html": "http://unsplash.com/photos/eOLpJytrbsQ",        "download": "http://unsplash.com/photos/eOLpJytrbsQ/download"      }    },    // more photos ...  ]}

Entonces, para ofrecer una experiencia de búsqueda dentro de una aplicación como Notion, tendrías un pequeño formulario de búsqueda y cuando los usuarios envíen esa consulta de búsqueda, accederías a la API con el valor que ingresaron y luego recorrerías response.resultsel uso response.results.urls.thumbpara mostrar las imágenes devueltas. . . Si el usuario elige una, puede usar una URL de mayor resolución para hacer algo y tener acceso a todos los metadatos de las fotos.

¡Buen dato! Las URL de las fotos son dinámicas en el sentido de que puedes cambiar su tamaño, recortarlas, servirlas en diferentes formatos e incluso cambiar la calidad de compresión, todo desde los parámetros de la URL. Por ejemplo, cambiar de tamaño es como w=200.

Eso es exactamente lo que hacemos en CodePen

El propósito de CodePen Pen Editor es proporcionar un editor de código en línea que hace tremendamente fácil codificar algo para la web, guardarlo y compartirlo. Las imágenes son una gran parte de la web, por lo que es muy posible que desees utilizar una imagen hermosa en un Pen. Contamos con Asset Hosting en CodePen como función PRO, ¡pero también ofrecemos imágenes Unsplash a todos de forma gratuita!

Echa un vistazo a cómo funciona:

Un ejemplo básico en React

• Hagamos una búsqueda form, cuando se envíe, llega a la API Unsplash y devuelve un montón de fotos.
• Usaremos Superagent para Ajax solo para hacer un poco más fácil.
• Realizaremos un seguimiento de la consulta de búsqueda actual y de los datos devueltos en estado.

¡Aquí está funcionando!

¿Cómo podrías usar eso en tu propia aplicación?

• ¿Su aplicación permite a los usuarios crear algo? Si es así, ¿podrían mejorarse esas cosas con excelentes fotografías? Por ejemplo, imágenes de portada, imágenes de fondo, imágenes para publicaciones de blog, etc. Consulte a los socios existentes para obtener más ideas.
• ¿Podría ser esto parte de una experiencia de elección de avatar?
• Tal vez podrías crear un complemento que mejore alguna aplicación existente al permitir un acceso más rápido a las fotos.

No dudes en dejar comentarios con más ideas o sobre cómo se ha utilizado la API. Y si no lo has hecho, pruébalo.