Bilder och bildstorlekar

Den bild du använder som huvudbild i en nyhetsartikel kan också användas i en listning av flera nyheter. På en plats kan en bild användas med vissa proportioner, medan en något annorlunda beskärning kan användas i ett annat sammanhang. Dessa beskärningar görs automatiskt av Drupal, och därför är det viktigt att du laddar upp bilder som är tillräckligt stora för att klara av de olika storlekarna.

Rekommenderade bildstorlekar – generella

Då det inte finns exakta mått eller lösningar för varje bild och sida på LU:s alla sajter i Drupal, rekommenderar vi att ni testar er fram. Och använd liggande bilder i största möjliga mån då det är ett bättre format för webb, dessa kan ni sedan beskära till stående eller kvadratiska om behovet finns.

• För panoramabilder (tar upp hela bredden på sidan) 3840 pixlar i bredd.
• För bilder i fullbredd, som t.ex. i bildspel, rekommenderar vi ca 3000 pixlar i bredd och använd då liggande bilder i största möjliga mån.
• För övriga bilder i kolumner och body rekommenderar vi bredden 1500 pixlar på bilder för bästa upplösning. Börja att testa med denna storlek först, och minska eller öka vid behov.

Layout-läge

Bilderna påverkas av val av kolumner och sektioner i Layout/"layout-läge" i Drupal. Det är bäst att testa sig fram och tänka på att det bredden på bilden påverkas av kolumnens bredd. Tänk dock på att kolumnerna med bokstaven C: (1500 pixlar i bredd på bilden nedan med i bredd) inte passar med alla bilder, utan testa er gärna fram.

A: Panorama= 1 kolumn full width = 3840 pixlar i bredd.
B: Fullbredd= 1 kolumn 12 = 3000 pixlar i bredd.
C: Resten av kolumnerna= börja med 1500 pixlar i bredd.

Man kan tänka att sidan är uppdelad i 12 delar. 3/12 delar är en smal kolumn.
Kolumnen påverkar hur bilderna beskärs i de olika boxarna/elementen. 

I smala kolumner (3/12 delar av sidan) är det en bra idé att beskära bilden så snävt som möjligt:

Om bilden är för stor kan den beskäras helt fel i boxen. Om bilden beskärs fel, testa att minska bildens storlek i ett bildbehandlingsprogram, som exempel Photoshop eller Pixlr.

Testa även att lägga in en vit ram runt bilden i ett bildbehandlingsprogram, då beskärs ramen men inte bilden.

Här nedan ser ni ett exempel på olika boxar på rad på en sida, men beskärs olika beroende på box och kolumn-bredd:

Om bilden är stående, är det fortfarande bredden som styr beskärningen.
Om bilden beskärs vid 1500 pixlar i bredd, testa att minska bildens bredd, i ett bildbehandlingsprogram, till exempel 1000 pixlar eller 650 pixlar i bredd.

Edit-läge

I Edit/"editläget" kan man också lägga in bilder i bodyn:
•       Tryck på Media Embed Button.
•       Välj en bild.
•       Lägg till alternativ text, format: ”Beskrivning om vad bilden föreställer. Foto.”
•       Välj Full width image eller Half width image.
•       Välj Justering (beroende på vart ni vill bilden ska sitta på sidan).
•       Bildtext är frivilligt.
•       Bädda in.

Focal point och Images preview

Med Focal point kan man dra det vita krysset på bilden (se bilden nedan) som ska vara i centrum, och bilden beskärs i boxen därefter. Man markerar alltså den delen av bilden som är viktig och där focus ska ligga.

I Preview, eller Images preview, kan man se hur bilden ser ut på olika skärmar. Man kan alltså inte välja format här inne, utan är bara exempel på hur bilden kommer att visas på olika sätt för besökarna och på så vis få en uppfattning om slutresultatet.

Förslag på gratis bildbehandlingsprogram

• Affinity Photo hittar ni via Self Service (på er MAC-dator eller om du har PC maila LDC via servicedesk [at] lu [dot] se). Instruktionsvideos och kurser för Affinity Photo finns på nätet.
• Pixlr är ett internetbaserat bildredigerings-program och är gratis: https://pixlr.com/se . Instruktioner finns på sidan och nätet.