AAU logo

Upload, indsæt og rediger billeder

BRUG AF BILLEDER I INFOGLUE

I InfoGlue vises alle billeder (på nær baggrundsbilleder) i artikler. Et billede skal altså indsættes i en artikel, før det kan vises på dit website

BILLEDER i Artikler

I artikler er der forskellige måder, hvorpå man kan tilknytte billeder. Man kan enten uploade og indsætte billeder manuelt eller uploade billeder, som automatisk vises øverst i artiklen. Herunder kan du læse mere om henholdsvis "image" (manuel indsætning) og "feature image" (automatisk indsætning).

IMAGE

Hvis et billede uploades som billedtypen "image", skal det efterfølgende indsættes manuelt i artiklen. Billeder, som uploades på denne måde, kan således placeres hvor som helst i artiklen. I vejledningerne herunder kan du finde hjælp til upload, indsætning og redigering af billeder af denne type.

Featured Image

Et "featured image" er et billede, som efter upload automatisk vises i toppen af artiklen. Placeringen af billedet er således fast. Dette kan du læse meget mere om i vores guide til "featured image".

Redigering af billeder

Husk at sørge for, at dine billeder har de rigtige størrelser, før du uploader dem i InfoGlue. I vores guide til billedstørrelser og basal billedredigering kan du bl.a. finde gode råd til beskæring og optimering af størrelse.

  • +

    BRUG AF BILLEDER I INFOGLUE

    I InfoGlue vises alle billeder (på nær baggrundsbilleder) i artikler. Et billede skal altså indsættes i en artikel, før det kan vises på dit website

    BILLEDER i Artikler

    I artikler er der forskellige måder, hvorpå man kan tilknytte billeder. Man kan enten uploade og indsætte billeder manuelt eller uploade billeder, som automatisk vises øverst i artiklen. Herunder kan du læse mere om henholdsvis "image" (manuel indsætning) og "feature image" (automatisk indsætning).

    IMAGE

    Hvis et billede uploades som billedtypen "image", skal det efterfølgende indsættes manuelt i artiklen. Billeder, som uploades på denne måde, kan således placeres hvor som helst i artiklen. I vejledningerne herunder kan du finde hjælp til upload, indsætning og redigering af billeder af denne type.

    Featured Image

    Et "featured image" er et billede, som efter upload automatisk vises i toppen af artiklen. Placeringen af billedet er således fast. Dette kan du læse meget mere om i vores guide til "featured image".

    Redigering af billeder

    Husk at sørge for, at dine billeder har de rigtige størrelser, før du uploader dem i InfoGlue. I vores guide til billedstørrelser og basal billedredigering kan du bl.a. finde gode råd til beskæring og optimering af størrelse.

  • +

    Billedstørrelser

    Nedenfor kan du se de forskellige billedstørrelser, der anvendes i AAU's webdesign. Du kan også læse hvordan de forskellige billedstørrelser bedst anvendes.

    BAGGRUNDSBILLEDER

    Bredde: 1440 pixels
    Højde: 900 pixels

    Stort billede

    Et stort billede har en bredde på 650 pixels og en højde på 350 pixels, som vist nedenfor. Denne billedstørrelse anvendes også til featured image. Et stort billede passer til en artikel, som er indsat i komponenten til venstre i en 4:2 sektion. Læs mere om sektioner.

    • Bredde: 650 pixels
    • Højde: 350 pixels

    stort billede

    Mellemstort billede

    Et mellemstort billede har en bredde på 278 pixels og en højde på 154 pixels, som vist nedenfor. Denne billedstørrelse anvendes også til featured image. Et mellemstort billede passer til en artikel, som er indsat i komponenten til højre i en 4:2 sektion eller en komponent i en 2:2:2 sektion.

    • Bredde: 278 pixels 
    • Højde: 154 pixels

    mellemstort billede

    Lille billede

    Et lille billede har en bredde på 278 pixels og en højde på 77 pixels, som vist nedenfor. Denne billedstørrelse anvendes også til "featured image" og "featured image small". Et lille billede passer til en artikel, som er indsat i komponenten til venstre i en 4:2 sektion eller en komponent i en 2:2:2 sektion.

    • Bredde: 278 pixels 
    • Højde: 77 pixels

    lille billede

    3:3 - Sektion billeder

    Et billede til en 3:3-sektion skal være 450 pixels bredt for at fylde hele bredden af en artikel-komponent i sektionen. Der skal ikke nødvendigvis være nogen specifik højde på billedet, da det er bedre at fastholde billedets originale format fremfor at forvrænge billedet. Det anbefales dog, at billedet ikke er højere end 350 pixels.

    • Bredde: 450 pixels
    • Højde: 300 pixels

    fuld bredde (single column)

    Har du indsat en artikel i en single coloumn sektion, skal billedet have en bredde på 950 pixels. Højden er valgfri. Skal billedet fungere som et banner på siden, anbefaler vi en højde mellen 50 og100 pixels. Bemærk hvis du ønsker at lave et billede (fx et banner), uden hvid margen, så skal billedet have en bredde på 966 pixels.

  • +

    Basal billedredigering: Beskæring af billeder

    Når et billede beskæres til en af de ovennævnte billedstørrelser, er det vigtigt at sørge for, at billedet bliver beskåret korrekt. Nedenfor er der vist et eksempel på et billede, der er beskåret korrekt, og et der er beskåret forkert:

    beskær billede korrekt

    En dårlig beskæring kan skyldes, at man ikke har bevaret billedets proportioner under beskæringen, eller at man ikke har valgt at reducere billedets størrelse inden beskæring.

    En anden vigtig regel er, at man altid kan formindske et billede, men at man aldrig kan forstørre et lille billede. Gør man dette, vil billedet blive grynet og utydeligt, som vist nedenfor:

    beskær billede korrekt

    sådan beskærer du et billede korrekt

    Nedenstående vejledning guider dig igennem tilpasning af billedets størrelse - først ved hjælp af reducering og herefter ved hjælp af beskæring.

    Guiden tager udgangspunkt i et gratis online billedbehandlingsprogram, Pixlr, som du kan tilgå via linket her: pixlr.com/express. Programmet kan tilgåes via en browser og skal derfor ikke installeres på din computer. Vær opmærksom på at ITS ikke supporterer programmet.

    1. Åben en browser (Firefox, Chrome eller lign.) og gå til siden https://pixlr.com/express
       
    2. Klik på "Browse" ikonet. Et nyt vindue åbner
       
    3. Find og marker billedfilen på din computer og klik på "Åben"
       
    4. Klik nu på "Adjustment" ikonet nederst til venstre, som vist nedenfor:

    størrelsesjustering pixlr.com

    1. En ny menulinje åbner sig. Klik på ikonet "Resize", som vist nedenfor:

    resize billede pixlr.com

    1. En værktøjslinje åbner sig under billedet, som vist nedenfor:

    ændre bredde og højde pixlr.com

    1. Du kan nu ændre bredden (width) - eksempelvis til 650. Knappen "Keep proportions" skal være blå som vist i ovenstående billede, for at billedet bevarer sine proportioner. Dette betyder at højden (height) tilpasses efter den indtastede bredde.
       
    2. Tryk på "Apply"
       
    3. Menulinjen åbner nu igen. Klik på ikonet "Crop", som vist nedenfor:

    crop billede pixlr.com

    1. En værktøjslinje åbner sig under billedet, som vist nedenfor.

    værktøjslinje pixlr.com

    1. Bredden (width) og højden (height) sættes nu til den ønskede størrelse - eksempelvis 650 x 350
       
    2. Kassen over billedet ændrer nu størrelse. Hold venstre musetast nede på billedet, mens du flytter billedet til det ønskede udsnit, som vist nedenfor:

    crop vindue pixlr.com

    1. Tryk på "Apply"
       
    2. Klik på ’Save’ øverst i venstre hjørne
       
    3. Du kan nu vælge hvor meget billedet skal fylde. Som vist i illustrationen nedenfor kan du under bjælken se hvor stort billedet er. For at ændre på størrelsen skal du trække den hvide streg på bjælken mod venstre (mindre) eller højre (større). Billeder, som uploades i artikler må maks. fylde 150 kb. Baggrundsbilleder må maks. fylde 500 kb.

      vælg billede kvalitet pixlr.com
       
    4. Klik på "Save"
       
    5. Et nyt vindue åbner. Du skal nu bestemme, hvor på din computer billedet skal gemmes.
       
    6. Tryk på "Gem" når du har valgt en placering
  • +

    Basal billedredigering: Optimer billedets størrelse

    Billeder kan fylde meget og det er vigtigt at komprimere dem, så dine websider ikke tager for lang tid om at indlæse. Følgende vejledning tager udgangspunkt i et program, som du kan installere på din computer for at komprimere billeder uden kvaliteten falder. Vær opmærksom på at ITS ikke supporterer programmet.

    1. Åbn en browser (Firefox, Chrome eller lign.) og gå til siden http://www.sourceforge.net/projects/nikkhokkho/files/FileOptimizer
       
    2. Klik på ’Download FileOptimizerSetup.exe’ under navigationsbjælken
       
    3. Filen bliver hentet (hvis du bruger Internet Explorer, skal du sørge for at bekræfte hentningen i bundbjælken)
       
    4. Åbn filen

      4.1. Chrome: Klik på filen "FileOptimizerSetup.exe" i bundbjælken
      4.2. Firefox: Klik på pil-ikonet oppe til højre og dobbeltklik på filen "FileOptimizerSetup.exe" i listen
      4.3. Internet Explorer: Klik på "Kør" i bundbjælken hvor du tidligere bekræftede hentningen
       
    5. I første installationstrin vælges placeringen af programmet. Afslut ved at klikke på "Install"
      fileoptimizer installationstrin
       
    6. Programmet installeres nu på din pc. Afvent at bjælken bliver grøn og får teksten "Completed". Klik på "Close"

      setup complete
       
    7. Åbn programmet enten ved brug af genvejen "FileOptimizer" på skrivebordet eller ved at gå i "Alle Programmer"
       
    8. Programmet kræver ingen indstillinger, og fungerer ved simpelt "drag-and-drop" princip. Det vil sige, at du tilføjer dine filer ved at trække dem over i listen. Afslut ved at klikke på "Optimize all files"

      programmet fileoptimizer

      Vær opmærksom på at de optimerede billeder fra programmet erstatter de oprindelige billeders placering. De oprindelige billeder placeres i papirkurven. Hvis du ved en fejl har trukket de forkerte billeder over i programmet og sat proceduren i gang, skal du sørge for at trække dem ud af papirkurven, før du genstarter eller slukker pc’en.
       
    9. De optimerede billeder har nu erstattet de oprindelige billeders placering på din computer. 
  • +

    Upload og indsæt billede (image) i artikel

    Billeder skal have sigende navngivning ift. hvad billedet viser  

    Billeder skal have insat alternativ tekst og advisory titel således de kan læses af skærmlæsere jf. webtilgængelighedsloven.
    NB: Advisory titel er kun nødvendigt at indsætte på billeder, der har betydning for forståelsen af en given tekst eller område den er relateret til. Har billeder kun et dekorativt formål behøves der ikke at blive tilføjet en advisory titel der beskriver billedets indhold

    1. Stå i fanebladet "Content"
       
    2. Find den artikel, hvori du vil indsætte et billede
       
    3. Placer markøren på det sted i din tekst, hvor du vil indsætte billedet
       
    4. Klik på ikonet "image" i værktøjslinjen, som vist herunder:  
       

       
    5. Et nyt vindue, "Image Properties", åbner. Klik på knappen "Browse Server"
       
    6. Et nyt vindue, "Choose file to use" åbner. Klik på knappen "Upload new file" i midten, nederst i vinduet
       
    7. Vinduet "Upload file" åbner. Klik på "Vælg fil / gennemse" 
       
    8. Find og vælg et billede på din computer. Klik herefter på "Save and exit"
       
    9. Klik på billedet og vælg "Use marked"
       
    10. I feltet 'Alternative Text' giver du billedet en beskrivende titel. Det er vigtigt, at denne titel beskriver, hvad der ses på billedet:*
       

    11. I feltet "Advisory Title" (under fanen "Advanced") skal du indsætte den samme beskrivende titel. "Advisory Title" popper op ved mouseover - det vil sige, at man kan se denne titel, når man holder musen henover billedet.*
       
    12. Klik på "OK". Billedet er nu indsat i teksten
       
    13. Klik på "Save" for at gemme det indsatte billede og husk at publicere ændringerne

    *punkt 11  SKAL udføres for at billedet lever op til EU lovgivningen om webtilgængelighed, hvis billedet har betydning for konteksten.

  • +

    indsæt billede, som er uploadet i en anden artikel

    1. Stå i fanebladet "Content"
       
    2. Find den artikel, hvori du vil indsætte et billede
       
    3. Klik på ikonet "Image" i værktøjslinjen:
       
    4. Et nyt vindue, "Image Properties", åbner. Klik på knappen "Browse Server"
       
    5. Et nyt vindue, "Choose file to use" åbner. Klik på knappen "Browse contents":
       
    6. Vælg det ønskede repository og mappe, som billedet er gemt i
       
    7. Klik på det billede der kommer frem i midten, under "Associated files"
       
    8. Klik på "Use marked"
       
    9. Klik på "OK"
       
    10. Klik på "Save"
       
    11. Du har nu indsat et billede fra en anden artikel
  • +

    Rediger billede eller opdater et allerede indsat billede

    For at redigere eller opdatere et billede, der allerede er indsat i en artikel, kan du gøre følgende:

    1. Stå i fanebladet "Content"
       
    2. Find den artikel, hvori du vil redigere billedet
       
    3. Højreklik på billedet og klik på "Image Properties":
       

       
    4. Vinduet "Image Properties" åbner. Klik på "Browse Server"
       
    5. Vinduet "Choose file to use" åbner. Under billedet, der skal opdateres, skal du klikke på ikonet med de to blå pile, som vist på billedet nedenfor:
       
    6. Vinduet "Upload attachment" åbner. Klik på "Vælg fil/Gennemse"
       
    7. Find og vælg et billede på din computer. Klik herefter på "Save and exit"
       
    8. Klik på "Use marked" og herefter "OK"
       
    9. Gem ændringen ved at klikke på "Save" og husk at publicere dine ændringer
  • +

    Gode råd om billeder

    Billeder i teksten kan tjene til at visualisere nogle af de budskaber, projekter eller faciliteter, som du gerne vil fortælle om på dit website. Relevante billeder på hjemmesiden kan være et godt supplement til teksten og kan sammen med gode overskrifter og links bidrage til, at brugere og søgemaskiner nemmere kan lokalisere relevant indhold. 

    Navngivning

    Når du indsætter billeder i dine tekster, er det vigtigt at navngive dine billeder med en beskrivende titel både ift. at optimere billedet mød søgemaskiner og webtilgængelighed. I mange tilfælde giver man billeder interne navne eller forkortelser som f.eks. "img-aau02". Problemet med denne type navngivning er, at titlen ikke fortæller særligt meget om, hvad billedet forestiller, og det gør det svært, hvis ikke umuligt, for søgemaskiner at finde dette indhold på hjemmesiden. Kald i stedet dit billede "AAU Hovedindgang - Fredrik Bajers Vej".

    Størrelse

    Vær opmærksom på billedernes størrelse, da store billede kan påvirke sidens loadtid, og dette kan have indflydelse på sitets rangering i søgemaskinerne. Dette gælder både baggrundsbilleder og billeder i tekster.

    Billeder med tekst

    Undgå gerne billeder med tekst på sig, da tekst på billeder er ikke søgbar.

    Responsive billeder og mouse over tekst

    Billeder skal være reponsive forstået således, at de tilpasser sig den skærmstørrelse brugeren anvender. Dette sker ikke automatisk på billeder indsat i en 'full text' feltet i en artikel. Derudover skal billeder også have insat alternativ tekst og advisory titel således de kan læses af skærmlæsere jf. webtilgængelighedsloven. Det er lettest at ordne alle 3 ting i samme rettelse (trin 10, 11 og 12 i guiden upload af billeder i artikler)

    NB: Advisory titel er kun nødvendigt at indsætte på billeder, der har betydning for forståelsen af en given tekst eller område den er relateret til. Har billeder kun et dekorativt formål behøves der ikke at blive tilføjet en advisory titel der beskriver billedets indhold

It services
Opret, rediger og indsæt indhold i artikler