Rediger billeder: rotér, beskær og sæt fokuspunkt

Du kan rette et billede direkte i admin, efter du har uploadet det. Du kan dreje det, beskære det, og fortælle systemet hvor motivet er, så det vigtigste altid bliver i billedet når temaet skærer det til. Du kan ikke ødelægge noget undervejs: originalen bliver altid liggende uændret, og du kan nulstille med ét klik.

Sådan åbner du billedredigering

Billedredigering findes overalt hvor du uploader billeder i admin: på produkter, kategorier, sider, blogindlæg, landingssider, brands, kampagner, fragtmetoder, betalingsmetoder og sikkerhedsprofiler.

1. Gå ind på det produkt eller den side hvor billedet ligger.
2. Find billedafsnittet. På produkter hedder det Produktbilleder.
3. Klik på selve billedet. Der åbner et vindue med redigeringsværktøjerne.

Vinduet har to faner: Beskær og rotér, samt Fokuspunkt.

Rotér billedet

Brug Rotér venstre eller Rotér højre. Billedet drejer en kvart omgang ad gangen. Det er præcis den samme handling du kender fra din telefon eller computer, og der går ingen kvalitet tabt.

Bemærk at en beskæring bliver fjernet når du drejer billedet. Det er med vilje: en ramme du har trukket på et liggende billede giver ikke mening når billedet pludselig står op. Drej først, beskær bagefter.

Beskær billedet

Træk en ramme hen over det udsnit du vil beholde. Du kan trække i hjørnerne og i siderne, og du kan flytte hele rammen ved at trække i midten.

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

• Frit giver dig fuld frihed.
• Kvadratisk (1:1) passer til produktkort og til Instagram.
• Liggende (4:3) og Bred (16:9) passer til bannere og forsidebilleder.
• Stående (3:4) passer til tøj og andre høje motiver.

Vil du af med beskæringen igen, klikker du på Fjern beskæring.

Fokuspunkt: hold motivet i billedet

Temaer viser ofte billeder i faste formater. Et produktkort på forsiden kan for eksempel være helt firkantet, selvom dit billede er bredt. Så skal en del af billedet skæres væk, og hidtil er der altid blevet skåret fra midten.

Det går galt når motivet ikke står i midten. Står modellen i venstre side af billedet, ryger hovedet eller halvdelen af personen ud af det firkantede udsnit.

Med et fokuspunkt fortæller du hvor motivet er. Gå ind på fanen Fokuspunkt og klik det sted på billedet der altid skal med. Der kommer en blå prik. Når temaet derefter skærer billedet til, skæres der omkring dit punkt i stedet for midten.

Du kan flytte punktet ved at klikke et nyt sted, og fjerne det igen med Fjern fokuspunkt. Uden fokuspunkt beskæres der fra midten, præcis som hidtil.

Fokuspunktet bruges kun når billedet skal beskæres til et fast format. Vises billedet i sin fulde højde og bredde, for eksempel på produktsiden, har punktet ingen betydning.

Du kan ikke ødelægge dit billede

Det oprindelige billede bliver aldrig overskrevet. Rotation, beskæring og fokuspunkt gemmes som nogle få tal ved siden af billedet, og de bliver først lagt på når billedet vises i shoppen.

Derfor kan du altid fortryde. Knappen Nulstil til original i bunden af vinduet fjerner rotation, beskæring og fokuspunkt på én gang, og billedet er tilbage som det var da du uploadede det. Det gælder også måneder efter.

Billeder du har redigeret får et lille mærke der hedder Redigeret i billedoversigten, så du kan se det uden at åbne dem.

Upload, rækkefølge og alt-tekst

Billedafsnittet fungerer ens over hele admin:

• Upload: træk billederne ind i det stiplede felt, eller klik Vælg fra computeren. Billederne uploades med det samme, så du behøver ikke gemme siden først for at kunne skrive alt-tekst.
• Rækkefølge: træk i grebet i hjørnet af et billede for at flytte det. Rækkefølgen gemmes automatisk. Det første billede er hovedbilledet.
• Alt-tekst: skriv en kort beskrivelse af hvad der er på billedet. Den gemmes når du gemmer siden.
• Slet: sæt flueben i Slet dette billede og gem siden.

Du kan uploade PNG, JPEG, GIF og WebP. SVG understøttes ikke, fordi billederne skal kunne skaleres om til de størrelser temaet bruger.

Hvis et billede fra telefonen vender forkert

Telefonkameraer gemmer nogle gange et billede liggende, selvom det er taget stående, og lægger en note i filen om hvordan det skal vendes. Ikke alle systemer læser den note, så et stående billede kan komme til at ligge ned efter upload.

Sker det, retter du det på et øjeblik: klik på billedet og brug Rotér venstre eller Rotér højre, til det vender rigtigt. Rotationen gemmes uden at røre din originalfil, så du kan altid nulstille igen.

For udviklere

Beskæring og rotation ligger på selve billedet, så temaet skal ikke gøre noget. Både fit og box arbejder på det redigerede billede, og fokuspunktet bruges automatisk af box.

Beskærer dit tema selv med CSS, kan du hente fokuspunktet som en færdig object-position:

<{if $image->getFocalPoint()}>
    
<{/if}>

Der er også getFocalX() og getFocalY(), som giver tal mellem 0 og 1, eller ingenting hvis der ikke er sat et punkt.

Via REST-API'et ligger felterne rotate, crop og focal på hvert billede, både når du henter og når du gemmer. Rotation er grader med uret, beskæring er fire tal mellem 0 og 1 i rækkefølgen x, y, bredde og højde, og fokuspunktet er to tal mellem 0 og 1. Beskæringen regnes på det roterede billede, så rotationen lægges på først.

Ofte stillede spørgsmål

Sletter jeg mit rigtige billede når jeg beskærer?

Nej. Det billede du uploadede bliver liggende uændret. Beskæringen lægges først på når billedet vises, og du kan altid trykke Nulstil til original og få det hele tilbage.

Skal jeg gøre noget nyt, eller virker det som det plejer?

Det virker som det plejer. Du trækker billederne ind som hidtil. Forskellen er at de uploades med det samme, og at du kan klikke på et billede hvis du vil rette det.

Skal jeg redigere alle mine gamle billeder igen?

Nej. Gamle billeder er uberørte og ser ud præcis som før. Du kan rette dem hvis du vil, men du skal ikke.

Hvordan ser jeg om en kollega allerede har redigeret et billede?

Redigerede billeder har et lille mærke der hedder Redigeret i billedoversigten. Åbner du billedet, kan du se rotationen og rammen som de blev gemt.

Virker det ens på produkter og på kategorier?

Ja. Billedafsnittet er det samme alle steder. Produkter har nogle ekstra felter pr. billede, for eksempel tilknytning til en variant, men upload, rækkefølge og redigering fungerer ens.

Kan jeg sætte fokuspunkt på mange billeder på én gang?

Ikke i admin, hvor det sættes billede for billede. Har du mange produkter, kan du sætte felterne via REST-API'et, som har rotation, beskæring og fokuspunkt på hvert billede.

Fylder det mere på serveren, og bliver shoppen langsommere?

Nej. Der gemmes kun nogle få tal ud over originalen. Billedet i den redigerede udgave laves én gang og bliver derefter genbrugt, ligesom alle andre billedstørrelser i shoppen.

Hvor lang tid går der før kunderne ser rettelsen?

Med det samme. Et redigeret billede får sin egen adresse, så kunderne får den nye udgave og ikke en gammel version fra browserens hukommelse.

Følger beskæringen med i Google Shopping og når nogen deler et link?

Ja. Feeds og delingsbilleder bruger de samme billeder som shoppen, så din rotation og beskæring følger med næste gang feedet hentes.

Er alt-teksten nok til SEO?

Alt-teksten beskriver billedet for søgemaskiner og for skærmlæsere, og den indgår også i billedets adresse. Den erstatter ikke produktets egen tekst og beskrivelse.