Fem interessante måter å bruke sunn Fornuft.io for bilde-art direction

0
43

Når vi så Chris sette opp en liste av cloud-hosted data-butikker, vi kunne ikke motstå å la ham vite at vi hadde også en av de som bare vår er en fullverdig CMS som kommer med en rik spørring språk og en åpen kildekode, sanntid, samarbeidende authoring verktøy som du kan skreddersy til dine spesifikke behov ved hjelp Reagere. Det kalles sunn Fornuft.io.

“Legg oss til i din liste!” vi spurte Chris. “Nei, ting er interessant, kan ikke du skrive om deg,” svarte han. “Kanskje noe som ville være nyttig for folk som arbeider med bilder.” Utfordringen akseptert!

Systemer som Forstanden ønsker å frigjøre innholdet fra den aktuelle siden det skjer for å være å sitte på, slik at du kan strømme gjennom Api-er. På den måten kan du gjenbruke din møysommelig utformet innhold hvor som helst du trenger det.

Så, hva betyr dette for bilder?

Bildene er merkelig seg ut. Vi kan ta dokumentasjon artikler, priser planer eller prosjekt-porteføljer som potensielt komplekse, men til syvende og sist noe begripelig data-strukturer som maskiner kan spørre og prosess inn mange nyttige måter. Men bilder? De er egentlig bare poser av punkter som sitter på enden av en CDN, er de ikke?

Vi kom opp med noen ideer likevel, fordi alle trenger bilder og bilder skal være like villig til å reise til nye og spennende steder og tjenester som resten av strukturert ting.

Så, her er vi med en middels stor pose med bilde triks du kan trekke av med Fornuft.

1. Ta paletten fra bildets metadata

Har du noen gang prøvd å overlay tekst over et tilfeldig bilde sendt inn av en bruker? Hvordan ble det arbeidet ut? Vi har vanligvis avsluttet sende våre bilder til å filtre til de er forutsigbare og skulked hjem med en humørsyk uttrykk.

Vi trodde det ville være hyggelig å sende et bilde palett med bilder slik at du kan velge mellom mørke og lys typografi, så vel som par visuelle elementer med bilde farge. Dette gjør lesbarhet så mye bedre og hindrer sammenstøt mellom fargene i bilder og tekst.

Se Penn få Tilgang til bildet farger som metadata i Forstand av Knut Melvær (@kmelve) på CodePen.

2. Få lav kvalitet plassholdere for bilde

Imidlertid raskt, og i nærheten av CDN er, det tar likevel tid til å overføre store bildefiler. Så har vi tatt med en Lav-Kvalitet testbildet (LQIP) med ditt bilde metadata. Det er en base64-kodet streng av bildet ditt på 20 piksler bredde. Å få LQIP i første forespørsel kan du bake en proxy-bilde rett inn i HTML-koden.

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

En utfordring med bilde plassholdere er å være i stand til å forutsi størrelsen på bildet i en flytende layout. I dette eksemplet har vi brukt størrelsesforholdet kommer også i metadata-objekt for å beregne padding-top lure. Det betyr at du ikke trenger å beregne størrelsesforholdet deg selv, og f.eks. utgang det som en tilpasset bolig kombinert med CSS variabler.

Se Penn Få dårlig Kvalitet på Bildet Plassholdere ut av boksen av Knut Melvær (@kmelve) på CodePen.

3. Bruk on-demand-image omformer

Du bør være i stand til å lagre arkivering originaler og få bildet uansett oppløsning og format du trenger. Gå videre, laste opp din 268 megapiksler TIFF, og be om en 128×128 beskåret JPEG-med en 50% uskarphet.

Den forvandler er generert fra URL-parametre og generert på første forespørsel. Vi buffer resultatet lokalt og på en CDN så mange forespørsler til samme resultat bildet vil være super irritabel.

Ta dette bilde av carinatåken. Vi lastet opp en 29.566 x 12.960 versjon av det. La oss si at vi ønsket en PNG-versjon med en 500px bredde. Fest ?w=500&fm=png til image URL, og det er:

Kilde Filen

Ikke bare er det vanskelig å høre skriking på plass, er det også vanskelig å bedømme retninger. Men la oss si at du trenger å rotere bildet. Vel, du kan legge &or=90, og det er vippes 90 grader (og skalere det ned til 128px):

Kilde Filen

For ikke å frynse noen fjær på NASA, men hvis du ønsker å simulere sfærisk aberrasjon på ny 1,5 mrd USD teleskop, kan du gjøre det ved å legge til ?blur=30 til bilde-url-adresse!

Kilde Filen

Bildet rørledningen er bra for din SVGs som godt. Si at du trenger å tilby en JPG-Open Graph (og:image) eller du har et presserende behov for å legge til denne SVG av en gaffeltruck som en Slakk emoji:

Kilde Filen

Få 128×128 PNG-versjonen du trenger, ved å legge til URL-parametre w=128&h=128&fm=png-akkurat som dette.

Du har også kontroll av bakgrunnsfarge, med bg=<hexcolor> La oss si at vi, for noen grunn, ville dette gaffeltruck på en nydelig lilla bakgrunn.

Og, til slutt, hvis du ønsker å lenke til dette bildet og starte en nedlasting for brukeren, kan du legge dl=<foreslått fil-navn> til å gjøre det skje.

Last ned Bilde

Det er ikke alltid like morsomt som dette for å rote rundt med nettadresseparametere, så vi laget et JavaScript-bibliotek som gjør det litt enklere. Installere det med npm installere –spare @fornuft/bilde-url og lære å bruke det (vi bruker det i demonstrasjoner over hele dette innlegget).

4. Beskjære og skaler til å passe rundt et fokus punkt

De pesky bilder med sine faste proporsjoner. I tillegg til å ikke vite pikseltetthet på output-enheten, må du ofte ikke engang vet hva beskjære ville være best egnet for layout. Selv på en enkelt nettside, vil du ofte bruker de samme bildet i forskjellige utforminger, og ofte trenger for å tjene dem opp til tredjeparter, for eksempel , som forventer bestemte proporsjoner.

Tilpasset beskjære og hotspot i Forstanden Studio

For å lette smerte for å håndtere dette, vi har latt innholdet redaktører stille soner og avlinger for bilder. Vi har også laget en JavaScript-pakke som gjør alt det harde arbeidet med å gjøre den riktige bildet forvandle Nettadresser for deg. Bare passere et bilde av anlegg og størrelsen du vil ha, og vi vil finne ut beskjære og skala.

Se Penn Tilpasset beskjære og soner av Knut Melvær (@kmelve) på CodePen.

5. Gjøre en real-time photomap

Hvis dette ikke er å slå det opp til 11, det er i alle fall en god 10.5.

Vi kan trekke ut EXIF-og geo-location data fra et bilde. EXIF-data inneholder informasjon om kameraet staten når bildet ble tatt (f.eks. eksponering, blenderåpning, objektiv, hvis blitsen gikk av etc.). På grunn av bekymringer for personvernet (vi tar GDPR-samsvar super seriøst) vi har slått av funksjonen som standard, men hvis du stiller inn [alternativer: { metadata: [‘exif’, ‘sted’ ] } i skjema valg, vil de bli inkludert.

Vi har laget en liten demo som lar deg laste opp et bilde og, hvis det har beliggenhet data (f.eks. vanligvis de du tar med telefonen din), vil det automatisk dukke opp i kartet — fordi API er real-time med lyttere!

Se Penn Felles Realtime Bilde Kartet av Knut Melvær (@kmelve) på CodePen.

Hvis du ønsker å teste ut Fornuft og disse funksjonene selv, kan du komme i gang med skriving av npm i-g @fornuft/cli && fornuft init. Selv om CLI guider deg gjennom installasjonen, det er verdt å sjekke ut dokumentasjonen (hvis det er ikke for illustrasjonene alene), og det er alltid folk som ønsker å hjelpe til med nitty gritty i vår Slakk gruppe.