Fem intressanta sätt att använda Förnuft.io för bild-och art direction

0
32

När vi såg Chris sätta upp en lista över molnet är värd för data-butiker, vi kunde inte motstå att låta honom veta att vi också hade en av dem, bara vi har en fullt utrustad CMS som kommer med en rik query language och en öppen källkod, i realtid, samverkande författarverktyg som du kan anpassa efter dina specifika behov med hjälp Reagera. Det kallas Förnuft.io.

“Lägg till oss till din lista!” vi frågade Chris. “Nej, dina saker är intressanta, kan inte du skriva om dig”, svarade han. “Kanske något som skulle vara användbar för personer som arbetar med bilder.” Utmaning accepterad!

System som Sanity vill frigöra innehållet från den specifika sidan händer det att sitta på, så att du kan strömma det via Api: er. På så sätt kan du återanvända ditt omsorgsfullt tillverkade innehåll var som helst du behöver det.

Så, vad betyder det här för bilder?

Bilderna är udda ut. Vi kan fånga dokumentation artiklar, prissättning planer eller projekt portföljer som potentiellt komplexa, men i slutändan graspable data-strukturer som maskiner kan fråga och process i många användbara sätt. Men bilder? De är egentligen bara påsar av pixlar som sitter vid slutet av ett CDN, är de inte?

Vi kom upp med lite idéer i alla fall, eftersom alla behöver bilder och bilderna ska vara lika villiga att resa till nya och spännande platser och tjänster som resten av din strukturerad grejer.

Så, här är vi med en medium-sized bag av bilden tricks om du kan dra ut med Förnuft.

1. Ta paletten från bildens metadata

Någonsin försökt att överlagra text över en random bild som lämnas in av en användare? Hur gjorde att träna? Vi har oftast upphört lämna våra bilder till filter tills de är förutsägbara och skulked hem med en lynnig uttryck.

Vi trodde att det skulle vara trevligt att skicka en bild palett med dina bilder så att du kan välja mellan ljus och mörker typografi samt par visuella element med bild färg. Detta gör att läsbarheten så mycket bättre och förhindrar sammandrabbningar mellan färgerna i bilder och text.

Se Pennan Tillgång bildens färger som metadata i Sanity av Knut Melvær (@kmelve) på CodePen.

2. Få låg kvalitet på bilden platshållare

Men snabbt och i närheten av din CDN är, det tar fortfarande tid att skicka stora bildfiler. Så, har vi inkluderat en Låg Kvalitet på Bilden Platshållare (LQIP) med din image metadata. Det är en base64-kodad sträng av ditt foto på 20 px bredd. Få LQIP i den första begäran kan du baka en proxy bild direkt i HTML-koden.

<figur
style={{
backgroundImage: `url(${mainImage.metadata.lqip})`,
paddingTop: `calc(100% / ${mainImage.metadata.dimensioner.aspectRatio})`
}}
>
<img src={`${mainImage.url}`} />
</bild>

En utmaning med bild platsmarkörer är att kunna förutsäga dimensioner av bilden i en flytande layout. I detta exempel har vi använt det bildförhållande som också kommer i metadata för objekt för att beräkna padding-top trick. Det innebär att du inte behöver beräkna proportionerna dig själv, och t.ex produktionen det som en egen fastighet i kombination med CSS variabler.

Se Pennan Får Låg Kvalitet Bild som Platshållare ur lådan av Knut Melvær (@kmelve) på CodePen.

3. Använda on-demand bild förvandlar

Du bör kunna lagra arkivens original och få den bild i vilken upplösning och format du behöver. Gå vidare, ladda upp din 268 megapixel TIFF, och be om en 128×128 beskurna JPEG med en 50% oskärpa.

Den förvandlar genereras från URL-parametrar och genereras på den första ansökan. Vi cache resultatet lokalt och på ett CDN så många förfrågningar om samma resultat bilden kommer att vara super lysande.

Ta denna bild av Carinanebulosan. Vi har lagt upp en 29.566 x 12.960 version av den. Låt oss säga att vi ville ha en PNG-version med en 500px bredd. Bifoga ?w=500&fm=png till bildens URL, och så är det:

Källa Fil

Inte bara är det svårt att höra en skrika i rymden, det är också svårt att bedöma riktningar. Men låt oss säga att du behöver för att rotera bilden. Tja, kan du lägga till &or=90 och det är vinklad 90 grader och skala ner det till 128px):

Källa Fil

Inte för att rufsa några fjädrar på NASA, men om du vill simulera sfärisk aberration på din nya 1,5 mdr USD teleskop, kan du göra det genom att lägga till ?oskärpa=30 till bild-url: en!

Källa Fil

Bilden pipeline är bra för din SVGs. Säg att du behöver för att erbjuda en JPG-Open Graph (og:image) eller om du har ett akut behov av att lägga till denna SVG av en gaffeltruck som en Slack emoji:

Källa Fil

Få 128×128 PNG-version som du behöver, genom att lägga till URL-parametrar w=128&h=128&fm=png precis som denna.

Du har också kontroll av bakgrundsfärg, med bg=<hexcolor> Låt oss säga att vi, av någon anledning, ville detta gaffeltruck på en härlig lila bakgrund.

Och, slutligen, om du vill länka till den här bilden och sätta igång en nedladdning för användare, kan du lägga till dl=<föreslog fil-namn> för att få det att hända.

Ladda ner Bild

Det är inte alltid så kul som det här med att röra runt med URL-parametrar, så vi gjorde ett JavaScript-bibliotek som gör det lite lättare. Installera det med npm install –spara @sanity/bild-url och lära sig att använda det (vi använder det i demos hela detta inlägg).

4. Beskära och skala för att passa runt i fokus

De där irriterande bilder med sina fasta proportioner. Förutom att inte veta pixel täthet av produktionen enhet, behöver du ofta inte ens vet vad gröda som skulle vara bäst lämpade för layout. Även på en enda webbplats, kommer du ofta använder samma bild i olika layouter, och ofta behöver för att tjäna dem upp till tredje part, som , som förväntar specifika proportioner.

Anpassade grödor och hotspot i Sanity Studio

För att lindra smärtan av att hantera detta har vi låta redaktörer satt hotspots och grödor för bilder. Vi har också gjort en JavaScript-paket som gör allt det hårda arbete för att göra den korrekta bilden omvandla Webbadresser för dig. Skicka helt enkelt en bild tillgång och storlek du vill ha och vi kommer att räkna ut beskära och skala.

Se Pennan Anpassade grödor och hotspots av Knut Melvær (@kmelve) på CodePen.

5. Göra en verklig-tid photomap

Om detta inte vänder den upp till 11, det är åtminstone en bra 10.5.

Vi kan extrahera EXIF-och geo-location data från en bild. EXIF-data innehåller information om kameran när bilden togs (t ex exponering, bländare, objektiv, om blixten gick av osv.). På grund av integritetsfrågor (vi tar GDPR efterlevnad super allvar) vi har fyllt den funktionen som standard, men om du ställer in [alternativ: { metadata: [‘exif -‘, ‘plats’ ] } i ditt schema alternativ, kommer de att ingå.

Vi har gjort en liten demo som låter dig ladda upp en bild och, om man har plats data (t ex typisk för dem som du tar med telefonen), kommer den automatiskt att dyka upp på kartan — eftersom API är i realtid med lyssnare!

Se Pennan Delade Realtime Foto Karta av Knut Melvær (@kmelve) på CodePen.

Om du vill testa Förnuft och dessa funktioner själv, kan du komma igång med att skriva npm i-g @sanity/cli && sanity init. Även om CLI guidar dig genom installationsprocessen, är det värt att kolla in dokumentationen (om inte för illustrationer ensam) och det finns alltid människor som vill hjälpa till med nitty gritty i vår Slack grupp.