Bilde
Vis visuelt innhold som bilder, skjermbilder, illustrasjoner og grafikk
Bruk
Bruk bilder og illustrasjoner for å fremheve poeng eller illustrere begreper som er vanskelige å forklare med tekst.
Anatomi
- Bilde: Foto, skjermbilde, illustrasjon eller grafikk.
- Alternativ tekst: Brukes av skjermlesere og vises dersom bildet ikke er tilgjengelig.
Beste praksis
Vi anbefaler å følge retningslinjene fra UUtilsynet.
- Legg til en alternativ tekst som forklarer bildet. Alt. tekst vil vises hvis bildet ikke er tilgjengelig og brukes av skjermlesere.
- Hvis et bilde er rent dekorativt, er det best å ikke inkludere en alternativ tekst.
- Ikke bruk bilder for bildets skyld. Spør deg selv om bildet illustrerer et poeng eller øker forståelsen av det du prøver å fortelle.
- Sjekk om bildet skalerer godt på enheter som mobil eller nettbrett. Et bilde som ser bra ut på en PC kan raskt fylle en mindre skjerm. – Unngå å bruke bilder i stedet for tekst, da skjermlesere ikke kan lese det.
Veiledning for innhold
Hold alternative tekster konsekvente:
- Begynn aldri med “Bilde av …”
- Skriv kort og start med den mest essensielle delen av bildet. – Avslutt med å si om bildet er en illustrasjon eller grafikk.
Eksempel
Alt text: “Gammel trevogn. Fotografi.”
For flere retningslinjer og eksempler, se UUtilsynet.
Egenskaper
Følgende er en liste over tilgjengelige egenskaper for Bilde. Listen er automatisk generert basert på komponentens JSON schema (se link).
Required properties: id
,type
,src
,width
,align
Property | Type | Description |
---|---|---|
| string | The component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with <dash><number>. |
| string | The component type. |
| object | Text resource bindings for a component. |
textResourceBindings.altTextImg | string | Alternate text is read aloud to someone using assistive technology, but is hidden from a sighted user. |
| string | Align image Enum: [flex-start, center, flex-end, space-between, space-around, space-evenly] |
| object | Settings for the components grid. Used for controlling horizontal alignment. Example(s): {xs: 12} |
gridSettings.innerGrid | gridProps | Optional grid for inner component content like input field or dropdown. Used to avoid inner content filling the component width. Example(s): {xs: 12} See: gridProps |
gridSettings.labelGrid | gridProps | Optional grid for the component label. Used in combination with innerGrid to align labels on the side. Example(s): {xs: 12} See: gridProps |
| boolean | Boolean value or expression indicating if the component should be hidden. Defaults to false. |
| object | |
pageBreak.breakAfter | string | PDF only: Value or expression indicating whether a page break should be added after the component. Can be either: 'auto' (default), 'always', or 'avoid'. Example(s): auto ,always ,avoid |
pageBreak.breakBefore | string | PDF only: Value or expression indicating whether a page break should be added before the component. Can be either: 'auto' (default), 'always', or 'avoid'. Example(s): auto ,always ,avoid |
| boolean | Boolean or expression indicating if the component should be rendered as a summary. Defaults to false. |
| object | Image source |
src.en | string | English |
src.nb | string | Bokmål |
src.nn | string | Nynorsk |
| string | Image width Example(s): 100% |
Konfigurering
Legg til komponent
Grunnleggende bildekomponent:
App/ui/layouts/{page}.json
{
"$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
{
"data": {
"layout": [
{
"id": "komponent-id",
"type": "Image",
"image": {
"src": {},
"width": "100%",
"align": "center"
}
}
]
}
}
}
Alternativ tekst (textResourceBindings.altTextImg
)
Velg ‘Alternativ tekst for bilde’ i nedtrekksmenyen.
Klikk plusstegnet for å opprette en ny tekst eller forstørrelsesglasset for å velge en eksisterende tekstressurs.
Korresponderende innstillinger i sidens JSON-fil.
App/ui/layouts/{page}.json
{
"data": {
"layout": [
{
"id": "kommune-logo",
"type": "Image",
"textResourceBindings": {
"altTextImg": ""
},
...
}
]
}
}
Bildeinnstillinger (image
)
Kilde (image.src
)
Standardkilden er nb
; ethvert språk som ikke definerer en separat bildekilde vil bruke denne kilden.
Oppgi en annen språkkode og bildekilde for å legge til en kilde, som i eksemplet nedenfor.
Tilgjengelige språkkilder er en
(engelsk), nb
(norsk bokmål) og nn
(norsk nynorsk).
App/ui/layouts/{page}.json
{
"id": "kommune-logo",
"type": "Image",
"image": {
"src": {
"nb": "/testdep/flyttemelding-sogndal/kommune-logo.png",
"nn": "wwwroot/kommune-logo.png"
},
...
}
}
Bildekilden kan være ekstern eller lokal for appen.
For eksterne bilder er kilden bilde-URL (f.eks. https://examples.com/myImage.png
).
For å hoste et bilde i applikasjonen, plasser det i mappen App/wwwroot
(hvis mappen ikke eksisterer, kan du opprette den).
Statisk hosting må konfigureres manuelt for apper opprettet før desember 2021.
Et bilde plassert i App/wwwroot
kan refereres til på følgende måter:
- Ved å bruke dens relative URL:
/<org eller brukernavn>/<app-navn>/image.png
eller - Bruk av filstien:
wwwroot/image.png
. Filstien vil konverteres til bildets relative URL før bildet lastes inn.
Konfigurer statisk hosting
For apper opprettet før desember 2021 må statisk hosting konfigureres manuelt ved å legge til linjen
app.UseStaticFiles('/' + applicationId);
i metoden Configure
i App/Program.cs
som vist her:
App/Program.cs
void Configure()
{
...
app.UseRouting();
app.UseStaticFiles('/' + applicationId);
app.UseAuthentication();
...
}
applicationId
tilsvarer id
i App/configApplicationmetadata.json
.
Bredde og plassering (image.width
, image.align
)
Med width
kan du justere bildestørrelsen ved å angi bredde på bildet i prosent.
Høyden settes automatisk for å bevare proporsjoner. Standard innstilling er 100% (opprinnelig bredde).
Egenskapen align
kontrollerer den horisontale posisjonen til bildet i forhold til beholderen.
App/ui/layouts/{page}.json
{
"data": {
"layout": [
{
"id": "kommune-logo",
"type": "Image",
"textResourceBindings": {
"altTextImg": "kommune-logo.altTextImg"
},
"image": {
"src": {
"nb": "wwwroot/kommune-logo.png",
},
"width": "100%",
"align": "center"
}
}
]
}
}
Følgende alternativer er tilgjengelig for plassering:
flex-start
: Venstrejustertcenter
: Midtstiltflex-end
: Høyrejustertspace-between
: Elementene er jevnt fordelt langs hovedaksen, med like mye mellomrom mellom hvert element og ingen mellomrom ved start og slutt.space-around
: Elementene er jevnt fordelt langs hovedaksen med like mye mellomrom mellom hvert element, inkludert mellomrom ved start og slutt, som er halvparten av mellomrommet mellom elementene.space-evenly
: Elementene er jevnt fordelt langs hovedaksen med like mye mellomrom mellom hvert element, inkludert start og slutt, slik at det totale mellomrommet er jevnt fordelt.
Oppsummering (renderAsSummary
)
Indikerer om feltet skal være med i oppsummering eller ikke (standard: false
).
{
"id": "komponent-id",
...
"renderAsSummary": false
}
Feltet skal skjules (hidden
)
Indikerer om feltet skal skjules eller ikke (standard: false
).
App/ui/layouts/{page}.json
{
"id": "komponent-id",
...
"hidden": false
}
Sideskift (pageBreak
)
Indikerer om en sideskift skal legges til før eller etter komponenten. Kan være enten: auto
(standard), always
(alltid) eller avoid
(unngå).
App/ui/layouts/{page}.json
{
"id": "komponent-id",
...
"pageBreak": {
"breakBefore": "auto",
"breakAfter": "auto"
}
}
Horisontal justering med grid
grid
-egenskapen kontrollerer horisontal justering av komponenten basert på en layout med 12 kolonner.
Elementer tildeles brøkdeler av 12 som bestemmer deres bredde i forhold til skjermbredden.
I eksemplet nedenfor setter vi komponentens bredde til 2/12 av skjermbredden for alle skjermstørrelser (fra xs
og opp).
App/ui/layouts/{page}.json
{
"id": "komponent-id",
...
"grid": {
"xs": 2,
}
}
Du kan også bruke grid
for å sidestille komponenter.
Se Sidestilte komponenter (grid) for detaljer og eksempler.