Agrega hermosas imágenes con la API Unsplash

 

 

 


Índice
  1. ¿Para qué usarías la API Unsplash?
  2. Eso es exactamente lo que hacemos en CodePen
  3. Un ejemplo básico en React
  4. ¿Cómo podrías usar eso en tu propia aplicación?

¿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": "https://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": "https://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": "https://unsplash.com/photos/eOLpJytrbsQ", "download": "https://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. Remedios Naturales Caseros Trucos Y Consejos De Salud

 

¡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.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Agrega hermosas imágenes con la API Unsplash

Agrega hermosas imágenes con la API Unsplash

¿Para qué usarías la API Unsplash?Eso es exactamente lo que hacemos en CodePenUn ejemplo básico en React¿Cómo podrías usar eso en tu propia aplicación?

programar

es

https://pseint.es/static/images/programar-agrega-hermosas-imagenes-con-la-api-unsplash-1351-0.jpg

2024-06-13

 

Agrega hermosas imágenes con la API Unsplash
Agrega hermosas imágenes con la API Unsplash

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences