Cloudinary tips & triks - Fargeendring på bilde

31. mai 2021 av Linda Fermann

Cloudinary har mye funksjonalitet som ligger klart for dere å bruke. Vi skal i denne artikkelen se litt nærmere på en av disse, nemlig hvordan du kan endre på en farge i et bilde.

Vi ser nærmere på hvordan vi "on the fly" manipulerer bildet ved hjelp av å endre på lenken til bildet i Cloudinary. Vi bruker en transformasjon på bildet og endrer det til å være noe annet enn det er i utgangspunktet. Dette er et kraftig verktøy som kan spare deg for tid, og hjelpe deg dersom du ikke har tilgang til andre dyre bilderedigeringsprogrammer, som for eksempel Adobe Photoshop. På noen få klikk, så kan du endre et bilde bare ved hjelp av Cloudinary.

Vi skal først se på et eksempel fra Kundeportalen, hvor vi gjennomgår hvordan man gjør dette i detalj. Deretter skal vi se på et praktisk eksempel hvor en av våre kunder, Etman AS, sparte masse tid ved bruk av dette og byttet ut alle produktbildene i en produktserie hvor fargen på stikkontakter endret seg fra gulhvit til hvit.

Deretter så tar vi for oss et teoretisk eksempel hvor vi lager bilder som ikke eksisterer, og "on the fly" lager disse og knytter de til eksisterende produkter i nettbutikken.

Det er utallige ulike transformasjoner (redigeringer) som det er mulig å gjøre på bilder i Cloudinary, men vi skal her konsentrere oss om å endre på en farge i et bilde.

Bytte bakgrunnsfarge på et bilde - detaljert oppskrift

Vi skal i dette tilfellet ta utgangspunkt i et konkret eksempel fra Kundeportalen og steg for steg gå gjennom hva vi gjør.

På forsiden i Kundeportalen så ligger det et bilde i forbindelse med Inspirasjonsdag. Originalbildet har en knall gul bakgrunn, men vi skal endre den til oransje, slik vi faktisk har gjort det på Kundeportalen.

Merk: Lenkene til bilder som blir presentert i dette eksemplet er ikke aktive - de er bare testlenker som ble produsert på det tidspunktet dette ble laget. Men de viser hvordan dette vil de ut.

Steg 1 - Last opp bilde

For å laste opp bilde så går vi til "Media"/"Bilder" og laster opp det bildet som vi har lokalt på vår maskin. Deretter trykker vi på bildet og trykker på bildelenken slik at det åpner seg i en ny fane.

Steg 2 - Identifiser hvilken fargekode i bildet som skal byttes ut

I dette bilde så er det hovedsaklig en jevn gulaktig farge som er bakgrunn. Men vi ønsker å endre bakgrunnsfargen til noe som er Gurusoft sin profilfarge. For å endre denne bakgrunnsfargen, så må vi først finne hvilken fargekode bakgrunnen på bilde har og som er den vi ønsker at skal byttes ut.

Dette kan gjøres på flere måter, men det enkleste er å installere en utvidelse i nettleseren. I dette eksemplet har vi brukt en utvidelse som heter "Colorzilla", men det finnes utallige utvidelser som "Colorpick Eyedropper" etc. Finn ditt foretrukne verktøy i din nettleser og installer utvidelsen.

OK - vi benytter utvidelsen "Colorzilla" og trykker på et punkt som er midt i mellom det mørkeste og lyseste gule i bakgrunnsfargen. Da får vi opp hvilken fargekode det har. Dette kopierer vi og tar vare på.

Bakgrunnsfarge vi ønsker å bytte ut:

FFF834

Vår profilfarge vi ønsker å bytte til:

FFA500

Steg 3 - Legg inn parameter i lenken

I lenken til originalbildet som vi har lastet opp https://res.cloudinary.com/gurusoft-demo-04/image/upload/d_standard_placeholder.png,f_auto,q_auto/v1621418708/inspirasjonsdag_orginal, så har vi mulighet til å legge til noe mellom /upload/... og /d_standard.... for å manipulere bildet.

Formelen på det vi vil vi legge inn er følgende:

e_replace_color:"fargen det skal byttes til":"hvor aggressivt":"fargen som skal byttes ut"

Forklaring:

• "fargen det skal byttes til": Dette er fargen vi ønsker at skal byttes til
• "hvor aggressivt": Deretter angir vi hvor "aggressivt" vi ønsker å bytte alle pixlene som inneholder den fargen (her må du prøve deg fram). I dette tilfellet benytter vi "15" da vi ble fornøyd med det.
• "fargen som skal byttes ut": Deretter angir vi hvilken fargekode er det som skal byttes ut

Mellom /upload/ og /d_standard.... vil vi derfor legge inn dette i vårt tilfelle:

e_replace_color:ffa500:15:FFF50B

Da vil den fullstendige lenken se slik ut (uthevet det vi har lagt inn):

https://res.cloudinary.com/gurusoft-demo-04/image/upload/e_replace_color:ffa500:15:FFF834/d_standard_placeholder.png,f_auto,q_auto/v1621418708/inspirasjonsdag_orginal

Trykk enter, og så jobber Cloudinary i noen sekunder med transformasjonen. Når det er gjennomført så ser bildet slik ut:

Steg 4 - Last ned det redigerte bilde

OK - So far so good - vi er fornøyd med hvordan det ser ut. Men det eneste vi har gjort hittil er å redigere bildet i Cloudinary "on the fly", og det endrede bildet eksisterer kun i din nettleser. For at vi skal kunne bruke det med de endringer vi har gjort, så må det lastes ned. Så, det er det vi gjør - vi laster det ned, og nå har vi en kopi av det opprinnelige bildet, bare nå med en annen bakgrunn. Dette bilde kan vi nå laste opp igjen og bruke akkurat hvor vi ønsker.

Tips - Bytt ut "f_auto" i lenken med ønsket bildeformat før dere laster ned bildet - for eksempel f_png eller f_jpg.

Praktisk eksempel fra en av våre kunder - Etman

Etman hadde en produktserie med brytere som hadde en eggehvit farge, og denne serien ble byttet ut med akkurat samme brytere, bare i kritthvit farge. De hadde fått de opprinnelige bildene fra leverandøren, men ville ikke få nye bilder fra de. Dermed hadde de behov for å finne en måte å gjøre dette selv på, slik at bildene reflekterte en hvitere farge enn den eldre produktserien.

Espen i Etman kom en kveld over en youtube-video hvor det ble vist hvordan man kan endre på farger i et bilde i Cloudinary ved å legge til noen parametre i bildelenken. For en kreativ person som Espen, så var dette midt i blinken, og dette satte i gang en prosess. Det han ble introdusert for var akkurat det de hadde behov for, så han fant ut hvordan han skulle ta det eksemplet og omforme det til akkurat det som som skulle til i deres tilfelle. I tillegg til å endre på fargen, så la de også til et merke i bildet, og la på skygge både på bildet og merket. Hvordan de skulle få dette til, var egentlig bare noen Google-søk unna.

De benyttet seg av en litt annen funksjonalitet enn den vi så på ovenfor. Istedenfor å bytte ut fargen, så la de på litt mer blåfarge i bildet, og det fikk den ønskede effekten at bryteren ble hvitere.

Parameter de benyttet for å legge til en farge i bildet:

e_blue:2

Gjennom dette så sparte de masse tid på disse endringene, og utnyttet den kraftige funksjonaliteten som ligger i Cloudinary.

Vi benytter også anledningen til å rette en stor takk til Espen i Etman som tok seg tid til å dele dette eksemplet med oss. Slike praktiske eksempler er gull verdt, og viser at det å kombinere nysgjerrighet, noen Google-søk og ureddhet for å teste kan resultere i ny kunnskap og effektive måter å løse utfordringer på. Eksemplet fra Etman skriver seg faktisk helt tilbake til 2018! Og her er et hyggelig gjensyn med Espen i intervjuet Aurora gjorde på Summit 2018.

Lage bilder med andre farger - teoretisk eksempel med konvolutter

La oss se på at annet - teoretisk - eksempel, men som fort kan være et praktisk eksempel på produkter som egner seg for det.

La oss si at vi selger konvolutter i ulike farger, men hvor vi ikke har bilder av alle de ulike fargene, kun et bilde av en grå konvolutt.

Vi ser her bilde av det vi har lastet opp på det produktet i admin, hvor vi også har de andre produktene som mangler bilder:

Vi trenger da å vite lenken til det grå bildet, fargekoden på konvolutten i grått, altså det vist ovenfor, og hvilke andre fargekoder vi skal selge.

Vi bruker samme metode som i det første eksemplet ovenfor for å finne fargekoden på konvolutten, og finner at den er: #C9CDCC

I dette tilfellet så vet vi også at vi skal selge disse fargevariantene:

• Oransje: #ffa500
• Blå: #4695c7
• Lilla: #d086d1

Det eneste vi da trenger å gjøre er å opprette et regneark, her vist ved Google Spreadsheet. I første kolonne legger vi inn de produktnumrene som vi skal lage bilder til, og i kolonne to så legger vi inn hvilket bilde som skal lastet opp på disse produktene. Og det er her magien slår til. Vi kommer nemlig til å legge inn lenken til det grå bildet, og inne i denne lenken så legger vi til hvilken farge konvolutten skal ha, hvor agressivt fargen skal byttes ut, og hvilken farge som skal byttes ut.

Kjent ikke sant? - det var akkurat det vi gjorde i første eksemplet også. Bare at denne gangen tar vi det et steg videre. Vi kommer ikke til å laste bilde ned, men vi kommer til å generere bildet "on the fly" bare ved hjelp av lenken og laste det opp på de ulike produktene ved hjelp av opplastingsverktøyet i admin.

Det vi legger inn for de respektive bilder er:

• Oransje: e_replace_color:ffa500:15:C9CDCC
• Blå: e_replace_color:4695c7:15:C9CDCC
• Lilla: /e_replace_color:d086d1:15:C9CDCC

Da ser regnearket vårt slik ut:

Det neste vi gjør er å kopiere innholdet:

Deretter går vi til adminverktøyet, og under "Media" trykker vi på "Opplasting". Her limer vi inn i tabulator separert tekst, og trykker "Last opp":

Neste steg er å mappe opp feltene:

Trykk så "Fortsett", og "Fullfør" i neste skjermbilde. Det som nå kommer til å skje, er at adminverktøyet kommer til å utføre magien for deg. Det kommer til å hente det opprinnelige bildet med grå konvolutt, bytte ut farger på konvolutten og laste dette opp som bilder på de produkter du har angitt. Etter at denne prosessen er ferdig, så kan du se at bildene er produsert og lagt til på produktene:

Wow! - ikke sant! Det er nesten for godt til å være sant. Nye bilder i nye farger er laget og koblet til andre produkter, bare ved å manipulere en lenken på et bilde og knytte den lenken til produktet.

Oppsummering

I denne artikkelen har vi sett på noen eksempler i forhold til å bruke Cloudinary til å manipulere et bilde for å lage nye bilder med å bytte ut en farge. Det er ikke sikkert at eksemplene treffer deg og ditt behov eksakt, men bruk dette for å undersøke videre - bruk Google - og utforsk de mulighetene som ligger i Cloudinary. De er uendelig store - og jeg er sikker på at du vil bli inspirert dersom du gjør et dypdykk i dette.

Og - det kommer nok flere artikler etterhvert på andre funksjonaliteter som kan være nyttige.

I mellomtiden - lykke til og god fornøyelse!