Get more graphic tips: HTML/CSS Cheat Sheet
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 Quick Base Apps.
Plus you'll get a sneak peek at how I use images in my Content Management Quick Base.
There are several different ways you can add an image, picture, or photo to a Quick Base report or form.
Generally, they will fall into one of these three categories:
In this training, I'll walk you through several variations of the following steps for each different image category.
NOTES: Remember to set the width (or height) of the image to 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!
RELATED VIDEO: Use Icons to Draw Focus & Drive Action
"<img src='http://linktoimage.png' width='50'>"
Format with Field Reference:
"<img src='" & [My URL] "' width='50'>"
Format with Dynamic URL:
var text URL = URLRoot() & "up/" & Dbid() & "/a/r" & [Record ID#] & "/e24/v0";
"<img src='" & $URL "' width='50'>"
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 Quick Base.
FROM THE VIDEO: "...Now let's get into the details of how we make this happen. We'll do that in this other Quick Base. While this Quick Base might be called the HR Employee Tracking Quick Base you can imagine it might be sales leads or any other type of Quick Base 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 Quick Base 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 Quick Base 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 in order 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...."
Feeling like a Junkie? Subscribe on YouTube now!
Tips, shortcuts, checklists, reviews, tutorials, and courses from Quick Base Junkie!
Don't worry, your information will not be shared.
Take your Quick Base skills to the next level with Premium Courses.