Læg billeder på din side

Her kan du lære, hvordan du indsætter billeder eller grafik på din side. Billeder og grafik kan gøre dit budskab tydeligere og mere interessant — men de skal bruges med omtanke. Før du tilføjer et billede, bør du altid spørge dig selv:

  • Fortæller billedet brugeren noget og har det en funktion for siden? Billeder og grafik bør ikke blot bruges som fyld.
  • Vurder, om det giver mening at vise din grafik på f.eks. en smartphone, eller om den skal skrives som tekst i stedet.
  • Tjek altid, hvordan dine billeder ser ud i responsivt design, hvis du ønsker dem præsenteret på en bestemt måde. 

Hvis du vil bruge dit billede i et grafisk element, så se vejledningen Bannere og knapper

Indsæt billeder

1. Klik på knappen + Create new content eller + Content for at tilføje et nyt element. Herefter vises de forskellige elementer, man kan indsætte på siden.


2. For at indsætte billeder på siden kan du enten vælge elementet Text & Images (Tekst og billeder), elementet Images Only (Billeder) eller Text & Media (Tekst & medier).


3. For at tilføje billeder på siden, skal du vælge fanen Images (Billeder) i det element, du har valgt. 

OBS. Før du uploader til TYPO3, bør du reducere billedets størrelse i et billedbehandlingsprogram. Billedet må max være 1 MB. For store billeder gør din hjemmeside langsom, trækker ned i Googles søgeresultater og har et stort klimaaftryk. 

4. Anbefalet metode: Klik på Add image (Tilføj billede) for at bruge et billede fra fillisten i TYPO3 via file selectoren (filvælgeren). Der er 2 fremgangsmåder:

  • Billedet er uploadet i fillisten: Vælg den mappe, hvor billedet ligger, og klik på billedet for at indsætte det på din side.
  • Billedet er endnu ikke uploadet i fillisten: Vælg den mappe i fillisten, du ønsker at gemme billedet i. Klik på Vælg filer (4a) nederst til højre i File selectoren (Filvælgeren). Vælg billedet fra stifinderen på din computeren, og klik herefter på Upload files (4b). Nu kan du klikke på det billede, du lige har uploadet, for at indsætte det på din side. 

Denne metode anbefales. Når du uploader billeder i fillisten, har du overblik over alle billeder, der er brugt, og du og andre redaktører kan nemt genfinde og genbruge dem. 

5. Alternativ metode: Klik på Select & upload files (Vælg og upload filer). Her er det muligt at vælge et billede direkte fra stifinderen på computeren og uploade det. Billeder uploaded på denne måde bliver automatisk lagt i mappen ingen_mappe_valgt.

Denne metode anbefales ikke. Når du uploader filer i ingen_mappe_valgt, mister du overblikket over billederne, og det er svært at finde dem igen.

Læs mere om filer og fillisten i TYPO3

Position, størrelse, metadata

Når du har indsat dit billede i fanen Images (Billeder), er du klar til at vælge position, skrive billedtekst osv.

  1. File name (Filnavn): Når et billede er uploadet, kan du i den grå bjælke se filnavnet på den uploadede fil. Efter klik på Gem, dukker der flere ikoner op i den grå bjælke. Længst til højre på bjælken kan du klikke på skraldespandsikonet for at slette billedet eller skjule billedet ved at klikke på knappen Skjul element. Ikonet med de tre små streger gør det muligt at flytte rundt på billederne på siden (vha. træk-og-slip). Et klik på i vil åbne et overlay med mere information om billedet. Undlad at klikke på blyanten.
  2. Alternative Text (Alternativ tekst): Alternativ tekst skal udfyldes af alle offentlige institutioner, medmindre dit billede kun er til pynt, så skal du ikke udfylde en alternativ tekst. Markér feltet Set element specific value (Angiv specifik elementværdi) og giv billedet en alternativ tekst. Teksten er ikke synlig i frontend, men bruges af søgemaskiner til at indeksere billeder og af hjælpeprogrammer til f.eks. svagtseende. Det skal ikke være en lang tekst, men en kort og præcis beskrivelse af, hvad der sker på billedet. Hvis der er link på billedet (pkt. 4), skal det også stå i Alternativ tekst.
  3. Description (Beskrivelse): Også kaldet Caption. Markér feltet Set element specific value (Angiv specifik elementværdi) for at kunne skrive i feltet. Beskrivelsen bliver vist lige under billedet i frontend. Det kan være en kort beskrivelse af billedet og kreditering af fotografen, f.eks. "Foto: Lars Kruse, Aarhus Universitet".
  4. Link: I feltet Link kan du indsætte forskellige typer af links. Du kan fx indsætte en URL til en side. Når man klikker på billedet i frontend, vil man blive ført til den pågældende side. Du kan skrive URL'en i feltet eller klikke på den lille blyant for enden af feltet. Når du klikker på blyanten, vil du også få mulighed for at indsætte link til en side i dit sidetræ, til en fil fra fillisten eller til en mailadresse. NB! Hvis du indsætter et link, vil funktionen Enlarge on Click (Forstør ved klik) blive deaktiveret.
  5. Title (Titel): Teksten i feltets titel ser vi i frontend, når vi holder musen over billedet. Der kan f.eks. stå en kort beskrivelse og hvad der sker, hvis man kan klikke på billedet.
  6. Image manipulation (Billedmanipulation): Du kan åbne billededitoren og læse videre i vejledningen Beskær billeder.
  7. Media Adjustments (Mediejusteringer): Skal billedstørrelsen ændres fra den størrelse, billedet er uploadet i, udfyldes felterne Width (bredde) og Height (højde) med tal i pixels (px). Indtaster du en bredde, tilpasser højden sig proportionelt og omvendt. Indtast derfor ENTEN bredde ELLER højde.
  8. Gallery Settings (Galleriindstillinger): Har du valgt elementet Text & Images, kan du under Position og justering placere dit billede i forhold til din tekst.
  9. Enlarge on click (Forstør ved klik): Har du slået til denne funktion til, kan du i frontend klikke på billederne og få dem vist i en større størrelse. Visningen afhænger af, hvilken størrelse du uploadede dit billede i, men vises i maks. 800 px bredde. NB! Hvis du indtaster links på et billede i linkfeltet, deaktiveres funktionen Enlarge on Click (Forstør ved klik).

Vis ikke (eller vis kun) billede i responsivt design

Tjek altid, hvordan dine billeder ser ud i responsivt design, dvs. på mindre skærme som mobiltelefoner. Hvis dit billedes dimensioner gør det svært at vise optimalt i responsivt design, kan du under fanebladet Appearance (Udseende) vælge mellem to muligheder:

1. Vis kun billedet i responsivt design.

2. Vis ikke billedet i responsivt design.

Eksempel: Du opretter to elementer med hvert sit billede. Det ene vises kun i responsivt design og ses altså ikke på desktop. Det andet vises ikke i responsivt design og ses derfor kun på desktop. 

Eksempel: Du kan vælge ikke at vise billedet i responsivt design (fx hvis det alligevel bare er pynt).

Rettigheder til billeder

Husk at sikre dig, at du har de nødvendige rettigheder til de billeder, du lægger på din hjemmeside. Det er vigtigt, da brugen af billeder på nettet er underlagt ophavsretsloven. Læs mere om de faldgruber der kan være i brugen af billeder under sektionen om ophavsret.