Scenario

Knack makes it possible for you to show summaries of your data by using a list or a table view. When a record has quite a few fields, you can add a link to direct users to another page for more details. In that case, you can choose to use an image to link users to the details page.

Let’s take for example this real estate listings web app. Users can see summarized info about each property and can click on the "view" link to see more details about the property.

However, we want them to click on the house's image to see more details, instead of clicking the "view" link.

Requirements

You'll need an image field in one of your objects. 

If this your first time creating an app, you'll need to know some basics about adding objects, fields, pages, and views. You can start by watching our "Introducing Knack" video tour and then working through the articles in our Builder Basics section. Other good resources can be found in our designing the database and building pages sections of the knowledge base.  

Steps

Select the Page with the View

In the Pages section of the builder, select the page that holds the list or table you want to add this option to.

Open the View Editor

Click on the gear icon to open up the view’s Settings:

Create a Link to View More Details

With List Views

Go to the Special tab in the List Details section and click to add the "Link to view more details" to your list.

With Table Views

Go to the Links tab in the Columns section and click to add the "Link to view more details" to your table.

Knack Tip: If you have already created a details view in your app, you can also link to that view by clicking on the "Link to another page" option.

Set Up the Link

Next, hover over the newly added "view" link and click on the pencil icon to edit the link:

With List Views

With Table Views

From the available options, change the Link Type value to "Field".

Select the Link Field that you would like to link to the details view and hit Submit.

• In this example, we chose the Main Photo thumbnail with size 300 x 300.
• To learn how to create thumbnails for your images, take a look at this article.

See It in Action

The text link has now been replaced with an image! The image will now link to the detail page for the property.