Fünf interessante Weise zu nutzen Verstand.io-für-Bild-Kunst Richtung

0
41

Als wir sahen, Chris legte eine Liste von in der cloud gehosteten Daten speichert, konnten wir nicht widerstehen, ihn wissen lassen, dass wir musste auch einer von denen, die unsrige ist ein vollwertiges CMS, das mit einem reichhaltigen Abfrage-Sprache und ein open-source, Echtzeit, kollaboratives authoring-tool, können Sie individuell auf Ihre spezifischen Bedürfnisse Reagieren. Es nennt sich Vernunft.io.

“Fügen Sie uns Ihrer Liste!” fragten wir Chris. “Nein, dein Zeug ist interessant, kannst du nicht über Sie schreiben,” antwortete er. “Vielleicht etwas, das nützlich sein würde für Menschen, die mit Bildern arbeiten.” Herausforderung angenommen!

Systeme wie die Vernunft will, frei, Ihre Inhalte von einer bestimmten Seite kommt es zu sitzen, so dass Sie fließen kann es durch APIs. So können Sie die Wiederverwendung von sorgfältig gestaltete Inhalte überall Sie es brauchen.

Also, was bedeutet das für Bilder?

Bilder sind die ungeraden aus. Wir können erfassen, Dokumentation der Artikel, die Preisgestaltung oder Projekt-portfolios als potenziell Komplex, aber letztlich erfassbare Daten-Strukturen, der Maschinen Abfragen und verarbeiten, die in vielen nützliche Möglichkeiten. Aber Bilder? Sie sind wirklich nur Taschen der Pixel sitzt am Ende eines CDN, nicht wahr?

Wir kamen mit einigen Ideen, weil sowieso jeder braucht Bilder und Bilder werden nur als bereit zu Reisen, um neue und aufregende Orte und Dienstleistungen wie der rest Ihrer strukturierten Sachen.

So, hier sind wir eine mittelgroße Tasche von Bild-tricks, die Sie abziehen können mit dem Verstand.

1. Schnappen Sie sich die palette von Bild-Metadaten

Mal versucht, text-overlay über ein zufälliges Bild von einem Benutzer übermittelt? Wie hat das funktioniert? Wir haben in der Regel beendet, indem wir unsere Bilder zu filtern, bis Sie sind vorhersehbar und skulked Startseite mit stimmungsvoller Ausdruck.

Wir dachten, es wäre schön, zu Schiff ein Bild der palette, mit der Sie Ihre Bilder, so können Sie wählen zwischen dunklen und hellen Typografie als auch als paar visuelle Elemente mit Bild Farbe. Dies macht die Lesbarkeit so viel besser und verhindert Zusammenstöße zwischen die Farben von Bildern und text.

Finden Sie die Pen-Access-Bild-Farben werden als Metadaten in die Vernunft von Knut Melvær (@kmelve) auf CodePen.

2. Erhalten low-Qualität Bild-Platzhalter

Aber schnell und in der Nähe Ihres CDN ist, braucht es noch viel Zeit zu übertragen großer Bilddateien. So, wir haben eine Low-Quality Bild-Platzhalter (LQIP) mit Ihren Bild-Metadaten. Es ist ein base64-kodierten string, der Ihr Foto auf 20px Breite. Immer LQIP bei der ersten Anfrage können Sie Backen einen proxy-image direkt in den HTML-Code.

<Abbildung
Stil={{
backgroundImage: `url(${mainImage.die Metadaten.lqip})`,
paddingTop: `calc(100% / ${mainImage.die Metadaten.Abmessungen.aspectRatio})`
}}
>
<img src={`${mainImage.url}`} />
</figure>

Eine Herausforderung, mit Bild-Platzhalter ist in der Lage, vorherzusagen, die Abmessungen des Bildes in einem fluid-layout. In diesem Beispiel, haben wir das Seitenverhältnis, kommt auch in der Metadaten-Objekt zur Berechnung der padding-top trick. Das bedeutet, dass Sie don ‘ T berechnen das Seitenverhältnis selbst, und z.B. die Ausgabe als eine benutzerdefinierte Eigenschaft in Kombination mit CSS-Variablen.

Finden Sie die Stift-Get Low Quality Bild-Platzhalter aus der box von Knut Melvær (@kmelve) auf CodePen.

3. Verwenden Sie on-demand-Bild verwandelt

Sie sollten in der Lage sein zu speichern, Archivierung Originale und bekommen das Bild in welcher Auflösung und format, das Sie brauchen. Go ahead, laden Sie Ihre 268-megapixel-TIFF, und Sie bitten, für ein 128×128 beschnitten JPEG mit 50% Unschärfe.

Die Transformationen, generiert aus den URL-Parametern und generiert auf der ersten Anfrage. Wir-cache das Ergebnis lokal und auf einem CDN so viele Anfragen für das gleiche Ergebnis-Bild wird super bissig.

Nehmen Sie dieses Bild des Carina-Nebels. Wir hochgeladen ein 29.566 x 12.960 version. Sagen wir, wir wollten eine PNG-version mit einem 500 Pixel Breite. Befestigen ?w=500&fm=png zum Bild URL, und da ist es:

Quell-Datei

Es ist nicht nur schwer zu hören, schreiend im Raum, ist es auch schwer zu beurteilen Richtungen. Aber lassen Sie uns sagen, Sie brauchen, um das Bild zu drehen. Gut, Sie können fügen Sie &oder=90 und es ist um 90 Grad (und verkleinere es auf 128px):

Quell-Datei

Nicht sträuben, keine Federn bei der NASA, aber wenn Sie wollen, um zu simulieren, ist die sphärische aberration, die auf Ihrem neuen 1,5 Mrd USD-Teleskop, können Sie tun, indem Sie hinzufügen ?blur=30, um die Bild-url!

Quell-Datei

Die image-pipeline ist gut für deine SVGs als gut. Sagen Sie, Sie brauchen, um zu bieten eine JPG-Open Graph (og:image) , oder Sie haben eine dringende Notwendigkeit, um dieses SVG von einem Gabelstapler als Slack emoji:

Quell-Datei

Holen Sie sich die 128×128 PNG-version, die Sie brauchen, indem der URL-Parameter w=128&h=128&fm=png, genau wie diese.

Sie haben auch die Kontrolle der Hintergrundfarbe, mit bg=<hexcolor> sagen wir, aus irgendeinem Grund wollte dieser Gabelstapler auf einem schönen lila hintergrund.

Und schließlich, wenn Sie wollen, um einen link zu dieser Bild-und trigger-download für die Benutzer, können Sie append dl=<vorgeschlagene Datei-name>, um Sie geschehen.

Das Bild herunterladen

Es ist nicht immer so lustig, wie diese zu Durcheinander herum mit URL-Parameter, also machten wir eine JavaScript-Bibliothek, die macht es ein bisschen leichter. Installieren Sie es mit npm install –save @sanity/Bild-url und lernen, wie es zu benutzen (wir benutzen es in den demos in diesem post).

4. Zuschneiden und skalieren, um zu passen um einen Punkt konzentrieren

Diese lästigen Bilder mit Ihren festen Seitenverhältnissen. Neben nicht zu wissen, die Pixeldichte des Ausgabegeräts, die Sie oft nicht einmal wissen, welches Getreide am besten geeignet wäre für das layout. Sogar auf einer einzigen website, die Sie Häufig verwenden das gleiche Bild in unterschiedlichen layouts, und oft brauchen, um Ihnen zu dienen bis zu Dritten, wie ,, die erwartet, dass bestimmte Seitenverhältnisse.

Benutzerschnitt-und hotspot-in Sanity-Studio

Um die Schmerzen zu lindern, damit umzugehen, lassen wir haben content-Redakteure eingestellt hotspots und Pflanzen für die Bilder. Wir haben auch ein JavaScript-Paket, das bedeutet all die harte Arbeit die richtige Bild-Transformation-URLs für Sie. Pass einfach auf ein Bild-asset und die Größe, die Sie möchten, und wir werden herausfinden, das zuschneiden und skalieren.

Finden Sie den Stift Benutzerdefinierte Ernte und hotspots von Knut Melvær (@kmelve) auf CodePen.

5. Machen Sie eine Echtzeit-photomap

Wenn nicht, drehen Sie ihn bis zu 11, es ist zumindest ein guter 10.5.

Wir können extrahieren von EXIF-und geo-location-Daten aus einem Bild. EXIF-Daten enthält Informationen über die Kamera-Zustand, wenn das Foto aufgenommen wurde (z.B. Belichtung, Blende, Objektiv, wenn die flash-ging etc). Aufgrund von Bedenken hinsichtlich der Privatsphäre (wir nehmen GDPR-compliance-super ernst), wir drehten das feature standardmäßig deaktiviert, aber wenn Sie [Optionen: { Metadaten: [‘exif’, ‘location’ ] } in Ihre schema-Optionen, die Sie enthalten.

Wir haben eine kleine demo, mit der Sie ein Bild hochladen und, wenn es location-Daten (z.B. in der Regel diejenigen, die Sie mit Ihrem Handy), wird es automatisch pop-up in der Karte — da die API in Echtzeit mit den Zuhörern!

Finden Sie den Stift Gemeinsamen Echtzeit-Foto-Karte durch Knut Melvær (@kmelve) auf CodePen.

Wenn Sie testen wollen, aus der Vernunft und diese Funktionen sich selbst, können Sie mit dem schreiben loslegen npm i-g @sanity/cli && Vernunft init. Obwohl die CLI führt Sie durch den Installationsprozess, es lohnt sich, die Dokumentation (wenn nicht für die Illustrationen allein) und es gibt immer Leute, die helfen wollen, mit der nitty gritty in unserer Lockeren Gruppe.