Ajoutez de belles images avec l’API Unsplash

Online Coding Courses for Kids

Vous savez peut-être Unsplash? Je parie que c’est le site de photographie le plus populaire pour deux grandes raisons:

  1. Chaque photo là-bas est sacrément sympa
  2. Chaque photo est entièrement gratuite, même pour un usage commercial. Vous n’avez pas besoin de demander la permission ou même de la créditer (bien que cela soit apprécié).

Voici quelque chose que vous ne savez peut-être pas: Unsplash possède une API, et son illimité et gratuit. Clous en laiton: c’est exactement ce que vous espérez. Une API JSON vraiment propre, bien documentée et performante qui vous donne des URL vers des photos avec des métadonnées.

Pour quoi utiliseriez-vous l’API Unsplash?

Il existe de nombreux exemples sur Espace développeur de Unsplash, de Medium à Squarespace en passant par Trello, mais voici une autre de mes préférées!

j’utilise Notion tous les jours. C’est une excellente application pour la prise de notes, la planification et toutes sortes de choses. L’une des fonctionnalités qu’il offre est de donner à chaque document que vous créez dans celui-ci un en-tête d’image personnalisé. Ils confèrent aux documents une grande personnalité. Notion en a une poignée parmi laquelle vous pouvez choisir ou vous pouvez télécharger la vôtre. Ou, vous pouvez rechercher Unsplash pour eux!

Comment ça marche? Lemme vous montre d’abord:

Ils utilisent le API Unsplash le faire et voici un article à ce sujet. Il y a un point de terminaison de recherche dans le cadre de l’API qui rend cela assez facile à faire.

Par exemple, vous frapperiez une URL comme:

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

Et vous récupérerez JSON comme:

{
  "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 ...
  ]
}

Donc, pour offrir une expérience de recherche dans une application comme Notion, vous auriez un petit formulaire de recherche et lorsque les utilisateurs soumettraient cette requête de recherche, vous frapperiez l’API avec la valeur qu’ils avaient entrée, puis vous boucleriez response.results en utilisant le response.results.urls.thumb pour montrer les images retournées. Si l’utilisateur en choisit une, vous pouvez utiliser une URL de plus haute résolution pour faire quelque chose et avoir accès à toutes les métadonnées de ces photos.

Astuce! Les URL des photos sont dynamique en ce que vous pouvez les redimensionner, les recadrer, les servir dans différents formats et même changer la qualité de compression à partir des paramètres d’URL. Par exemple, changer la taille est comme &w=200.

C’est exactement ce que nous faisons sur CodePen

Le but de CodePen Pen Editor est de fournir un éditeur de code en ligne qui facilite énormément le codage de quelque chose pour le Web, son enregistrement et son partage. Les images sont une grande partie du Web, il est donc très possible que vous souhaitiez utiliser une image magnifique dans un stylo. On a Hébergement de ressources nous sur CodePen en tant que fonctionnalité PRO, mais nous offrons également des images Unsplash à tout le monde gratuitement!

Découvrez comment cela fonctionne:

Un exemple de base dans React

  • Faisons une recherche
    , une fois soumis, il atteint l’API Unsplash et renvoie un tas de photos.
  • Nous utiliserons Superagent pour l’Ajax juste pour rendre un smidge plus facile.
  • Nous suivrons la requête de recherche actuelle et les données retournées en état.

Voici ça marche!

Comment pourriez-vous utiliser cela dans votre propre application?

  • Votre application permet-elle aux utilisateurs de créer n’importe quoi? Si oui, ces choses pourraient-elles être améliorées par de superbes photos? Par exemple, des images de couverture, des images d’arrière-plan, des images pour des articles de blog, etc. partenaires existants pour plus d’idées.
  • Cela pourrait-il faire partie d’une expérience de choix d’avatar?
  • Vous pourriez peut-être créer un plugin qui améliore certaines applications existantes en permettant un accès plus rapide aux photos.

N’hésitez pas à laisser des commentaires avec plus d’idées ou comment vous avez utilisé l’API. Et si ce n’est pas le cas, Essaye le.

Close Menu