Schöne Bilder mit der Unsplash API hinzufügen

Vielleicht kennen Sie Unsplash? Ich wette, es ist die beliebteste Stockfoto-Website überhaupt aus zwei wichtigen Gründen

1. Jedes Foto dort ist ziemlich verdammt gut
2. Jedes Foto ist völlig kostenlos, auch für kommerzielle Zwecke. Sie müssen weder um Erlaubnis bitten noch es kennzeichnen (obwohl das geschätzt wird).

Hier ist jedoch etwas, das Sie vielleicht nicht wissen: Unsplash hat eine API, und sie ist unbegrenzt und kostenlos. Kurz gesagt: Es ist genau das, was Sie sich erhoffen. Eine wirklich saubere, gut dokumentierte, leistungsstarke JSON-API, die Ihnen URLs zu Fotos mit Metadaten liefert.

Wofür würden Sie die Unsplash API verwenden?

Es gibt viele Beispiele im Entwicklerbereich von Unsplash, von Medium über Squarespace bis hin zu Trello, aber hier ist ein weiteres meiner Favoriten!

Ich benutze Notion jeden Tag. Es ist eine großartige App für Notizen, Planung und alle möglichen Dinge. Eine der Funktionen, die es bietet, ist die Zuweisung eines benutzerdefinierten Bildheaders zu jedem Dokument, das Sie darin erstellen. Diese verleihen den Dokumenten eine großartige Persönlichkeit. Notion bietet eine Handvoll zur Auswahl oder Sie können eigene hochladen. Oder Sie suchen bei Unsplash danach!

Wie funktioniert das? Lassen Sie es mich Ihnen zuerst zeigen

Sie verwenden die Unsplash API dafür und hier ist ein Artikel darüber. Es gibt einen Suchendpunkt als Teil der API, der dies ziemlich einfach macht.

Zum Beispiel würden Sie eine URL wie diese aufrufen

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

Und Sie erhalten JSON zurück wie

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

Um also eine Sucherfahrung in einer App wie Notion anzubieten, hätten Sie ein kleines Suchformular und wenn Benutzer diese Suchanfrage absenden, rufen Sie die API mit dem eingegebenen Wert auf, durchlaufen dann response.results und verwenden response.results.urls.thumb, um die zurückgegebenen Bilder anzuzeigen. Wenn der Benutzer eines auswählt, können Sie eine höher aufgelöste URL für etwas verwenden und haben Zugriff auf alle Metadaten des Fotos.

Heißer Tipp! Die URLs zu Fotos sind dynamisch, da Sie sie verkleinern, zuschneiden, in verschiedenen Formaten bereitstellen und sogar die Komprimierungsqualität über URL-Parameter ändern können. Beispielsweise ist die Größenänderung so etwas wie &w=200.

Das ist genau das, was wir auf CodePen tun

Der Zweck des CodePen Pen Editors ist es, einen Online-Code-Editor bereitzustellen, der es enorm einfach macht, etwas für das Web zu codieren, es zu speichern und zu teilen. Bilder sind ein großer Teil des Webs, daher ist es sehr gut möglich, dass Sie ein wunderschönes Bild in einem Pen verwenden möchten. Wir bieten selbst Asset Hosting auf CodePen als PRO-Funktion an, aber wir bieten Unsplash-Bilder auch allen kostenlos an!

Schauen Sie sich an, wie es funktioniert

Ein einfaches Beispiel in React

• Lassen Sie uns ein Such-<form> erstellen, das bei Absendung die Unsplash API aufruft und eine Reihe von Fotos zurückgibt.
• Wir verwenden Superagent für das Ajax, um es nur ein kleines bisschen einfacher zu machen.
• Wir verfolgen die aktuelle Suchanfrage und die zurückgegebenen Daten im State.

Hier funktioniert das!

Wie könnten Sie das in Ihrer eigenen App verwenden?

• Ermöglicht Ihre App den Benutzern, etwas zu *erstellen*? Wenn ja, könnten diese Dinge durch großartige Fotos aufgewertet werden? Zum Beispiel Titelbilder, Hintergrundbilder, Bilder für Blogbeiträge usw. Schauen Sie sich bestehende Partner für weitere Ideen an.
• Könnte dies Teil eines Avatar-Auswahlerlebnisses sein?
• Vielleicht könnten Sie ein Plugin erstellen, das eine bestehende App verbessert, indem es einen schnelleren Zugriff auf Fotos ermöglicht.

Hinterlassen Sie gerne Kommentare mit weiteren Ideen oder wie Sie die API verwendet haben. Und wenn Sie es noch nicht getan haben, probieren Sie es aus.