Rediger bilder: roter, beskjær og sett fokuspunkt

Du kan redigere et bilde direkte i admin-panelet etter at du har lastet det opp. Du kan rotere det, beskjære det og fortelle systemet hvor motivet befinner seg, slik at det viktigste alltid forblir i bildet når temaet beskjærer det. Du kan ikke ødelegge noe underveis: originalen forblir alltid uendret, og du kan tilbakestille med ett klikk.

Slik åpner du bildredigeringen

Bildredigering finnes overalt der du laster opp bilder i administrasjonspanelet: på produkter, kategorier, sider, blogginnlegg, landingssider, merkevarer, kampanjer, fraktmetoder, betalingsmetoder og sikkerhetsprofiler.

1. Gå inn på produktet eller siden der bildet ligger.
2. Finn bildeseksjonen. På produkter heter den Produktbilder.
3. Klikk på selve bildet. Da åpnes et vindu med redigeringsverktøyene.

Vinduet har to faner: «Beskjær og roter» og «Fokuspunkt».

Roter bildet

Bruk «Roter til venstre» eller «Roter til høyre». Bildet roteres en kvart omdreining av gangen. Det er nøyaktig den samme handlingen du kjenner fra telefonen eller datamaskinen din, og det går ikke tapt noe av kvaliteten.

Merk at en beskjæring fjernes når du roterer bildet. Dette er med vilje: en ramme du har tegnet rundt et liggende bilde gir ingen mening når bildet plutselig står oppreist. Roter først, beskjær etterpå.

Beskjær bildet

Trekk en ramme over den delen du vil beholde. Du kan dra i hjørnene og på sidene, og du kan flytte hele rammen ved å dra i midten.

I feltet «Format» kan du låse rammen til et bestemt forhold:

• «Fritt» gir deg full frihet.
• Kvadratisk (1:1) passer til produktkort og til Instagram.
• Liggende (4:3) og Bred (16:9) passer til bannere og forsidebilder.
• Stående (3:4) passer til klær og andre høye motiver.

Hvis du vil fjerne beskjæringen igjen, klikker du på Fjern beskjæring.

Fokuspunkt: hold motivet i bildet

Temaer viser ofte bilder i faste formater. Et produktkort på forsiden kan for eksempel være helt kvadratisk, selv om bildet ditt er bredt. Da må en del av bildet beskjæres, og hittil har det alltid blitt beskåret fra midten.

Det går galt når motivet ikke står i midten. Står modellen på venstre side av bildet, havner hodet eller halvparten av personen utenfor det firkantede utsnittet.

Med et fokuspunkt angir du hvor motivet befinner seg. Gå til fanen Fokuspunkt og klikk på det stedet i bildet som alltid skal være med. Det vises en blå prikk. Når appen deretter beskjærer bildet, beskjæres det rundt dette punktet i stedet for midten.

Du kan flytte punktet ved å klikke på et nytt sted, og fjerne det igjen med «Fjern fokuspunkt». Uten fokuspunkt beskjæres bildet fra midten, akkurat som før.

Fokuspunktet brukes kun når bildet skal beskjæres til et fast format. Hvis bildet vises i full høyde og bredde, for eksempel på produktsiden, har punktet ingen betydning.

Du kan ikke ødelegge bildet ditt

Det opprinnelige bildet blir aldri overskrevet. Rotasjon, beskjæring og fokuspunkt lagres som noen få tall ved siden av bildet, og de legges først til når bildet vises i nettbutikken.

Derfor kan du alltid angre. Knappen «Tilbakestill til original» nederst i vinduet fjerner rotasjon, beskjæring og fokuspunkt på én gang, og bildet blir slik det var da du lastet det opp. Dette gjelder også måneder senere.

Bilder du har redigert, får en liten merking som heter «Redigert» i bildeoversikten, slik at du kan se det uten å åpne dem.

Opplasting, rekkefølge og alternativtekst

Bildeseksjonen fungerer likt i hele admin-området:

• Opplasting: dra bildene inn i det stiplede feltet, eller klikk på «Velg fra datamaskinen». Bildene lastes opp umiddelbart, så du trenger ikke å lagre siden først for å kunne skrive alt-tekst.
• Rekkefølge: Dra i håndtaket i hjørnet av et bilde for å flytte det. Rekkefølgen lagres automatisk. Det første bildet er hovedbildet.
• Alternativtekst: Skriv en kort beskrivelse av hva som er på bildet. Den lagres når du lagrer siden.
• Slett: Merk av for «Slett dette bildet» og lagre siden.

Du kan laste opp PNG, JPEG, GIF og WebP. SVG støttes ikke, fordi bildene må kunne skaleres til størrelsene temaet bruker.

Hvis et bilde fra telefonen er vendt feil

Mobilkameraer lagrer noen ganger et bilde liggende, selv om det er tatt stående, og legger inn en merknad i filen om hvordan det skal roteres. Ikke alle systemer leser denne merknaden, så et stående bilde kan ende opp liggende etter opplasting.

Skjer det, kan du rette det på et øyeblikk: klikk på bildet og bruk «Roter til venstre» eller «Roter til høyre» til det vender riktig. Rotasjonen lagres uten å endre originalfilen, så du kan alltid tilbakestille den igjen.

For utviklere

Beskjæring og rotasjon ligger på selve bildet, så temaet trenger ikke å gjøre noe. Både «fit» og «box» fungerer på det redigerte bildet, og fokuspunktet brukes automatisk av «box».

Hvis temaet ditt beskjærer selv med CSS, kan du hente fokuspunktet som en ferdig «object-position»:

<{if $image->getFocalPoint()}>
    <img src="<{$image->getSrc(800, 800, 'box')}>" alt="<{$image->getDescription()|escape}>"
         style="object-fit: cover; object-position: <{$image->getFocalPoint()}>"/>
<{/if}>

Det finnes også getFocalX() og getFocalY(), som gir tall mellom 0 og 1, eller ingenting hvis det ikke er angitt et punkt.

Via REST-API-et finnes feltene rotate, crop og focal på hvert bilde, både når du henter og når du lagrer. Rotasjon er grader med klokken, beskjæring er fire tall mellom 0 og 1 i rekkefølgen x, y, bredde og høyde, og fokuspunktet er to tall mellom 0 og 1. Beskjæringen beregnes på det roterte bildet, så rotasjonen legges til først.

Ofte stilte spørsmål

Sletter jeg det opprinnelige bildet mitt når jeg beskjærer?

Nei. Bildet du lastet opp forblir uendret. Beskjæringen legges først på når bildet vises, og du kan alltid trykke på «Tilbakestill til original» for å få alt tilbake.

Må jeg gjøre noe annerledes, eller fungerer det som vanlig?

Det fungerer som vanlig. Du drar bildene inn som før. Forskjellen er at de lastes opp umiddelbart, og at du kan klikke på et bilde hvis du vil rette det.

Må jeg redigere alle de gamle bildene mine på nytt?

Nei. Gamle bilder er uberørte og ser ut akkurat som før. Du kan rette dem hvis du vil, men du trenger ikke.

Hvordan ser jeg om en kollega allerede har redigert et bilde?

Redigerte bilder har en liten merking som heter «Redigert» i bildeoversikten. Hvis du åpner bildet, kan du se rotasjonen og rammen slik de ble lagret.

Fungerer det likt for produkter og kategorier?

Ja. Bildeseksjonen er den samme overalt. Produkter har noen ekstra felt per bilde, for eksempel tilknytning til en variant, men opplasting, rekkefølge og redigering fungerer på samme måte.

Kan jeg angi fokuspunkt på flere bilder samtidig?

Ikke i admin, der det settes bilde for bilde. Har du mange produkter, kan du angi feltene via REST-API-et, som har rotasjon, beskjæring og fokuspunkt for hvert bilde.

Tar det mer plass på serveren, og blir nettbutikken tregere?

Nei. Det lagres bare noen få filer i tillegg til originalen. Bildet i den redigerte versjonen lages én gang og gjenbrukes deretter, akkurat som alle andre bildestørrelser i nettbutikken.

Hvor lang tid tar det før kundene ser endringen?

Umiddelbart. Et redigert bilde får sin egen adresse, slik at kundene får den nye versjonen og ikke en gammel versjon fra nettleserens cache.

Blir beskjæringen med i Google Shopping og når noen deler en lenke?

Ja. Feeder og delingsbilder bruker de samme bildene som nettbutikken, så rotasjonen og beskjæringen din følger med neste gang feedet hentes.

Er alt-teksten tilstrekkelig for SEO?

Alt-teksten beskriver bildet for søkemotorer og skjermlesere, og den inngår også i bildets adresse. Den erstatter ikke produktets egen tekst og beskrivelse.