Image

Display visual content such as pictures, screenshots, illustrations, or graphics

Usage

Use images and illustrations to emphasize points or illustrate concepts that are difficult to explain using text.

Anatomy

Best practices

We recommend following the guidelines by UUtilsynet.

• Add an alternative text which explains the image. The alt. text will be displayed if the image is unavailable and is used by screen readers.
• If an image is purely decorative, it’s best not to include an alternative text.
• Don’t use images for image’s sake. Ask yourself if the image illustrates a point or increases the understanding of what you are trying to tell.
• Check if the image scales well on devices like mobile or tablet. An image which looks good on a PC can quickly fill a smaller screen.
• Avoid using images instead of text, as screen readers cannot read it.

Content guidelines

Keep alternative texts consistent:

• Never start with “Image of …”
• Write short and start with the most essential part of the image.
• End by saying if the photo is an illustration or graphic.

Example

Alt text: “Old wooden trolley. Photograph.”

For more guidelines and examples, see UUtilsynet.

Properties

The following is an autogenerated list of the properties available for Image based on the component’s JSON schema file (linked below).

JSON schema

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

Configuration

Add component

{
  "$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"
            }
        }
      ]
    }
  }
}

Alternative text (textResourceBindings.altTextImg)

{
  "data": {
    "layout": [
      {
        "id": "kommune-logo",
        "type": "Image",
        "textResourceBindings": {
          "altTextImg": ""
        },
        ...
      }
    ]
  }
}

Image settings (image)

Image source (image.src)

The default source is nb; any language that does not define a separate image source will use this source. List another language code and image source to add a source, as in the example below.

Available language sources are en (English), nb (Norwegian Bokmål), and nn (Norwegian Nynorsk).

{
  "id": "kommune-logo",
  "type": "Image",
  "image": {
    "src": {
      "nb": "/testdep/flyttemelding-sogndal/kommune-logo.png",
      "nn": "wwwroot/kommune-logo.png"
    },
    ...
  }
}

The image source may be external or local to the app.

For external images, the source is the image URL (e.g. https://examples.com/myImage.png).

To host an image in the application, place it in the folder App/wwwroot (if the folder does not exist, you can create it). Static hosting must be configured manually for apps created before December 2021.

An image placed in App/wwwroot can be referenced in the following ways:

• Using its relative URL: /<org or username>/<app-name>/image.png or
• Using the image path: wwwroot/image.png. The path will resolve to the image’s relative URL before the image is loaded.

Configure static hosting

For apps created before December 2021, static hosting must be configured manually by adding the line app.UseStaticFiles('/' + applicationId); in the Configure method in App/Program.cs as shown below:

void Configure()
  {
    ...
    app.UseRouting();
    app.UseStaticFiles('/' + applicationId);
    app.UseAuthentication();
    ...
  }

applicationId is the same as id in App/configApplicationmetadata.json.

Width and alignment (image.width, image.align)

By using width, you can adjust the image size by specifying the width of the image in percentage. The height is automatically set to maintain proportions. The default setting is 100% (original width).

The property align controls the horizontal position of the image relative to the container.

{
  "data": {
    "layout": [
      {
        "id": "kommune-logo",
        "type": "Image",
        "textResourceBindings": {
          "altTextImg": "kommune-logo.altTextImg"
        },
        "image": {
          "src": {
            "nb": "wwwroot/kommune-logo.png",
          },
          "width": "100%",
          "align": "center"
        }
      }
    ]
  }
}

The following options are available for positioning:

• flex-start: Left-aligned
• center: Centered
• flex-end: Right-aligned
• space-between: The elements are evenly distributed horizontally, with equal spacing between each element and no spacing at the start and end.
• space-around: The elements are evenly distributed horizontally with equal spacing between each element, including spacing at the start and end, which is half the spacing between the elements.
• space-evenly: The elements are evenly distributed horizontally with equal spacing between each element, including at the start and end, so that the total spacing is evenly distributed.

Summary (renderAsSummary)

Indicates whether the field should be included in a summary or not (default: false).

{
  "id": "komponent-id",
  ...
  "renderAsSummary": false
}

Hidden (hidden)

Indicates whether the field should be hidden or not (default: false).

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "hidden": false
}

Page Break (pageBreak)

Indicates whether a page break should be added before or after the component. Can be either: auto (default), always, or avoid.

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "pageBreak": {
    "breakBefore": "auto",
    "breakAfter": "auto"
  }
}

Horizontal alignment with grid

The grid property controls horizontal alignment based on a 12-column layout. Items are allocated fractions of 12 which sets their width relative to the screen width. In the example below, we set the component’s width to 2/12 of the screen width for all screen sizes (from xs and up).

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

You can also use grid to place items side by side.

See Components placed side by side (grid) for details and examples.