Table of Contents

How to Click on an Image to Go to Another Page

Sarto Jama Updated by Sarto Jama

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 reading 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. For this example, I've chosen the 'View my Listings' page:

Open the View Editor

Hover over the view that you would like to edit, then click on the pencil icon to open the view editor:

With List Views

To create a link to view more details in a List view, click on the Actions tab, then click on the "View Record Details" option to add it to your list:

With Table Views

To create a link to view more details in a Table view, click on the Actions tab in the Columns section, then click on the "View Record Details" option to add it to your table:

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.

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

With List Views

To edit the view link in your list view, hover over the field and click on the pencil icon:

With Table Views

To edit the view link in your table view, hover over the field and click on the pencil icon:

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 100 x 100.
  • 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.

How did we do?

Create a Print-Friendly Invoice Page

How to Add Connection Links to Views

Contact