Sist endret: 28. mai 2024

Bilde

Vis visuelt innhold som bilder, skjermbilder, illustrasjoner og grafikk

🚧 Denne dokumentasjonen er under oppdatering.

Bruk

Bruk bilder og illustrasjoner for å fremheve poeng eller illustrere begreper som er vanskelige å forklare med tekst.

Anatomi

Bilde og alt tekst anatomi

  1. Bilde: Foto, skjermbilde, illustrasjon eller grafikk.
  2. 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

Gammel trevogn. Fotografi.

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

Vi oppdaterer for øyeblikket hvordan vi implementerer komponenter. Listen over egenskaper kan derfor være noe unøyaktig.

JSON schema

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

PropertyTypeDescription

id

stringThe component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with <dash><number>.

type

stringThe component type.

textResourceBindings

objectText resource bindings for a component.
textResourceBindings.altTextImgstringAlternate text is read aloud to someone using assistive technology, but is hidden from a sighted user.

align

stringAlign image
Enum: [flex-start, center, flex-end, space-between, space-around, space-evenly]

grid

objectSettings for the components grid. Used for controlling horizontal alignment.
Example(s): {xs: 12}
gridSettings.innerGridgridPropsOptional 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.labelGridgridPropsOptional grid for the component label. Used in combination with innerGrid to align labels on the side.
Example(s): {xs: 12}
See: gridProps

hidden

booleanBoolean value or expression indicating if the component should be hidden. Defaults to false.

pageBreak

object
pageBreak.breakAfterstringPDF 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.breakBeforestringPDF 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

renderAsSummary

booleanBoolean or expression indicating if the component should be rendered as a summary. Defaults to false.

src

objectImage source
src.enstringEnglish
src.nbstringBokmål
src.nnstringNynorsk

width

stringImage width
Example(s): 100%

Konfigurering

Vi oppdaterer for øyeblikket Altinn Studio med flere muligheter for innstillinger! Dokumentasjonen oppdateres fortløpende, men det kan være flere innstillinger tilgjengelig enn det som beskrives her og noen innstillinger kan være i betaversjon.

Legg til komponent

    Du kan legge til en komponent i Altinn Studio Designer ved å dra den fra komponent-listen til sideområdet. Når du velger komponenten, vises innstillingspanelet for den.

    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.

      Innstilling legg til tekst

      Klikk plusstegnet for å opprette en ny tekst eller forstørrelsesglasset for å velge en eksisterende tekstressurs.

      Innstilling for alternativ tekst

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

        Innstilling kilde

        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.

          Innstilling bredde og plassering

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

                Innstillinger for komponenten er ikke støttet i skjemaeditor ennå, men kan konfigureres manuelt.

                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.