Bilder på personer
Här kan du läsa om hur du ställer in visningen av bilder på personer som används i kontaktkomponenter som t.ex. Kontaktlista.
Når du benytter komponenten Kontaktliste vises en række billede af personer. Disse skal beskæres, så de passer i visningen. I denne artikel følger råd for opsætningen af billeder af personer til visning på filtreringssider.
Alle billeder i Mediearkivet kan blive brugt på hele hjemmesiden og af alle komponenter, som indeholder et billede.
Obs! Denne guide tager kun udgangspunkt i de crops/visninger der bliver brugt på filtreringssider samt tilhørende artikelsider. Vær derfor opmærksom på, om billedet skal bruges andre steder end de visninger, vi fører dig igennem her, for at sikre dig at billedet ikke bliver beskåret dårligt i andre komponenter.
Går du ind for at redigere et billede i Mediearkivet, vil du kunne se alle de beskæringer/visninger, som bruges af de komponenter, der indeholder billeder. Det er her du kan se, om dit billede passer godt ind i de gældende formater. De formater, billedet ikke vil kunne passe ind i, er: top hero, top hero large, banner, banner large og tablet banner. Dette betyder at billedet ikke ville kunne blive brugt i hero-komponenter eller banner-komponenter uden at dele af personens ansigt vil blive afskåret.
Billedet nedenfor viser forskellige beskæringer/visninger af et portrætbillede, og som du kan se bliver personen kun afskåret i de visninger der tilhører hero og banner komponenter:
Til dig som har behov for præcise mål til tilpassning af et portrætbillede, har vi her lavet et eksempel man kan følge. I eksemplet skal man bruge til at skabe rum omkring personen i billedets ansigt, så det ikke er personen i billedet der blive beskåret, men kun det rundt om personens ansigt.
For at sørge for at personens ansigt ikke blive beskåret på filtreringssiden og på personens artikelside skal whitespace på top og bund af billedet være minimum 27% af hele billedets højde og whitespace på siderne (venstre/højre) være minimum 35% af hele billedets bredde.
Billedet nedenfor viser minimum whitespace et portrætbillede skal have for ikke at blive afskåret en del af ansigtet:
Tommelfingerregel:
- Whitespacen i top og bund skal være lidt under en trejdedel af hovdets højde.
- Whitespacen til højre og venstre skal være lidt over en trejdedel af hovdets bredde.
Nye billeder:
Hvis i skal have taget nye fotos til en personside og filtreringsside, kan i følge guiden ovenover vedrørende 'Mål til tilpasning af portrætbilleder'.
Billeder, som allerede er taget:
Hvis du allerede har nogle billeder du gerne vil tilpasse ud fra guiden ovenover, kan du følge med i dette eksempel. Vær opmærksom på at denne gennemgang kun vil fungere hvis jeres billeder har mere whitespace omkring personen end anbefalet, og ikke mindre.
Step 1: Find dit billede frem
I dette eksempel har jeg fundet er stockphoto-fotografi af en mand, som jeg ønsker at beskære så det passer til en personside og person-filtreringsside.
Dette billede har meget whitespace omkring personen, og jeg er derfor sikker på jeg kan lave den beskæring jeg ønsker.
Step 2: Beregn whitespace
Jeg har fundet min illustration af de forskellige procenter for minimum whitespace frem fra guiden ovenover, så jeg kan beregne whitespacen på mit billede.
Jeg kunne have forsøgt mig frem og lavet whitespacen i top og bund lidt under en trejdedel af ansigtets højde og whitespacen til højre og venstre lidt over en trejdedel af ansigtets bredde. Men jeg har i stedet valgt at lave en beregning på baggrund af de størrelser og procenter jeg kender.
Jeg kender alle procentsatser der skal være i mit billede (se procent illustration ovenover) og jeg kender højden og bredden på ansigtet af manden i mit billede efter jeg har målt det.
Hans ansigt er 226 pixel højt, hvilket svarer til 46% af min ønskede visnings højde, og 172 pixel bredt, hvilket svarer til 30% af min ønskede visnings bredde.
Beregningseksempel for at finde whitespace i top og bund:
Her skal jeg bruge højden af ansigtet som er 226 pixel, procentsatsen for højden af ansigtet som er 46% og procentsatsen for højden af det whitespace, som er 27%.
Beskrivelse:
- Højden af ansigtet divideres med procentsatsen for højden af ansigtet = resultat.
- Resultat ganget med procentsatsen for højden af whitespacen = whitespace der skal bruges til top og bund.
Berening til mit billede:
- 226 / 46% = 491
- 491 x 27% = 133
Jeg har brugt samme formel for at beregne whitespacen i bredden.
Resultat:
På billedet nedenfor har jeg markeret ansigtet med hvid, og markeret resultatet at min whitespace med gul. Den hvide konturstreg viser hvor jeg vil beskære mit billede.
Efter beskæringen ser mit resultat således ud og jeg kan nu tilføje mit billede til mediebibliotektet og tage billedet i brug.
Her er et mit billede vist i mediebibliteket: