Bilder

I huvudartiklar och relaterade artiklar finns två olika alternativ för att lägga in bilder: du kan antingen lägga upp bilder som bildmoduler på sidan, eller som moduler från Mediaflow (det vill säga Mediabanken).

Du väljer själv vilket av dessa två alternativ som du vill använda.

Fördelen med att hämta bilder från mediabanken (Mediaflow) är att man då slipper ladda ner dem till sin dator.

Fördelen med att använda bildmodul på sidan, är att det är enklare att redigera bilden – dessa bilder kan du redigera direkt i Sitevision och ändringarna sparas när du klickar på ok, medan Mediaflow-bilderna måste du hämta på nytt varje gång du vill göra en ändring i exempelvis bildtexten.

För bilder i nyheter passar det bäst med bildmodul på sidan, eftersom det finns funktionalitet kopplat till bildmodulen (som gör att bilden blir synlig i en nyhetspuff).

Lägga upp bildmodul på sidan

När du lägger in en bildmodul så hamnar den under modulen som du står i (exempelvis en textmodul).

Så här skapar du en bildmodul:

Gå till verktygslisten högst upp och klicka på Lägg till bildmodul.

Du hittar alternativet Lägg till bildmodul i verktygslisten.

När du klickar på Lägg till bildmodul dyker det upp en ruta där du kan ladda upp en bild.
Ställ dig där det står Bilder på sidan (OBS vi ska inte lägga något i bildarkivet, utan enbart under Bilder på sidan).

Ladda upp dina bilder på sidan, inte i bildarkivet.

När du har klickat på Bilder på sidan, titta i fältet till höger. Där klickar du på Ladda upp bild.

På höger sida ser du alternativet ladda upp bild.

Det är möjligt att redan här lägga in alt-text, bildtext och bildkälla. Dessa sparas då i bildens metadata. För att de ska hämtas behöver du göra en inställning under fliken Texter.

Du kan fylla i fälten Bildbeskrivning (alt-text, Bildtext och Bildbeskriving, så att de sparas som bildens metadata.

Inställning för texter

När du har laddat upp bilden, gå till fliken Texter i den svarta listen högst upp. Där finner du olika alternativ för visning av text. Du väljer vilka alternativ som ska gälla för bilden.

I den svarta listen högst upp ställer du in alternativen för alt-text, bildtext och bildkälla.

Alternativtext

Dessa tre alternativ finns för bildens alt-text. Du väljer vilket av dem som ska gälla genom att klicka i cirkeln.

Hämta från bildbeskrivning (metadata) – Om du skrivit text under Bildbeskrivning när du laddade upp bilden så hämtas den texten.
Ange egen – Du skriver en alt-text, som blir den som läses upp för skärmläsare (oavsett vad som står i fältet Bildbeskrivning i metadatat).
Ingen (för dekorationsbilder) – Bilden läses inte upp av skärmläsare (oavsett om du skrivit något i fältet Bildbeskrivning i metadatat).

Bildtext

Dessa tre alternativ finns för bildens bildtext. Du väljer vilket av dem som ska gälla genom att klicka i cirkeln.

Hämta från bildtext (metadata) – Om väljer detta alternativ så hämtas den bildtext som du fyllde i när du laddade upp bilden.
Ange egen – Du fyller i en bildtext, och detta blir den bildtext som visas under bilden.
Ingen – Det visas ingen bildtext under bilden.

Bildkälla

I fältet Bildkälla skriver du fotografens (eller upphovspersonens) namn.

Dessa tre alternativ finns för bildens bildkälla. Du väljer vilket av dem som ska gälla genom att klicka i cirkeln.

Hämta från bildkälla (metadata) – Om du fyllde i fältet Bildkälla när du laddade upp bilden på sidan så blir den texten synlig under bilden.
Ange egen – Du fyller i en text i fältet Bildkälla, och det är denna text som blir synlig.
Ingen – Det visas ingen bildkälla under bilden.

Välj bildstorlek

När du laddat upp din bild och ställt in alternativen för texter är det dags att välja bildstorlek. Det gör du under fliken Övrigt, i den svarta listen (bredvid Texter).

I den svarta listen högst upp, under fliken Övrigt, ställer du in bildens storlek.

Du kan välja att behålla originalstorleken, eller att använda en av de två fördefinierade bildstorlekarna (halvbredd och tredjedelsbredd).

Helbredd

För att en bild ska kunna visas i helbredd behöver den vara minst 770px i bredd. Kontrollera alltså först att bilden som du laddar upp i Sitevision är 770px bred (eller större).

Behåll originalstorleken (ändra inte till de fördefinierade måtten halvbredd eller tredjedelsbredd).
lägg dekorationen Bild (helbredd) på bildmodulen genom att högerklicka på bildmodulen i innehållsträdet och välj Dekoration > Bild (helbredd).

När du väljer dekorationen Helbredd får bilden ett format där bredden sträcker sig över hela innehållsytan och höjden blir lagom.

Kom ihåg att om bilden ska visas i helbredd ska du behålla originalstorleken (och originalstorleken behöver vara minst 770px).

Halvbredd och tredjedelsbredd

Så här minskar du din bilds storlek till halvbredd eller tredjedelsbredd:

Gå in under fliken Övrigt och välj en av de fördefinierade storlekarna:
- Image – halvbredd (största bredd 385px)
- Image – tredjedelsbredd (största bredd 285px)

Under fliken Övrigt hittar du de fördefinierade bildstorlekarna.

Klart!

När du har laddat upp din bild under bilder för sidan, lagt in alternativ för text, och ställt in bildstorleken:

Klicka på knappen OK.

Bildmodulen dyker upp under den modul som du stod i när du klickade på Lägg till bildmodulen.

Om du vill redigera bilden igen, dubbelklicka på den.

Lägga upp bild från Mediaflow

Bilder från Mediaflow lägger du in med hjälp av en modul som heter Mediaflow.

Gå till verktygslisten, klicka på symbolen som ser ut som en kub.
Välj Bild och media, därefter Mediaflow.

Klicka på Foto och välj den bild du vill använda.

Klicka på Använd denna fil.

Bildstorlek, alt-text och bildtext

Där det står Bildstorlek, välj en av de fördefinierade storlekarna:

Webb – Helbredd

Webb – Halvbredd

Fyll i eventuell alt-text. Det går att generera alt-text med hjälp av AI-funktionen. (Kom då ihåg att kontrollera att AI-texten blir bra.) Bilder som enbart är dekorativa ska inte ha alt-text.

I fältet Beskrivning följer en beskrivning av bilden med. Detta blir bildens bildtext, som syns under bilden. Kom ihåg att lägga till fotografens namn.

När du valt bildstorlek, eventuell alt-text och lagt in beskrivning (det vill säga bildtext) klickar du på Använd denna fil och sedan på knappen OK.

Redigera bilder från Mediaflow

Det går egentligen inte att redigera en bild från Mediaflow som du redan lagt på sidan. Men genom att dubbelklicka på bilden kommer du till den i Mediaflow. Där kan du bland annat lägga in bildtext, och klicka på "använd denna fil" en gång till, så att den nya versionen av mediaflowbilden hamnar på sidan.

OBS! Redigera inte Mediaflowbilder under Bilder för sidan

Bilder från Mediaflow sparas även som bild för sidan – eftersom det ju är en bild som finns på sidan. Men kom ihåg att inte redigera Mediaflow-bilder via Sitevisions redigeringsalternativ för bildmodul (trots att de är synliga där), utan redigera alltid Mediaflow-bilder i Mediaflow.

Var på sidan ska bilden ligga?

Du bestämmer själv var på sidan som bilden ska vara. Men observera att bilder aldrig ska ligga ovanför sidans ingress.

Du kan flytta på bildmoduler eller mediaflowmoduler genom att dra i dem i innehållsträdet.

Placera en bild mellan två textstycken

I Sitevision består en sida av olika moduler, exempelvis textmoduler och bildmoduler. Du ser alla sidans moduler i innehållsträdet för sidan, till vänster.

I bilden ovan finns två textmoduler, du ser dem i innehållsträdet till vänster. De två textmodulerna i detta exempel heter Ingress och Text.

Dela upp textmodulen

Man kan inte lägga bildmoduler inuti textmoduler. Så för att lägga en bild mellan två textstycken behöver man dela på textmodulen, så att en (1) textmodul blir till två (2) textmoduler. Därefter kan man lägga en bildmodul mellan de två textmodulerna.

Ställ dig på det ställe i texten där du vill dela upp den.
I verktygslisten, klicka på kugghjulet till höger.
Välj Dela textmodul.

I exemplet ovan har vi delat på textmodulen, så att det har blivit två stycken textmoduler. De heter Text och Text 1.

Nu kan du lägga in din bild mellan de två textmodulerna.
När du lägger till en bildmodul så dyker den upp under den modul som du stod i när du klickade på Lägg till bildmodul. Du kan flytta på bildmodulen genom att dra i den i innehållsträdet.

På bilden ser vi hur det ser ut i innehållsträdet när man har lagt en bildmodul mellan två textmoduler.

Text bredvid bild

Du kan lägga till text som flödar till vänster eller till höger om en tredjedelsbild. Detta kan du exempelvis använda för en intervju eller i en nyhetsartikel, där du vill ha en eller flera mindre (porträtt)bilder.

Tänk på att en bild måste ligga till höger för att den ska ligga ovanför texten i mobilläge.
Detta ska inte användas om du vill att bild och text ska hålla samman som en enhet. Använd då istället modulen artikelpuff.
En halvbreddsbild kan med fördel ligga utan text bredvid, liksom tidigare. Det underlättar för läsaren att lättare tillgodogöra sig informationen på sidan, särskilt en sida med mycket innehåll.

Exempel på en bild med text bredvid.

Så här gör du för att lägga in text bredvid bild

Börja med att lägga in en bildmodul. Välj det fördefinierade formatet "Tredjedel".

Lägg en textmodul under bilden.
Högerklicka på bildmodulen i innehållsträdet.
Välj Flöda höger.

I exemplet ovan har vi valt att flöda bilden till höger.

Texten i textmodulen som du lagt under bilden flödar nu in till vänster om bilden.
Lägg eventuell rubrik i en egen textmodul ovanför bilden, så att rubriken inte hamnar bredvid (utan ovanför) bilden.
- (Du kan antingen skapa en ny textmodul för rubriken och lägga den textmodulen ovanför bilden, eller dela den befintliga textmodulen och se till att den övre bara innehåller rubriken. Som vanligt kan man "dra och släppa" modulerna till den plats man vill ha dem på.)

Så här behöver textmodulerna ligga i innehållsträdet för att eventuell rubrik ska visas ovanför den flödade bilden.

Så här ser det ut i redigeringsytan när man lagt rubriken i en egen textmodul med rubrik ovanför bilden, och brödtexten under den flödade bildmodulen.

Varför ska man inte lägga rubriken bredvid den flödande bilden?

Kort svar: Det blir inte bra. Se bilden nedan:

Om man lägger en H2-rubrik bredvid en flödande bild blir det inte bra. Linjen under rubriken går in i bilden, och det blir som en tom rad ovanför rubriken.

Information om alternativtext

Alternativtext (alt-text) är den text som läses upp för personer som inte kan se webbsidan. Den syns alltså inte visuellt på sidan, men uppfattas av skärmläsare som läser av sidan.

I Sitevision kallas alternativtext ibland för ”Bildbeskrivning”.

När bör man inte lägga in alt-text?

Bilder som enbart är dekorativa ska den inte ha alternativtext (alt-text). Om man inte lägger in alt-text så hoppar skärmläsaren över att läsa upp bilden och dess bildtext.

Lägg inte in fotografens namn som alt-text, för då syns det inte på sidan. Fotografens namn skriver du i fältet Bildkälla, då blir det synligt under bilden.

Information om bildtext

Bildtexten syns under bilden.

Tidigare har riktlinjen varit att alltid lägga fotografens namn som bildtext, men sedan hösten 2025 finns det ett nytt fält: "Bildkälla" så nu är det där som man lägger fotografens namn.

Information om bildkälla

I fältet Bildkälla ska du alltid lägga in fotografens (eller upphovspersonens) namn. Skriv Foto [Förnamn Efternamn], exempelvis ”Foto: Eva Dalin”.

Texten som du fyller i som bildkälla visas under bilden, efter eventuell bildtext som du lagt in. För besökaren ser bildkällan ut som vanlig bildtext.

Ett exempel på en bild som har bildtext och bildkälla under bilden.

Bilder på kurs- och programsidor

I instruktionerna som hör till utbildningskatalogen finner du information om hur du lägger upp bilder på kurs- och programsidor:

Toppbild i utbildningskatalogen