Bildarkiv och hantering av bilder på Studentportalen

Owned by Frida Rudebo
Last updated: Oct 08, 2024
6 min read

Lokal webbredaktör, central webbredaktör och central lättredaktör har tillgång till Drupals dokumentbibliotek

Sidans innehåll

Om bilder

Du kan använda bilder på Studentportalen för att tydliggöra information eller ett budskap. Vi är dock restriktiva med användningen av bilder. Tänk alltid efter innan du väljer att publicera en bild, tillför bilden verkligen något till ditt innehåll? Om inte kan det vara relevant att inte lägga till en bild eftersom mycket bilder kan göra sidor röriga och svårnavigerade.

Du ska alltid följa den grafiska profilen för bilder och helst använda bilder i Bildbanken.

Förstå hur du arbetar med bilder på Studentportalen

På Studentportalen finns ett gemensamt bibliotek där alla redaktörer laddar upp sina bilder. Bilderna i biblioteket kan sen publiceras i olika bildkomponenter. Du når bildbiblioteket via ‘Innehåll’ > ‘Bildbibliotek’.

Det finns möjlighet att publicera bilder på alla sidtyper på Studentportalen. På de flesta sidor används bildkomponenten i Studentportalens texteditor (programsida, organisationssida, lokalt innehåll). På sidor med layout builder (genomgångssidor och informationssidor) finns även möjlighet att använda en separat komponent för bild.

Screenshot 2024-10-08 at 09.31.31.png

Riktlinjer

Innan du publicerar är rekommendationen att du läser genom våra riktlinjer för publicering som gäller för universitetets centrala webbplatser.

En alt-text ska kunna ersätta och beskriva bilden för den som inte ser bilden. Det kan handla om en besökare som använder ett uppläsande hjälpmedel, när en sökmotor indexerar sidan eller om bilden inte finns på servern längre.

En alt-text ska förmedla informationen i bilden. Du ska inte skriva “bild/foto av” och alt-texten ska inte vara samma som bildtexten. Till exempel kan alt-texten till bilden nedan vara: Student sitter vid en studieplats och skriver i ett anteckningsblock.

GU_student_Humanisten-39.jpg

Du ska alltid skriva en alt-text, så länge bilden inte är dekorativ. Det kan vara svårt att veta när en bild är informationsbärande eller dekorativ. Ett tips är att om du skulle beskriva innehållet på sidan för någon och du helt hoppar över bilden så är den troligen dekorativ. Beroende på informationen på en sida kan bilden i exemplet ovan vara dekorativ och därför ska alt-texten vara: <none>

Tips på hur du beskriver innehåll som inte är text med text på DIGGs hemsida

Bildtext ska inte blandas ihop med alt-text. Medan alt-texten ska förmedla informationen i bilden, ska en bildtext förklara motivet och sambandet till informationen på sidan. Dessa två ska därför aldrig vara samma text.

Till exempel kan bildtexten till bilden nedan vara: Göteborgs universitets huvudbyggnad i Vasaparken. Medan alt-texten till en sådan bild istället skulle vara: Stenbyggnad där det står Göteborg universitet ovanför ingången, alternativt <none> om den endast är dekorativ.

Text i bild gör det svårare för besökare att ta del av innehållet, till exempel kan text i bild inte läsas upp av en skärmläsare vilket gör att besökare som använder det inte får tillgång till texten i bilden. Ett annat exempel är att text i bild blir svårläst i mobiltelefon och kan lätt bli pixlig om du zoomar in.

På grund av det här ska vi inte använda bilder med text på http://gu.se utan istället presentera text som text och bilder som bilder. De enda undantagen från detta är:

  • Bild på organisationsschema, processkartor eller flödesschema. I de här fallen är det dock viktigt att du i samma sektion sammanfattar innehållet i bilden med hjälp av text. Till exempel:

  • Logotyper

Använd text, inte bilder av text, för att visa text, DIGGs hemsida

Undvik att ladda upp bildcollage. Webbsidan kommer att anpassa bilden efter det format den visas upp på och det ser olika ut beroende på vilken skärmstorlek besökaren har. Collaget kan komma att beskäras på ett sådant sätt att bilden inte visas som tänkt.

Bilder anpassas och beskärs automatiskt beroende på placering på webben och mottagarens skärmupplösning. Bilderna behöver både vara fotograferade och laddas upp med utzoomat utsnitt istället för att tänka vilken placering/format bilden ska ha. Välj en fokuspunkt på bilden. Högsta bildstorlek är 50 MB.

Bilder med lägst:

  • bredd 2656 pixlar 

  • höjd 1770 pixlar

OBS! Bilder har ett maxmått på 6500x6500 pixlar

Du kan undvika beskärning av bilder för nyheter och informationssidor. För nyheter ska du välja ett bildformat som inte beskär bilden t ex "Bildkomponent: Medium (No crop)". För bilder som placeras i en informationssektion via komponenten "Bild" kan man kryssa i rutan "Beskär ej" för att förhindra att bilden beskärs. 

Bildens visningsyta på desktop

Bilderna är olika stora beroende på din skärmstorlek och upplösning på din skärm.

Toppbild

  • Startsidor: 2656 x 1062 (5:2 proportion, visas samma på mobil)

  • Infosida: 2656 x 796 (10:3 proportion, visas samma på mobil)

Nyheter och evenemang

  • Fullbredd: 2656 x 1328

  • Large (högerställd) 2144 x 1286

Puffar

  • Fullbredd megapuff 2656 x 1000

  • Sektion fullbredd bild (infosidor) 2656 x 1280

  • Sektion bild enspalt 2016 x 800

  • Sektion två spalt 33%: 659 x 470

  • Sektion två spalt 66%: 1337 x 802

  • Bild i brödtext 1152 x 650

Lägg till en ny bild i bildbiblioteket

Blev det något fel med bilden som du laddade upp? Ladda inte upp din nya bild utan byt istället ut den befintliga uppladdade bilden mot rätt bild.

  1. I redaktörsgränssnittet lägger du till en ny bild genom att klicka på ‘Innehåll’ och därefter ‘Bildbibliotek’.

  2. Dubbelkolla alltid att bilden du ska ladda upp inte radan ligger uppladdat genom att söka i bildbiblioteket.

  3. Finns inte bilden klickar du på knappen ‘+ Lägg till bild’.

  4. Nu öppnas ett adminformulär där du bland annat laddar upp din bild och anger titel:

    1. Titel*: Skriv in titeln på bilden. Försök skriva en så tydlig titel som möjligt som förklarar vad det är för bild, det blir lättare när du ska försöka hitta bilden igen.

    2. Lägg till ny fil*: Ladda upp bilen genom att klicka på ‘Välj fil’.

    3. Fotograf: Ange fotograf om relevant för bilden (inget krav)

    4. Nyckelord: Måste inte fyllas i, men kan användas för att göra det enklare för dig att hitta bilden i bildbiblioteket.

    5. Kategorier*: Du måste välja en kategori. Det gör det enklare för dig att hitta bilden i bildbiblioteket.

  5. Klicka på ‘Spara’..

Redigera redan uppladdad bild i biblioteket

  1. I redaktörsgränssnittet klickar du på ‘Innehåll’ och därefter ‘Bildbibliotek’.

  2. Sök fram den bild du vill redigera, genom att söka efter Titel, filtrera på kategori eller ange nyckelord.

  3. Klicka på ‘Redigera’ för den bild du vill redigera.

  4. Nu öppnas ett adminformulär där du kan göra ändringar i bilden:

    1. Titel*: Ändra titel

    2. Bild*: Ta bort och ladda upp en ny bild.

    3. Fotograf: Ändra fotograf om relevant för bilden (inget krav)

    4. Nyckelord: Måste inte fyllas i, men kan användas för att göra det enklare för dig att hitta bilden i bildbiblioteket.

    5. Kategorier*: Du måste välja en kategori. Det gör det enklare för dig att hitta bilden i bildbiblioteket.

  5. När du är klar klickar du på ‘Spara’.

Publicera bild i Studentportalens texteditor

  1. Gå till den sida / det lokala innehåll där du vill publicera en bild.

  2. I texteditorn klickar du på ikonen för bildhantering (blåmarkerad i bilden nedan).

  3. Du kan nu bläddra bland existerande bilder i bildbiblioteket. Sök fram den bild du ska publicera genom att söka efter Titel, filtrera på kategori eller ange nyckelord i bildbiblioteket. (Du kan även välja att ladda upp en ny bild till bildbiblioteket).

  4. När du har valt bild klickar du på ‘Välj bilder’.

  5. Nu får du göra vissa inställningar för hur bilden ska visas på sidan:

    1. Visa som: Bilder visas alltid i fullbredd, men du kan välja mellan:

      1. Bildkomponent: Medium = Bilden visas i fullbredd, men beskärs så att den har proportioner 512x341 (bredd x höjd).

      2. Bildkomponent: Medium (No crop) = Bilden visas i fullbred, och har kvar sina original-proportioner.

    2. Bildtext: Om nödvändigt, ange en text som förklarar bildens sammanhang.

      Alt-text*: Skriv <none> för dekorativ bild eller en tydlig beskrivning av informationen i bilden.

  6. Klicka sen på ‘Bädda in’.

Publicera bild i Layout builder

I sidor som redigeras med layout builder (genomgångssidor och informationssidor) är det möjligt att använda sig av komponenten bild. Observera att även går att publicera bilder direkt i texteditorn på dessa sidtyper.

  1. Klicka på ‘Lägg till komponent’.

  2. Klicka på ‘Bild’.

  3. Klicka på ‘Öppna bildbibliotek’.

  4. Du kan nu bläddra bland existerande bilder i bildbiblioteket. Sök fram den bild du ska publicera genom att söka efter Titel, filtrera på kategori eller ange nyckelord i bildbiblioteket. (Du kan även välja att ladda upp en ny bild till bildbiblioteket).

  5. När du har valt bild klickar du på ‘Välj bild’.

  6. Nu kan du göra vissa inställningar för hur bilden ska visas på sidan:

    1. Beskär inte bilden: Bilder visas alltid i full spaltbredd. Klicka i ‘Beskär inte bilden’ om du önskar att bilden ska ha sina ordinarie proportioner.

    2. Alt-text*: Skriv <none> för dekorativ bild eller en tydlig beskrivning av informationen i bilden.

    3. Bildtext: Om nödvändigt, ange en text som förklarar bildens sammanhang.

  7. Klicka på ‘Lägg till komponent’.