Vijf interessante manieren om het gebruik van gezond Verstand.io afbeelding voor art direction

0
48

Toen we zagen Chris zetten van een lijst van cloud-gehoste data-winkels konden we het niet laten hem te laten weten dat we ook gehad, alleen die van ons is een compleet CMS met een rijke query language en is een open source real-time, collaborative authoring tool die u kunt aanpassen aan uw specifieke behoeften met behulp van Reageren. Dat heet gezond Verstand.io.

“Voeg ons toe aan je lijst!” vroeg Chris. “Nee, je spullen is interessant, kan je niet schrijven over u,” antwoordde hij. “Misschien iets dat nuttig zou zijn voor mensen die werken met beelden.” Uitdaging aanvaard!

Systemen zoals het Verstand wil gratis uw inhoud vanuit de specifieke pagina het gebeurt te zitten, zodat u zich kan stromen door middel van Api ‘ s. Op die manier kunt u het hergebruik van uw zorgvuldig gemaakte inhoud overal waar u het nodig hebt.

Dus, wat betekent dit voor de afbeeldingen?

Afbeeldingen worden de oneven zijn. We kunnen het vastleggen van documentatie, prijzen of project portfolio ‘ s als mogelijk complexe, maar uiteindelijk graspable gegevens-structuren die machines kunnen opvragen en verwerken in veel nuttige manieren. Maar beelden? Ze echt alleen maar de zakken van de pixels zitten aan het einde van een CDN, zijn ze niet?

We kwamen met een aantal ideeën hoe dan ook, want iedereen heeft behoefte aan beelden en afbeeldingen moet net zo bereid om te reizen naar nieuwe en spannende plekken en diensten als de rest van uw gestructureerde spullen.

Zo, hier zijn we met een middelgrote tas van image tricks die je kunt trekken uit met gezond Verstand.

1. Pak het palet van de metadata

Ooit geprobeerd om een overlay tekst over een willekeurige afbeelding ingediend door een gebruiker? Hoe kwam dat? We hebben meestal eindigde het indienen van onze beelden voor filters tot ze voorspelbaar en skulked huis met een moody ‘ expressie.

We dachten dat het leuk zou zijn om het schip een beeld palet met je foto ‘ s zodat je kunt kiezen tussen donker en licht typografie evenals paar visuele elementen met afbeelding in kleur. Dit maakt de leesbaarheid zo veel beter en voorkomt botsingen tussen de kleuren van afbeeldingen en tekst.

Zie de Pen Toegang afbeelding kleuren als de metadata van de geestelijke Gezondheid door Knut Melvær (@kmelve) op CodePen.

2. Krijg een lage kwaliteit van de afbeelding tijdelijke aanduidingen

Hoe snel en in de buurt van uw CDN is, duurt het nog tijd om het verzenden van grote bestanden. Zo, we hebben een Lage Kwaliteit van Beeld tijdelijke Aanduiding (LQIP) met uw metagegevens van de foto. Het is een base64-encoded string van uw foto op 20 px breedte. Aan de LQIP in de eerste aanvraag kunt u bakken een proxy recht op afbeelding in de HTML-code.

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

Een uitdaging met een afbeelding van tijdelijke aanduidingen is het kunnen voorspellen van de afmetingen van de afbeelding in een vloeiende lay-out. In dit voorbeeld maken we gebruik van de aspect ratio die komt ook in de metadata object voor het berekenen van de padding-top truc. Dat betekent dat je niet hoeft te berekenen van de aspect ratio zelf, en bijvoorbeeld de output die hij als een eigen woning in combinatie met CSS variabelen.

Zie de Pen Voor de Kwaliteit van de Afbeelding tijdelijke Aanduidingen uit de doos door Knut Melvær (@kmelve) op CodePen.

3. Gebruik on-demand beeld verandert

Je moet in staat zijn om op te slaan de archivering van originelen en krijgen de afbeelding in welke resolutie en formaat dat u nodig hebt. Ga je gang, het uploaden van uw 268 megapixel TIFF, en vraag om een 128×128 bijgesneden JPEG met een 50% vervagen.

De transformaties zijn gegenereerd op basis van URL-parameters gegenereerd en op het eerste verzoek. Wij cache het resultaat lokaal en op een CDN zo veel aanvragen voor hetzelfde resultaat afbeelding super snappy.

Neem dit beeld van de Carina-Nevel. We geupload een 29.566 x 12.960 versie van het. Laten we zeggen dat we wilden een PNG-versie met een 500 px breedte. Bevestigen ?w=500&fm=png naar de URL van de afbeelding, en daar is het:

Bron Bestand

Niet alleen is het moeilijk om te horen schreeuwen in de ruimte, het is ook moeilijk om te beoordelen routebeschrijvingen. Maar laten we zeggen dat je nodig hebt om het beeld te draaien. Goed, u kunt toevoegen &of=90 en het is gekanteld en 90 graden (en de schaal van het af te 128px):

Bron Bestand

Niet roes veren bij de NASA, maar als u wilt simuleren sferische aberratie op uw nieuwe 1,5 miljard USD telescoop kunt u dat doen door het toevoegen van ?blur=30 de image-url!

Bron Bestand

De afbeelding pijplijn is goed voor uw SVGs. Zeggen dat je nodig hebt om te bieden een JPG Open Graph (og:image) of u hebt een dringende behoefte aan het toevoegen van dit SVG van een heftruck als een Slappe emoji:

Bron Bestand

Voor de 128×128 PNG-versie die u nodig hebt, door het toevoegen van de URL-parameters w=128&h=128&fm=png, net zoals deze.

Je hebt ook de controle van de achtergrond kleur met de bg=<hexcolor> Laten we zeggen dat we een of andere reden wilde deze heftruck op een mooie paarse achtergrond.

En, tenslotte, als je wilt een link naar dit beeld en het activeren downloaden voor de gebruiker, kunt u toevoegen dl=<voorgesteld file-name> om het te laten gebeuren.

Download de Afbeelding

Het is niet altijd zo leuk als deze om te knoeien met URL-parameters, zodat we een JavaScript-bibliotheek, dat maakt het een beetje makkelijker. Installeren met npm install –opslaan @sanity/image-url en leren hoe om het te gebruiken (we gebruiken het in de demo ‘ s in deze post).

4. Gewas en passend rond een punt,

Die vervelende beelden met hun vaste aspect ratio ‘ s. Naast het kennen van de pixel dichtheid van de output-apparaat, kunt u vaak niet eens weten wat gewas het meest geschikt is voor de lay-out. Zelfs op een enkele website, zult u vaak gebruik van dezelfde afbeelding in verschillende lay-outs, en vaak nodig om hen te dienen tot aan derde partijen , die verwacht dat specifieke aspect ratio ‘ s.

Aangepaste gewas en een hotspot in de geestelijke Gezondheid Studio

Om de pijn te verlichten van het omgaan met deze, we hebben laten redacties set hotspots en gewassen voor afbeeldingen. We hebben ook een JavaScript-pakket die doet al het harde werk van het maken van de juiste afbeelding transformeren Url ‘ s voor je. Gewoon een afbeelding actief en de grootte die u wenst, en wij zullen uitzoeken van het gewas en de schaal.

Zie de Pen Aangepast uitsnijden en hotspots door Knut Melvær (@kmelve) op CodePen.

5. Het maken van een real-time photomap

Als dit niet het draaien van het up-to-11, het is in ieder geval een goede 10.5.

Kunnen We halen de EXIF-en geo-locatie gegevens van een afbeelding. EXIF-data bevat informatie over de camera staat wanneer de foto werd genomen (bijvoorbeeld de belichting, het diafragma, lens, als de flits ging, enz.). Omwille van privacy redenen (we nemen GDPR-naleving super serieus) we hebben de functie standaard uitgeschakeld, maar als u [opties: { metadata: [‘exif’, ‘locatie’ ] } in uw schema opties, zij zal worden opgenomen.

We hebben een kleine demo waarmee je een afbeelding uploaden en, als het locatie-gegevens (bijv. typisch die u met uw telefoon), zal het automatisch een pop-up in de kaart — omdat de API is real-time met luisteraars!

Zie de Pen real-time Gedeelde Foto-Kaart van Knut Melvær (@kmelve) op CodePen.

Als u wilt om uit te testen gezond Verstand en deze beschikt over jezelf, kun je aan de slag met het schrijven van npm i-g @sanity/cli && gezondheid init. Hoewel de CLI gidsen u door het installatie-proces, het is de moeite waard de documentatie (indien niet voor de illustraties alleen al) en er zijn altijd mensen die willen helpen met de nitty gritty in onze Slappe groep.