Including images on your reports and forms can make it easier to identify records, preview attachments, and add visual impact. Using a Rich Text Formula field and a short line of HTML code I'll show you the ins and outs of adding images to your Quickbase Apps.
Plus you'll get a sneak peek at how I use images in my Content Management Quickbase.
There are several different ways you can add an image, picture, or photo to a Quickbase report or form.
Generally, they will fall into one of these three categories:
All records use the same image
Groups of records share an image
Every record has its own image
In this training, I'll walk you through several variations of the following steps for each different image category.
Identify the URL for the image
Create a new Rich Text Formula field
Use the image tag to display the image using HTML code
NOTES: Remember to set the width (or height) of the image so that it doesn't overwhelm your form or report. Sizes between 30 - 100 pixels are best. Also, if the image does not need to be downloaded for another purpose, you may consider resizing it so it doesn't require as much storage space.
With a tiny bit of HTML code, your forms and reports will be ready for their close-up!
Want to learn more about using HTML in Quickbase?
The Quick Base Junkie HTML Formula Crash Course is a self-paced, online course that gradually building from basic to advanced.
Through numerous examples, demonstrations, and exercises, you'll be able to harness a valuable new skill set. (Not to mention the enormous value you'll add to your apps.)
Note that the 24 in the /e24/ above refers to the field ID of the attachment field where the image is located. You will need to adjust this to the field ID in your Quickbase.
See the video transcript
FROM THE TUTORIAL:"...Now let's get into the details of how we make this happen. We'll do that in this other Quickbase. While this Quickbase might be called the HR Employee Tracking Quickbase you can imagine it might be sales leads or any other type of Quickbase that we want to add images to. The first type of image we'll add is an example where we want one image to display on every record in this table. We'll start by creating a new table in order to house our image. Now you don't have to create a new table. You might already have an existing table of documents or files that you manage and you could use that as well. What I recommend is that the file is stored in Quickbase and that way you can manage it. However, the image itself will need to be accessible to anyone who might view it so that means that all roles in the Quickbase will need to have at least view privileges even if they don't actually see the table. They will need to have view privileges to the file itself. Go ahead and upload our first image with my file attachment field here. I can simply drag my file and drop it onto that Choose File button to upload my new file. With my file added, I'm going to right-click on it and copy the link address. You may also be able to view the address in the lower left-hand corner. This is what we're going to need to reference this on each of our records. I'll head back to my employee table and open a record. Let's say I want this icon to show at the very beginning of the fields so I'm going to add a field before this one. And this will be our rich text formula field. I can go in and edit that now. Here's where the magic happens in our rich text formula field. We can use HTML code in order to reference that image. I'll start with a quotation and then what's called an image tag IMG. Followed by a space and we need the source for the image or SRC. That'll be followed by the equal sign and then a single quotation. This is very important, we want a single quotation and then we'll include that URL that we copied from our image. So, I'll paste that in. And with another single quotation, and now an important part. I want to include the width of the image so that way it's not too big. So I'll include width and set that equal to another single quotation and then the number of pixels that I want it to be. So, in this case, we want to choose 30 pixels and then close out that image tag with the right angle bracket. I'll click Save and now you see I've got my new icon located on the record. If I go to another record, it also has the icon. Let's head back to our report. Here you'll see the new icon is now located on every single record in this report because I added it to a field on this table. Now, what if though we want a different icon depending on what department the individual is in...."
