Page layout — Image

Flow components let us split our app UI into independent, reusable pieces. A page layout in Flow has the following components:

Content – Hidden | Presentation | List | Outcomes | Image
Input – Input | Radio | Checkbox | Toggle | Text | Rich Text | Combobox
Data – File Upload | Table | Files | Tiles
Charts – Bar | Line | Pie | Doughnut | Polar Area

Let’s take a look at the image component.

Image

The image component lets us add images to a page layout.

We drag and drop the image component to a container in the page layout. Like other components, this opens a configuration panel on the right-hand-side that lets us customize the component. We can add the image URL in configuration options, as well as our desired display width and height.

When we save the component, the image gets added to the page layout.

We can see the image URL in the page metadata.

The <alt> tag is set to the Name of the page component.

The bootstrap img-responsive class is added to the <img> element.

Images are rendered at runtime, and do not show up when we do a page preview in the drawing tool.

Goody bag
  1. Sample flow – https://flow.manywho.com/c5a50df2-f24b-4342-9fbd-1c91747ac0cf/play/default/?flow-id=61ffd553-861a-44ba-898d-1f99667d95f9
  2. Sample package – https://s3.amazonaws.com/mw-documentation/flow-examples/image.json