Redigera bilder: rotera, beskära och ställa in fokuspunkt

Du kan redigera en bild direkt i admin efter att du har laddat upp den. Du kan rotera den, beskära den och ange för systemet var motivet finns, så att det viktigaste alltid finns kvar i bilden när temat beskär den. Du kan inte förstöra något under tiden: originalet förblir alltid oförändrat, och du kan återställa med ett enda klick.

Så här öppnar du bildredigeraren

Bildredigering finns överallt där du laddar upp bilder i admin: på produkter, kategorier, sidor, blogginlägg, landningssidor, varumärken, kampanjer, fraktmetoder, betalningsmetoder och säkerhetsprofiler.

1. Gå till den produkt eller sida där bilden finns.
2. Hitta bildavsnittet. För produkter heter det Produktbilder.
3. Klicka på själva bilden. Ett fönster med redigeringsverktygen öppnas.

Fönstret har två flikar: Beskär och rotera samt Fokuspunkt.

Rotera bilden

Använd ”Rotera åt vänster” eller ”Rotera åt höger”. Bilden roteras ett kvarts varv i taget. Det är precis samma åtgärd som du känner till från din telefon eller dator, och ingen bildkvalitet går förlorad.

Observera att en beskärning tas bort när du roterar bilden. Det är avsiktligt: en ram som du har ritat runt en liggande bild ger ingen mening när bilden plötsligt står upprätt. Rotera först, beskär sedan.

Beskär bilden

Dra en ram över den del du vill behålla. Du kan dra i hörnen och på sidorna, och du kan flytta hela ramen genom att dra i mitten.

I fältet Format kan du låsa ramen till ett visst förhållande:

• Fritt ger dig full frihet.
• Kvadratisk (1:1) passar för produktkort och Instagram.
• Liggende (4:3) och Bred (16:9) passar för banners och förstasidesbilder.
• Stående (3:4) passar för kläder och andra höga motiv.

Om du vill ta bort beskärningen igen klickar du på Ta bort beskärning.

Fokuspunkt: behåll motivet i bilden

Teman visar ofta bilder i fasta format. Ett produktkort på förstasidan kan till exempel vara helt kvadratiskt, även om din bild är bred. Då måste en del av bilden beskäras bort, och hittills har man alltid beskärt från mitten.

Det blir fel när motivet inte står i mitten. Om modellen står på vänster sida av bilden hamnar huvudet eller halva personen utanför det fyrkantiga utsnittet.

Med en fokuspunkt anger du var motivet befinner sig. Gå till fliken Fokuspunkt och klicka på den plats i bilden som alltid ska vara med. En blå prick visas. När programmet sedan beskär bilden sker beskärningen runt din punkt istället för i mitten.

Du kan flytta punkten genom att klicka på en ny plats och ta bort den igen med Ta bort fokuspunkt. Utan fokuspunkt beskärs bilden från mitten, precis som tidigare.

Fokuspunkten används endast när bilden ska beskäras till ett fast format. Om bilden visas i sin fulla höjd och bredd, till exempel på produktsidan, har punkten ingen betydelse.

Du kan inte förstöra din bild

Den ursprungliga bilden skrivs aldrig över. Rotation, beskärning och fokuspunkt sparas som några få siffror bredvid bilden, och de läggs först till när bilden visas i butiken.

Därför kan du alltid ångra dig. Knappen Återställ till original längst ner i fönstret tar bort rotation, beskärning och fokuspunkt på en gång, och bilden återgår till det skick den var i när du laddade upp den. Det gäller även flera månader senare.

Bilder som du har redigerat får en liten markering med texten ”Redigerad” i bildöversikten, så att du kan se det utan att öppna dem.

Uppladdning, ordning och alt-text

Bildavsnittet fungerar på samma sätt i hela admin:

• Uppladdning: dra bilderna till det streckade fältet eller klicka på ”Välj från datorn”. Bilderna laddas upp direkt, så du behöver inte spara sidan först för att kunna skriva alt-text.
• Ordning: dra i handtaget i hörnet av en bild för att flytta den. Ordningen sparas automatiskt. Den första bilden är huvudbilden.
• Alt-text: skriv en kort beskrivning av vad som finns på bilden. Den sparas när du sparar sidan.
• Ta bort: kryssa i rutan Ta bort denna bild och spara sidan.

Du kan ladda upp PNG, JPEG, GIF och WebP. SVG stöds inte, eftersom bilderna måste kunna skalas om till de storlekar som temat använder.

Om en bild från telefonen är vänd fel

Mobilkameror sparar ibland en bild liggande, även om den är tagen stående, och lägger in en anteckning i filen om hur den ska vändas. Inte alla system läser den anteckningen, så en stående bild kan hamna liggande efter uppladdningen.

Om det händer kan du rätta till det på ett ögonblick: klicka på bilden och använd Rotera åt vänster eller Rotera åt höger tills den är rättvänd. Rotationen sparas utan att din originalfil påverkas, så du kan alltid återställa den igen.

För utvecklare

Beskärning och rotation sker direkt på själva bilden, så temat behöver inte göra något. Både ”fit” och ”box” arbetar med den redigerade bilden, och fokuspunkten används automatiskt av ”box”.

Om ditt tema beskär bilden själv med CSS kan du hämta fokuspunkten som en färdig 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 finns även getFocalX() och getFocalY(), som returnerar tal mellan 0 och 1, eller ingenting om ingen punkt har angetts.

Via REST-API:et finns fälten rotate, crop och focal för varje bild, både när du hämtar och när du sparar. Rotationen anges i grader medurs, beskärningen består av fyra tal mellan 0 och 1 i ordningen x, y, bredd och höjd, och fokuspunkten består av två tal mellan 0 och 1. Beskärningen beräknas utifrån den roterade bilden, så rotationen tillämpas först.

Vanliga frågor

Raderar jag min ursprungliga bild när jag beskär den?

Nej. Den bild du laddade upp förblir oförändrad. Beskärningen tillämpas först när bilden visas, och du kan alltid trycka på Återställ till original för att få tillbaka allt.

Måste jag göra något annorlunda, eller fungerar det som vanligt?

Det fungerar som vanligt. Du drar in bilderna på samma sätt som tidigare. Skillnaden är att de laddas upp direkt och att du kan klicka på en bild om du vill redigera den.

Måste jag redigera alla mina gamla bilder igen?

Nej. Gamla bilder är oförändrade och ser ut precis som tidigare. Du kan redigera dem om du vill, men du behöver inte.

Hur ser jag om en kollega redan har redigerat en bild?

Redigerade bilder har en liten markering som heter Redigerad i bildöversikten. Om du öppnar bilden kan du se rotationen och ramen som de sparades med.

Fungerar det på samma sätt för produkter och kategorier?

Ja. Bildavsnittet är detsamma överallt. Produkter har några extra fält per bild, till exempel koppling till en variant, men uppladdning, ordning och redigering fungerar på samma sätt.

Kan jag ställa in fokuspunkt på flera bilder samtidigt?

Inte i admin, där det görs bild för bild. Om du har många produkter kan du ställa in fälten via REST-API:et, som har rotation, beskärning och fokuspunkt för varje bild.

Tar det mer plats på servern och blir webbutiken långsammare?

Nej. Endast några få filer sparas utöver originalet. Den redigerade versionen av bilden skapas en gång och återanvänds sedan, precis som alla andra bildstorlekar i webbutiken.

Hur lång tid tar det innan kunderna ser ändringen?

Omedelbart. En redigerad bild får en egen adress, så att kunderna får den nya versionen och inte en gammal version från webbläsarens cacheminne.

Följer beskärningen med i Google Shopping och när någon delar en länk?

Ja. Feeds och delningsbilder använder samma bilder som webbutiken, så din bildrotation och beskärning följer med nästa gång feedet hämtas.

Räcker alt-texten för SEO?

Alt-texten beskriver bilden för sökmotorer och skärmläsare, och den ingår också i bildens adress. Den ersätter inte produktens egen text och beskrivning.