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

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).

JSON schema

Required properties: id,type,src,width,align

Konfigurering

Legg til komponent

{
  "$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)

{
  "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).

{
  "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:

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.

{
  "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: Venstrejustert
• center: Midtstilt
• flex-end: Høyrejustert
• space-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).

{
  "id": "komponent-id",
  ...
  "grid": {
      "xs": 2,
    }
}

Du kan også bruke grid for å sidestille komponenter.

Se Sidestilte komponenter (grid) for detaljer og eksempler.