Improving the homepage with customer testimonials

In this tutorial, we will be adding a customer testimonials section to our home page.

Customers photos

Creating another Data² Drive

First, add a new Data² Drive and rename it to "Customers Drive".

To add a folder:

1. Click on the folder icon next to the Trash icon in the top right corner.
2. Click on the folder that was added.
3. Click again on the name to rename.
4. Rename it to photos.

Uploading a photo for each customer

Let's add two new fields for our customers, photo and testimonial. For this, we will change the schema parameter of the Customers Table:

1. Select the Customers Table.
2. Click on Schema.
3. Click on Add Item.
4. In Title write photo and in Component select data2-core-types@File.
5. Add another item by clicking on Add Item.
6. In Title write testimonial and in Component select data2-core-primitives@String.

In the Customer CRUD Artboard, select one of the text fields and in the Inspector, click on the duplicate icon.

Reposition this new text field, and change the Field parameter to testimonial.

Draw another Block and change its type to data2-blocks@FileField. Configure it with:

1. In Dataset select All Customers.
2. In Field select Photo.
3. Under Folder, select the Drive Clients and select the photos folder.

Click the Preview button on the Customer CRUD Artboard, and add new clients.

Put testimonials on the home page

On the Artboard of the home page, add a Block to be the testimonials section. In this block:

1. In the parameter Children Mode put cols.
2. In the Repeat parameter, put All Customers.
3. In the Repeat Reference parameter, put customer.

This means that all Blocks that are direct children, that is, that are inside that Block without another Block in between, will be repeated.

Draw another Block inside the section and in the Position parameter, disable Free Transform. In this Block, draw two other Blocks: one for the photo and another for the testimonial of each customer.

In the testimonial Block:

1. In the Text parameter, click on f() and select data2-core-types@Reference.
2. Click on Text to browse and in the text field, put customerRepeater.testimonial.

In the photo Block:

1. Click on f() and change the type to data2-core-types@Background.
2. Click on the ... icon next to f() and select Break Param. This allows you to "navigate into" the parameter, and allows you to change the type of each field of the parameter.
3. Click Fill to navigate.
4. In the Image parameter, click f() and select data2-core-types@Reference.
5. Click on Image to browse.
6. In the text field, write customerRepeater.foto.fileUrl. Autocomplete will help with this task.

As usual, click on the Preview of the Artboard to see the result of your work!

Make adjustments to the placement and styling of the Blocks as you wish, such as centering the text, removing the blue color from the Blocks, etc.