Reference Guide
Detailed explanations of every feature and function in NutshellImage Grid
The Image Grid component allows you to display a collection of thumbnail images on a screen, which your end-user can see in full by tapping on them.
A populated data table displayed on the system’s preview device
The Image Grid is especially useful when you have a collection of images stored in your Nutshell database, but you never know exactly how many. It is also useful when you have a data-set that is visually differentiated – for example, a catalogue of products differentiated by colour.
Populating an Image Grid
Image Grid components can only be populated from a dynamic data-source. What do we mean by dynamic? Dynamic data is content that is changeable – namely records in a Nutshell database table.
Data component feeding an image grid
Image Grids are populated by mapping the results from a database query to the image grid. This process is part of the Data component, which is detailed elsewhere in the Nutshell Reference Guide.
Sorting Options
By default, images in Image Grid will be displayed in the order in which they are received from the Data component. You can choose to sort them based on the data they were taken/uploaded, in either ascending or descending order.
Image Grid Properties
When an Image Grid component is selected on the Canvas, the following settings are available in the Properties panel:
| Basic Settings | |
|---|---|
| Reference | A unique identifier for the Image Grid. This is critical when you map the output of a Data component to the Image Grid, where you will choose the grid by name. |
| Display Settings | |
|---|---|
| Sort by | The order in which images should be displayed by default. Allows you to sort images based on the date/time they were taken/uploaded, and the preferred direction. |
| Behaviour Settings | |
|---|---|
| On-screen Size | Allows you to specify whether your image grid should grow to accommodate any records it receives from a Data component, or whether it should scroll within a fixed-height container. |
| Styling | |
|---|---|
| Various | A handful of options to control how your image grid appears on the end-user’s device. |
Just getting started? Try the Tutorials section for handy quick-start guides.
Prefer to watch the action? Try our series of short video tutorials.
Can't find what you're looking for?
If you can't find the answer to your problem here, please contact Nutshell's support team via our dedicated help desk.
Floor 1, Baltimore House
Gateshead, Tyne and Wear
NE8 3DF
United Kingdom