Als wir Chris eine Liste von Cloud-basierten Datenspeichern veröffentlichen sahen, konnten wir nicht anders, als ihn wissen zu lassen, dass wir auch so etwas haben, nur dass unser System ein voll ausgestattetes CMS ist, das mit einer reichhaltigen Abfragesprache und einem Open-Source-Werkzeug für die Echtzeit-kollaborative Erstellung von Inhalten kommt, das Sie mit React an Ihre spezifischen Bedürfnisse anpassen können. Es heißt Sanity.io.
„Füge uns zu deiner Liste hinzu!“, baten wir Chris. „Nein, eure Sachen sind interessant, kannst du nicht *du* über *dich* schreiben“, antwortete er. „Vielleicht etwas Nützliches für Leute, die mit Bildern arbeiten.“ Herausforderung angenommen!
Systeme wie Sanity wollen Ihre Inhalte von der spezifischen Seite befreien, auf der sie sich gerade befinden, damit Sie sie über APIs fließen lassen können. So können Sie Ihre mühsam erstellten Inhalte überall wiederverwenden, wo Sie sie benötigen.
Was bedeutet das also für Bilder?
Bilder sind die Ausreißer. Wir können Dokumentationsartikel, Preispläne oder Projektportfolios als potenziell komplexe, aber letztendlich greifbare Datenstrukturen erfassen, die Maschinen abfragen und auf viele nützliche Arten verarbeiten können. Aber Bilder? Sie sind im Grunde nur Haufen von Pixeln am Ende eines CDN, oder?
Wir haben uns trotzdem ein paar Ideen ausgedacht, denn jeder braucht Bilder, und Bilder sollten genauso bereit sein, an neue und aufregende Orte und Dienste zu reisen wie der Rest Ihrer strukturierten Inhalte.
Hier sind also einige mittelschwere Bild-Tricks, die Sie mit Sanity umsetzen können.
1. Farbe aus Bildmetadaten extrahieren
Haben Sie jemals versucht, Text über ein zufälliges Bild zu legen, das von einem Benutzer hochgeladen wurde? Wie ist das gelaufen? Wir haben unsere Bilder normalerweise Filtern unterzogen, bis sie vorhersehbar waren, und sind dann mit einem düsteren Ausdruck nach Hause geschlichen.
Wir dachten, es wäre schön, Ihren Bildern eine Farbpalette beizufügen, damit Sie zwischen dunkler und heller Typografie wählen und visuelle Elemente mit der Bildfarbe kombinieren können. Das verbessert die Lesbarkeit erheblich und verhindert Farbkonflikte zwischen Bildern und Text.
Siehe das Pen Bildfarben als Metadaten in Sanity abrufen von Knut Melvær (@kmelve) auf CodePen.
2. Niedrigauflösende Bild-Platzhalter erhalten
So schnell und nah Ihr CDN auch sein mag, die Übertragung großer Bilddateien dauert immer noch Zeit. Deshalb haben wir einen *Low-Quality Image Placeholder* (LQIP) in Ihre Bildmetadaten aufgenommen. Es handelt sich um einen base64-codierten String Ihres Fotos mit einer Breite von 20 Pixeln. Wenn Sie LQIP bei der ersten Anfrage erhalten, können Sie ein Proxy-Bild direkt in das HTML einbetten.
<figure
style={{
backgroundImage: `url(${mainImage.metadata.lqip})`,
paddingTop: `calc(100% / ${mainImage.metadata.dimensions.aspectRatio})`
}}
>
<img src={`${mainImage.url}`} />
</figure>Eine Herausforderung bei Bild-Platzhaltern ist die Vorhersage der Abmessungen des Bildes in einem flüssigen Layout. In diesem Beispiel haben wir das Seitenverhältnis, das ebenfalls im Metadatenobjekt enthalten ist, verwendet, um den Padding-Top-Trick zu berechnen. Das bedeutet, dass Sie das Seitenverhältnis nicht selbst berechnen müssen und es z. B. als benutzerdefinierte Eigenschaft in Kombination mit CSS-Variablen ausgeben.
Siehe das Pen Niedrigauflösende Bild-Platzhalter „out of the box“ von Knut Melvær (@kmelve) auf CodePen.
3. Bildtransformationen bei Bedarf nutzen
Sie sollten in der Lage sein, Archiv-Originale zu speichern und das Bild in jeder benötigten Auflösung und jedem benötigten Format zu erhalten. Laden Sie Ihr 268-Megapixel-TIFF hoch und fordern Sie ein 128×128 zugeschnittenes JPEG mit 50 % Unschärfe an.
Die Transformationen werden aus URL-Parametern generiert und bei der ersten Anfrage erzeugt. Wir cachen das Ergebnis lokal und auf einem CDN, sodass viele Anfragen für dasselbe Ergebnisbild extrem schnell sind.
Nehmen Sie dieses Bild des Carina-Nebels. Wir haben eine Version davon mit 29.566 x 12.960 hochgeladen. Sagen wir, wir möchten eine PNG-Version mit einer Breite von 500 Pixeln. Hängen Sie `?w=500&fm=png` an die Bild-URL, und da ist sie.
Es ist nicht nur schwer, im Weltraum zu schreien, es ist auch schwer, Richtungen zu beurteilen. Aber sagen wir, Sie müssen das Bild drehen. Nun, Sie können `&or=90` anhängen und es ist um 90 Grad gedreht (und auf 128 Pixel skaliert).
Um NASA-Federn nicht aufzuregen, aber wenn Sie eine sphärische Aberration auf Ihrem neuen 1,5-Milliarden-Dollar-Teleskop simulieren wollen, können Sie dies tun, indem Sie `?blur=30` zur Bild-URL hinzufügen!
Die Bild-Pipeline ist auch für Ihre SVGs gut geeignet. Sagen wir, Sie müssen ein JPG Open Graph (og:image) für Facebook anbieten oder Sie haben ein dringendes Bedürfnis, dieses SVG eines Gabelstaplers als Slack-Emoji hinzuzufügen.
Holen Sie sich die benötigte 128×128 PNG-Version, indem Sie die URL-Parameter `w=128&h=128&fm=png` einfach so anhängen.
Sie haben auch die Kontrolle über die Hintergrundfarbe mit `bg=<hexcolor>`. Nehmen wir an, wir wollten aus irgendeinem Grund diesen Gabelstapler auf einem schönen lila Hintergrund.
Und schließlich, wenn Sie auf dieses Bild verlinken und einen Download für den Benutzer auslösen möchten, können Sie `dl=<suggested file-name>` anhängen, um dies zu erreichen.
Es ist nicht immer so lustig wie hier, mit URL-Parametern herumzuspielen, also haben wir eine JavaScript-Bibliothek erstellt, die es ein wenig einfacher macht. Installieren Sie sie mit `npm install --save @sanity/image-url` und erfahren Sie, wie Sie sie verwenden (wir verwenden sie in den Demos während dieses Beitrags).
4. Zuschneiden und Skalieren um einen Fokuspunkt herum
Diese lästigen Bilder mit ihren festen Seitenverhältnissen. Neben der Unkenntnis der Pixeldichte des Ausgabegeräts wissen Sie oft nicht einmal, welcher Zuschnitt für das Layout am besten geeignet wäre. Selbst auf einer einzigen Website verwenden Sie dasselbe Bild oft in verschiedenen Layouts und müssen es an Dritte wie Facebook liefern, die spezifische Seitenverhältnisse erwarten.
Um den Aufwand damit zu verringern, haben wir es den Content-Redakteuren ermöglicht, Hotspots und Zuschnitte für Bilder festzulegen. Wir haben auch ein JavaScript-Paket entwickelt, das die ganze harte Arbeit leistet, die richtigen Bildtransformations-URLs für Sie zu erstellen. Übergeben Sie einfach ein Bild-Asset und die gewünschte Größe, und wir kümmern uns um Zuschnitt und Skalierung.
Siehe das Pen Benutzerdefinierter Zuschnitt und Hotspots von Knut Melvær (@kmelve) auf CodePen.
5. Eine Echtzeit-Foto-Karte erstellen
Wenn dies nicht die Lautstärke auf 11 dreht, ist es zumindest eine gute 10,5.
Wir können EXIF- und Geolocation-Daten aus einem Bild extrahieren. EXIF-Daten enthalten Informationen über den Kamerastand bei der Aufnahme des Fotos (z. B. Belichtung, Blende, Objektiv, ob der Blitz ausgelöst wurde usw.). Aufgrund von Datenschutzbedenken (wir nehmen DSGVO-Konformität sehr ernst) haben wir die Funktion standardmäßig deaktiviert. Wenn Sie jedoch `[options: { metadata: ['exif', 'location' ] }` in Ihren Schemaoptionen einstellen, werden diese enthalten sein.
Wir haben eine kleine Demo erstellt, mit der Sie ein Bild hochladen können. Wenn es Standortdaten enthält (z. B. typischerweise die, die Sie mit Ihrem Handy aufnehmen), wird es automatisch auf der Karte angezeigt – da die API in Echtzeit mit Listenern arbeitet!
Siehe das Pen Gemeinsame Echtzeit-Foto-Karte von Knut Melvær (@kmelve) auf CodePen.
Wenn Sie Sanity und diese Funktionen selbst ausprobieren möchten, können Sie mit `npm i -g @sanity/cli && sanity init` loslegen. Auch wenn die CLI Sie durch den Installationsprozess führt, lohnt es sich, die Dokumentation (wenn auch nur wegen der Illustrationen) zu lesen, und es gibt immer Leute, die Ihnen bei den Details in unserer Slack-Gruppe helfen wollen.