Adding image content

Given our InstructionElement events, to add images to the instructions requires updates to the UI and the data model, but not the controller.

Adding an image to the instruction Content panel

First let's add an image to the Content panel. Actually, we will add a Unity UI Raw Image, since the element named Image is reserved for sprites.

1. In Hierarchy, locate the Content panel (under Main Canvas), right-click, and select UI | Raw Image.
2. Rename it Image Graphic.
3. Select Add Component | Layout Element.
4. Select Preferred Width: 395.
5. Select Preferred Height: 250.
6. Position it in the Hierarchy between Title Text and Body Text.

The image ahead shows the now current Hierarchy, along with the Scene view of the Canvas:

Adding image data to the InstructionStep model

From our CSV data, images will be referenced by name. The app will look in the Resources folder for the files. We could use an image URL instead (and that is provided as another column in the CSV data), but, just in case wikiHow changes...