Clickable Thumbnail Images in a Report

Ever wanted to display a picture of your merchandise in a report for your clients? Or how about show an employee’s picture next to their contact information? I’d like to help you create a thumbnail version of your images you can display in a report that’s also clickable to view the full image.

While working through these steps, feel free to visit the following application to see the formula in action as well as step by step screen shots to help you through the process.

https://www.quickbase.com/db/bdx6dbns5

Create a file attachment field.

If your table doesn’t already contain a file attachment field, the first step is to create one to hold your image. If you’ve never created a field, this help topic explains the process.

https://www.quickbase.com/help/default.html#adding_a_field.html

File attachment fields have special properties, so if you’re not familiar with them, you’ll want to read over this help topic that explains how to manage your files in QuickBase.

https://www.quickbase.com/help/default.html#about_doc_management.html

Create a multiple choice text field with Vertical and Horizontal as the choices.

Once you have a file attachment field in your table, the next step is to create a multiple choice text field, called Image Thumbnail Orientation in this example. The two choices in this field should be Vertical and Horizontal.

Add the file attachment field and multiple choice text fields to your forms.

Both the file attachment field and the text multiple choice field need to be added to your forms. If you need help adding fields to your forms, this help topic will guide you.

https://www.quickbase.com/help/default.html#setting_form_elements.html

Create a formula text field with the check the box for “Allow some HTML tags” checked and the formula below.

The next step is to create a formula text field in the same table. The formula text field will be the column you display in your report to show the thumbnail versions of your images.

Access the field properties of your newly created formula text field. If you need help accessing the field properties, this help topic explains the necessary steps.

https://www.quickbase.com/help/default.html#changing_field_properties.html

Within the field properties of your formula text field, check the box for “Allow some HTML tags” and enter the following formula in the formula box.

If ( Length([File Attachment]) = 0,
"--",
Case( [Image Thumbnail Orientation],
"Vertical",
"<a href='https://www.quickbase.com/up/" & Dbid () & "/a/r" & [Image ID#] & "/e6/v0' target='_blank' > " & "<img src='https://www.quickbase.com/up/" & Dbid () & "/a/r" & [Image ID#] & "/e6/v0' height='75' width='50' alt='' />" & "</a>",
"Horizontal",
"<a href='https://www.quickbase.com/up/" & Dbid () & "/a/r" & [Image ID#] & "/e6/v0' target='_blank' > " & "<img src='https://www.quickbase.com/up/" & Dbid () & "/a/r" & [Image ID#] & "/e6/v0' height='50' width='75' alt='' />" & "</a>",
"<a href='https://www.quickbase.com/up/" & Dbid () & "/a/r" & [Image ID#] & "/e6/v0' target='_blank' > " & "<img src='https://www.quickbase.com/up/" & Dbid () & "/a/r" & [Image ID#] & "/e6/v0' height='75' width='75' alt='' />" & "</a>" ))

You’ll need to replace three pieces of data in this formula to make it work.
1.    Replace “[File Attachment]” with the name of your file attachment field.  (Don’t forget to place the name of the field in brackets!)

2.    Replace “6” with the field ID of your file attachment field. To find the field ID, click on the name of your table in the blue table bar, choose “Customize (table name) table”, and choose fields. If there is not already a column called Field ID displaying, you can click the button on the bottom right called Show Field IDS to see this data. Find the field ID for your file attachment field and replace 6 with this number, all six times that 6 appears in the formula above.

3.    Replace “[Image ID #]” with the name of your table’s key field all six times it appears. (Don’t forget to place the name of the field in brackets!). If you need help identifying the key field of your table, this help topic will explain how to find it.

https://www.quickbase.com/help/default.html#setting_the_key_field.html

Now that you’ve modified your formula, hit the Save at the top or bottom right of the field properties to save these changes.

The formula we’ve created will display your images in a thumbnail size in your report and on your forms. You can have the thumbnail image display vertically, horizontally, or squarely by choosing either value, or no value for squarely, from your multiple choice field. The image will be 75 x 50 pixels if Vertical is chosen, 50 x 75 pixels if Horizontal is chosen, or 75×75 if neither is chosen.  If there is no image at all, “- -“ will display.

You’ll need to add this formula text field to the report you want to display your thumbnail images. This help topic explains how to add a column to a report, if you need assistance with this step.

https://www.quickbase.com/help/default.html#edit_view_5_columns.html

Now, run your report and see your beautiful, clickable images. Great job!

  • Don Michaels

    Wow – this is a great show of quickbase’s formula language. But I can’t help having the feeling that this seems like an exceedingly complicated way to do something that should be pretty simple?

    [Reply]

  • Don Michaels

    Wow – this is a great show of quickbase’s formula language. But I can’t help having the feeling that this seems like an exceedingly complicated way to do something that should be pretty simple?

    [Reply]

  • Cam

    Thanks – this was super helpful.

    [Reply]

  • Cam

    Thanks – this was super helpful.

    [Reply]

  • http://www.tower-defense-game.com/ Tower Defense

    I can’t help having the feeling that this seems like an exceedingly complicated way to do something that should be pretty simple.

    [Reply]

  • http://www.tower-defense-game.com/ Tower Defense

    I can’t help having the feeling that this seems like an exceedingly complicated way to do something that should be pretty simple.

    [Reply]

  • John Campbell

    I found this very helpful. I don’t undertand the comment that it is exceedlingly complicated. Isn’t this the same code that exists for most thumbnail viewers, albeit usually built into code so less visible to users?

    [Reply]

  • John Campbell

    I found this very helpful. I don’t undertand the comment that it is exceedlingly complicated. Isn’t this the same code that exists for most thumbnail viewers, albeit usually built into code so less visible to users?

    [Reply]

  • Anne_Loomis

    Okay, am I blind? I don't see a “6″ in the formula above! Where is it? Thanks …

    [Reply]

  • Tlynk

    Does this formula work any more? I cant seem to get it to work.

    [Reply]