Home Premium Courses Blog HTML Cheat Sheet Login

How to add images for picture perfect reports & forms in Quick Base

Subscribe on YouTube

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:

    • All records use the same image
    • Groups of records share an image
    • Every record has its own image

In this video, I'll walk you through several variations of the following steps for each different image category.

  1. Identify the URL for the image
  2. Create a new Rich Text Formula field
  3. Use the image tag to display the image using HTML code

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!

RESOURCES:

Basic format:

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

Quick Base Icon Library:
https://login.quickbase.com/db/9kaw8phg?a=ShowPage&pageid=160
QBJ Video - Use Icons to Draw Focus & Drive Action:
https://quickbasejunkie.com/blog/how-to-icons

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! 

I'm always interested in hearing from you about what you're working on and what you would like to learn more about. 
Visit: https://quickbasejunkie.com/p/input

Don't miss the latest:

Tips, shortcuts, checklists, reviews, tutorials, and courses from Quick Base Junkie!

Subscribe now to stay in touch

Don't worry, your information will not be shared.

Subscribe

Already subscribed?

Take your Quick Base skills to the next level with Premium Courses.

Premium Courses
Close

Don't miss the latest:

Tips, shortcuts, checklists, reviews, tutorials, and courses from Quick Base Junkie!

Sign up now to stay in touch