Feature Highlight: Click on an Image to go to Another Page

01/17/2018 Posted by Ranasha

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. In these cases, it is also possible to use an image to link users to another page. 

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

Knack-FH-Hyperlink-Images-1

Showing the ‘view’ link is great, however, it would be nice to click on the image to see more details.  

What you’ll need:

  • An image field in your object  
  • To learn more about image fields, visit our articles here

How to add this feature:

  1. Head to the Pages tab of the Builder
  2. Find the page where your list or table view is located
  3. Click on the gear icon to open up the view’s options and click on ‘Settings’

Knack-FH-Hyperlink-Images-2

  1. Navigate to the Special tab and click or drag ‘Link to view more details’ to your view

Pro 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.

Knack-FH-Hyperlink-Images-3

  1.  Next, hover over the newly added ‘view’ link and click on the pencil icon at the right

Knack-FH-Hyperlink-Images-4

  1. In the view settings, change the Link Type value to ‘Field’.

Knack-FH-Hyperlink-Images-9

  1. Select the Link Field that you would like to hyperlink to the details view  
  • In this example, we chose the Main Photo thumbnail with size 300 x 300
  • To learn how to create thumbnails for your images, visit our article here

Knack-FH-Hyperlink-Images-10
Hit Submit!

Knack-FH-Hyperlink-Images-5
The text link has now been replaced with an image!

  1. Save changes and your done! The image will now link to the detail page for the property.

You can even do this with your table views!

Knack-FH-Hyperlink-Images-6

Knack-FH-Hyperlink-Images-7

Knack-FH-Hyperlink-Images-8

Knack-FH-Hyperlink-Images