Widgeten bildspel

Widgeten Bildspel låter dig lägga in en bilder som det växlas mellan. Du kan (och bör) även låta olika bilder vara klickbara med länkning till olika sidor. Syftet med ett bildspel i en webbshop är ju inte att visa upp bilder, utan att exponera artiklar, varumärken, varugrupper, kampanjer och inspirationssidor som i sin tur leder till försäljning! Se därför till att om möjligt varje bild i bildspelet länkar till en relevant sida som tar kunden mot ett köpbeslut. 

Ett bildspels olika bilder laddas upp till en egen mapp i filarean. För bästa resultat bör bilder i ett bildspel ha samma pixelstorlekar som varandra.

Systemet stödjer bildformaten JPG (JPEG), PNG och GIF. Vi rekommenderar att du använder JPG för fotografiska bilder. För tecknade bilder och bilder med få färger är PNG mer lämpligt. PNG kan även användas till bilder med genomskinliga bakgrunder. GIF bör endast användas i undantagsfall, som till exempel för animeringar.

Lägg till ett bildspel

Gör så här i admin:

1. Gå till sidan eller widgethållaren där du vill lägga till bildspelet.
2. Klicka knappen Lägg till widget och under kategorin Bildspel välj widgeten Bildspel.
3. Spara utan att göra några inställningar. (Vi kommer gå tillbaka till inställningarna i steg 14.)
4. Ställ in hur många kolumner du vill att widgeten ska spänna över.
5. Läs av hur många pixlar bildspelet tar upp på bredden. Detta blir bredden som bilderna vi laddar upp till bildspelet bör ha. Vilken höjd bilderna ska ha väljer du själv efter vad som ser bra ut i din layout. Notera dock att alla bilder i bildspelet bör ha samma bredd och höjd som varandra för att bilderna inte ska stretchas vid övergången mellan bilderna.
   
   Vårt bildspel tar upp 660px på bredden, så våra bilder i bildspelet ska vara 660px breda.
6. I ett bildbehandlingsprogram tar vi fram bilder till bildspelet i den pixel-storlek vi kommit fram till ovan och i lämplig komprimeringsgrad.
7. Om ordningen bilderna ska visas i är viktig, se till att döpa bildfilerna så att de kommer i bokstavsordning så som de ska visas. Detta kan till exempel göras genom att lägga till en numrering först i filnamnet, så att första bilden heter "01 - bildnamn.jpg" osv.
   
   Om du vill visa olika bilder för olika språk, se guiden Visa specifika bilder i bildspelet för olika språk.
8. I admin, gå till Webbplats -> Filarean och klicka knappen Skapa ny mapp. Döp mappen till något beskrivande så som till exempel "Bildspel kontaktsida" om bildspelet ska nyttjas på innehållssidan med kontaktinfo.
9. Välj den nyskapade mappen och ladda upp dina bildfiler.
   
   Vårt exempelbildspel har tre bilder. Notera att alla tre bilder har samma dimensioner.
10. För att göra bilder länkade, ge dem alt-text eller beskrivningstext, klicka på den blå i-ikonen till höger om bilden i filarean för att få upp dialogrutan nedan.
11. Som Title sätter du det som ska vara alt-text för bilden. Alltså en beskrivning för sökmotorer och användare som surfar utan att visa bilder.
12. Fältet Beskrivning är inte obligatoriskt och ger en undertext som ligger på bilden i bildspelet.
13. Som Länk sätter du eventuell länkning av bilden. Använd interna länkar för länkar inom din egen butik. Interna länkar börjar med språkkoden, dvs /sv/ för svenska. Börja inte med http/https eller www för interna länkar.
    

    Notera att bilder i bildspel inte kan använda bildkartor.

14. Gå tillbaka till bildspelswidgeten. Under fliken Allmänt, sätt inställningar för Rubrik och Rubrikmall samt Marginaler och Höjd.
15. Under fliken Inställningar, för Mapp i filarean väljer du mappen du skapade i steg 7.
16. Vad du väljer som Övergångseffekt avgör vilken effekt bildväxlingen får. Testa dig fram till en effekt du tycker ser bra ut.
17. Som Tid per bild sätter du antalet sekunder varje bild ska visas.
18. Starta på slumpvis bild kryssar du i om du vill att bildspelet ska starta på slumpad bild. Annars kommer bildspelet börja på första bilden i bokstavsordning för filnamnen. Oavsett om rutan kryssas för så kommer bilderna efter första bilden att visas i bokstavsordning.
19. Kryssrutan Visa bildnavigering avgör om det ska visas klickbara cirklar som låter användaren gå direkt till valfri bild i bildspelet.
20. Kryssrutan Aktivera stöd för transparenta PNG-bilder kryssar du endast för om bildspelet har genomskinliga PNG-bilder i sig.
21. Klicka knappen Spara.
22. Ladda om sidan med bildspelet och kontrollera att allt ser ut som du tänkt dig.