It is now time to create the image display element. Take the following steps to do so:

1. Reselect the Gallery GameObject.
2. Add another child object by right-clicking and choosing UI | Image. This will create a new 100 x 100 pixel, blank image object within our Gallery object. Since we have not identified a source, the object will appear as a white rectangle in the middle of the Gallery. Adjust the image object's attributes as follows:
   • Rename the object FullImage
   • Set the following; Y position = 30, Width = 604 and Height = 340

Now that we have a container for the primary image, we will begin building a container for the preview images. When the application is running, these thumbnails will provide the user with a target for selecting the next image to view. Each preview slot will be filled with a 2D Sprite that will be used to swap the currently displayed FullImage image. A set of sample images have been included in the Project | Gallery Images directory to continue following along with this process. However, if you're feeling creative, import your own images and continue with those:

1. Create another empty GameObject in the Gallery canvas and rename it PreviewHolder.
2. Set the position to (0, -220, 0).
3. Add alignment components.
   To make the Gallery prefab as versatile as possible we need to be prepared for images of varying sizes. We will do this by using two of Unity's built in script components. Add the following components to the PreviewHolder GameObject by selecting the PreviewHolder and clicking the Add Component button in the Inspector panel:
   • Horizontal Layout Group (Script): The Horizontal Layout Group component creates a structured layout for a series of child elements. The elements are put in a horizontal grid based on the scripts attributes. Use the following values to setup the script for our galleries:
     • Spacing: 25
     • Child Alignment: Middle Center
     • Confirm that both Width and Height are checked for the Child Force Expand
   • Content Size Fitter (Script): Like the Horizontal Layout Group, the Content Size Fitter is used to organize the placement and layout of the preview thumbnails. In this case, the component helps determine how the child objects will fit within the PreviewHolder. Use the following values to arrange the thumbnail previews:
     • Horizontal Fit: Preferred Size
     • Vertical Fit: Preferred Size:

It should be noted that, because we are using Horizontal Layout Group (Script) and Content Size Fitter (Script), the PreviewHolder does not need a size. Its size will grow based on the number of child elements attached to the GameObject. Additionally, the child objects will be properly aligned to the center and middle of the PreviewHolder.

4. Create image thumbnail containers:
   • Like the FullImage object, each thumbnail will be a UI Image. Right-click the PreviewHolder and choose UI | Image to create a blank thumbnail. This will be our first thumbnail, rename it Preview (1).
5. Add a blank script to the Preview (1) GameObject called ImageSelector:
   
   • Each thumbnail will be clickable by our user. We will look at the actual scripts in the next chapter, but for now, we will add a blank script to the Preview thumbnail before it is duplicated. Select the Preview (1). GameObject and click Add Component in the Inspector window. Choose New Script from the pop-up menu. Name the script ImageSelector and make sure its language is C Sharp. Finally choose the Create and Add button to finish this step:

6. Move the ImageSelector script into the Scripts folder.

7. Duplicate the Preview (1) GameObject four more times to create five thumbnail GameObjects: