Edit photos: rotate, crop, and set the focus point

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. Sletter du et billede, får du et par sekunder til at fortryde, og derefter er det væk.

Sådan åbner du billedredigering

Billedredigering findes i billedafsnittet på produkter, kategorier, sider, blogindlæg, landingssider, brands, kampagner, fragtmetoder, betalingsmetoder, og sikkerhedsprofiler. Opretter du en ny side, et nyt blogindlæg, eller en ny landingsside, skal du gemme den første gang, før du kan redigere billederne.

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 en redigering. 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.

Billeder du har valgt fra billedarkivet har mærket Fra arkivet. Du redigerer dem som alle andre billeder, og rettelsen gælder kun her, ikke i arkivet eller de andre steder, hvor billedet bruges.

Upload, rækkefølge, og alt-tekst

Billedafsnittet fungerer ens over hele admin:

• Upload: træk billederne ind i det stiplede felt, eller klik et sted i feltet for at vælge dem på din computer. Hvor der kan være flere billeder, kan du trække mange ind på én gang. Billederne uploades med det samme, så du behøver ikke gemme siden først for at kunne skrive alt-tekst. Ligger billedet allerede i billedarkivet, klikker du på Vælg fra billedarkiv under feltet og vælger det dér.
• Rækkefølge: hvor der kan være flere billeder, trækker du i grebet med de seks prikker nederst til venstre på billedkortet for at flytte billedet. 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: klik på skraldespanden nederst til højre på billedkortet. Kortet bliver stående med teksten Billedet er slettet og knappen Fortryd i et par sekunder, så du kan nå at fortryde et forkert klik. Derefter forsvinder kortet, og billedet er slettet. Du behøver ikke gemme siden. Er billedet fra arkivet, fjernes det kun her og bliver liggende i arkivet.

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 billedet med CSS i en boks med fast format, kan du hente fokuspunktet som en færdig object-position:

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

Brug fit her og ikke box, for et box-billede er allerede skåret til omkring fokuspunktet. Er der ikke sat et punkt, er værdien tom, og browseren beskærer fra midten.

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.

Kan jeg fortryde hvis jeg kommer til at slette et billede?

Ja, men kun mens kortet viser knappen Fortryd. Klikker du Fortryd, er billedet tilbage med alt-tekst og de valg du havde lavet. Gemmer du siden, forlader den, eller genindlæser den inden da, bliver billedet slettet. Er kortet forsvundet, er billedet slettet sammen med rotation, beskæring, og fokuspunkt, og du skal uploade det igen. Kom billedet fra billedarkivet, kan du i stedet vælge det derfra igen.

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, at du kan klikke på et billede hvis du vil rette det, og at du sletter et billede uden at gemme siden, med et par sekunder til at fortryde.

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. Mangler et produktbillede alt-tekst, kan du se det i søgeordsanalysen i kortet SEO på produktet.