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.