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 Image & Hero Images

Background images - when you want to display other content over the image, say text over a picture -  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. 

Tip:
Always consider the different viewports or screen sizes when working with background images.

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.

Structured Data

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 manuscript - the same techniques we have introduced you to in this Tutorial.

---

 Now - on to Working with the system