We are nearly at the end of the Tutorial.

You have learned how the clearString system uses the neatComponents platform to construct a simple app, from basic component management to constructing a basic record search.

The emphasis throughout has been on Data Management, however clearString is a Full Stack app development system, from the database layer all the way up, via a full CSS editor interface, to graphics.

We will spend this last page of the Tutorial introducing you to a few common graphics, or image, requirements.

In-page Imagery

Basic image usage - inserting images into pages or surfaces  - is handled by the Text Editor.

Click the Image Tool icon.

You can read how to use the image tool here: Inserting Images...

Tip:
In addition to the formal Image Tool, in many cases you can simply drag an image from a browser window into place, or copy and paste an image straight into the Text Editor. You still have access to the (right-click) Image Properties dialog, and can rename the Image via its [Browse Server] button and then right click the image file to rename or delete.

Background Images & Hero Images

Background images - when you want to display other content over the image, say a picture behind text -  is handled by the Behavior Editor of the Page or Surface you are working with.

You select the image in the normal way using the picker.

You have a number of controls that enable you to precisely control the behavior of the Background Image.

Position: Scrolling, Fixed or Local

Position: Defaults to center left, but can be overridden.

Size: Defaults to Auto but can be set to Specific. In addition you can use Contain or Cover

Contain:
The browser will scale the image to the largest possible size that allows the entire image to fit inside the container without cropping or stretching it. The image will always be fully visible, but if the container's aspect ratio differs from the image, empty space (whitespace or "letterboxing") may appear around it. 

Cover:
No gaps - the browser will scale the image to be as small as possible while ensuring that both its width and height completely fill the entire container. It ensures there is no empty space (white space) in the background, even if it has to crop parts of the image to maintain its aspect ratio. 

Tips:
Always consider the different viewports or screen sizes when working with background images.
These image controls can be managed through the Theme System for consistent behavior across complex viewing scenarios. 

Tiling

You can also set colors to be background, as well as textures. Suitable images can be tiled to fit the available container.

Graphic Header

Inserting images into the page header involves the Layout Manager. Here you can control how the image behaves as the page scrolls and what happens when the view-port size changes.

A very common scenario in current app design is to have a significant image heading the display, either integrated with the top navigation or abutting it. This image usually has to display differently depending on the viewport - whether the app is being viewed on a desktop or mobile device.

The methodology for working with Layout Elements is explained here, in the Layout-tab section. 

Position

It is common to position the image containing Layout Element either immediately below the Site Header, so that it is Scrolling with the page, but it could be Fixed on the viewport if that is required in your design.

Display Rules

The Display Rules enable you to create sophisticated management of the Layout Elements, such as the creation of mobile friendly navigation (Read about Navigation Zones...). The Display Rules work by turning elements off or on depending on which User Group is viewing the page, the page position or the viewport width. 

For example, If you have a page header image that you do not want to show on mobile devices - because it would upset your design - then, as illustrated above, you can set it to only "Display when the viewport is 800 to unlimited pixels wide". You could stack multiple layout elements in your design so that one turns on as another turns off.

Structured Data and Image Display

In many apps you will be working with a very large number of images, say in a product catalog, equipment inventory, invoices or even a collection of historical objects. In cases like these you will be using the structured data capabilities of the neatComponents platform.

There you will be structuring Views where the embeds show the appropriate images based on Query results - the matching catalog image, piece of equipment or invoice - the same techniques we have introduced you to in this Tutorial.

 Now - on to Working with the system

---

Reusing Layout Elements

If you incorporate an image with the Site Header level itself beware of display conflicts in regard to Responsive mobile navigation (where the Site Header gets embedded in the view). This doesn't mean that you cannot do it, simply that more care needs to be taken with the choice of image used.

Mobile Navigation

As an extension to this Tutorial, you can explore how Layout Elements were used to create the Responsive navigation on the app.

Read about Mobile Navigation here...