¿Quizás conoces a Unsplash? Apuesto a que es el sitio de fotografía de archivo más popular que existe por dos grandes razones:
- Cada foto es bastante bonita
- Cada foto es totalmente gratuita, incluso para uso comercial. No tiene que pedir permiso o incluso acreditarlo (aunque se agradece).
Sin embargo, hay algo que quizás no sepa: Unsplash tiene una API y es ilimitado y gratis. Tachuelas de bronce: es exactamente lo que esperas que sea. Una API JSON realmente limpia, bien documentada y de buen rendimiento que le brinda URL a 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í hay otro de mis favoritos!
Uso 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 dentro de él un encabezado de imagen personalizado. Estos dan a los documentos una gran personalidad. Notion tiene un puñado de entre los que puede elegir o puede cargar el suyo. ¡O puedes buscarlos en Unsplash!
¿Cómo funciona? Déjame mostrarte primero:
Usan 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, llegaría a una URL como:
https://api.unsplash.com/search/photos?page=1&query=SEARCH_QUERYY obtendrá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.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=7cfe3b93750cb0c93e2f7caec08b5a41",
"medium": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=5a9dc749c43ce5bd60870b129a40902f",
"large": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=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.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=92f3e02f63678acc8416d044e189f515",
"small": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=263af33585f9d32af39d165b000845eb",
"thumb": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=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, presionarás la API con el valor que ingresaron, luego recorrerás response.results utilizando el response.results.urls.thumb para 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, ya que puede cambiar su tamaño, recortarlas, publicarlas en diferentes formatos e incluso cambiar la calidad de compresión, todo desde los parámetros de la URL. Por ejemplo, cambiar el 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 que sea 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 desee utilizar una imagen hermosa en un lápiz. Tenemos Asset Hosting en CodePen como una función PRO, ¡pero también ofrecemos imágenes de Unsplash para todos de forma gratuita!
Échale un vistazo a cómo funciona:
Un ejemplo básico en React
- Hagamos una búsqueda
<form>, cuando se envía, accede a la API Unsplash y devuelve un montón de fotos. - Usaremos Superagent para el Ajax solo para hacer una pizca más fácil.
- Realizaremos un seguimiento de la consulta de búsqueda actual y los datos devueltos en estado.
¡Aquí está el trabajo!
¿Cómo podrías usar eso en tu propia aplicación?
- ¿Tu aplicación permite a los usuarios crear algo? Si es así, ¿podrían mejorarse esas cosas con fotos geniales? Por ejemplo, imágenes de portada, imágenes de fondo, imágenes para publicaciones de blogs, 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ía crear un complemento que mejore alguna aplicación existente al permitir un acceso más rápido a las fotos.
No dude en dejar comentarios con más ideas o cómo ha utilizado la API. Y si no lo ha hecho, pruébelo.