Image

The image component is used to display images. To add an image, link to an image using the URL setting. For example, add <https://source.unsplash.com/random> to the URL setting, and a random image from Unsplash will be added to your app.

Displaying images from an attachment

Images can be uploaded as Attachments and you may wish to display these outside of a Table.

Data

Create a table called Vehicles with a category name and an attachment column for the images. Upload your images.

Design

1. Add a Data Provider for the Vehicles table.

2. Add a Repeater to the data provider. This will add a container for each Vehicles row.

3. Add a Headline to display a title for each Vehicles category.
   The Binding in this case is {{ Vehicles Repeater.Vehicles.Category }}

4. Underneath the headline, add a data provider for the "Images". Attachments List column types which we created are saved in JSON Arrays.

5. Change the source of the data provider to JSON / CSV

   

6. Click the settings cog beside JSON / CSV and paste this binding inside it {{ New Repeater.Vehicles.Images }}

7. Add a repeater so that each attachment image can be displayed.

8. Finally, add an Image component within the repeater. Paste the below binding inside the URL setting of the image component. return $("New Repeater.Vehicles.Images")[$("images repeater.Row index")].url

Result

Single or fixed number of image attachments

If you know there will only be a single image attachment, you should make sure to use the Attachment column type. Then you do not need to add a data provider and repeater for the attachment column. You will have access to the image bindings.

For a fixed number of attachments, simply adjust the index in the URL for each image component. This was shown in the above example

Displaying images from an S3 bucket

You may wish to store your image files in an external S3 bucket instead of the built-in MinIO bucket.

Data

Upload your images to your S3 bucket. You will need to allow public access to the images in AWS:

Next add your S3 Datasource with a simple Read query to list all of the files in the bucket.

Design

Add a Repeater Block with the Read query as its datasource. Nest your image components, using the following URL binding: https://<bucket-name>.s3.us-west-1.amazonaws.com/{{ New Repeater block.Read.Key }}

Image carousel

There is no built-in slideshow component, however there is a tutorial here for building one.

Background image

Add the background image component. This component can take children, which will appear in front of the background.

Provide a valid URL as the image source. The Position property can also be edited to offset the background image.