The image is not showing in PDF when fetching the File using the file_by_id HubL function.

[jay_pinetco]

I’m building a custom HubSpot Quote PDF template and want to show a product photo for each line item.

Here’s the setup:

• Each line item has a custom property product_photo (file field). In the template,
  
• I fetch the file using file_by_id(line_item.product_photo).
• I then try to render it inside the line items loop.

Expected result:

• Each line item that has a product photo should display it in the PDF.
  

Actual result:

• Text values (name, quantity, price) print fine.
  
• The image is appearing inside the Web View but not in PDF View.
• Tried {% image %} & {% linked_image %} standard tags, but not printing the image. Just show the first image only. Except that it shows a broken path URL.

Questions:

• Is there a limitation with file_by_id inside quote templates (maybe in PDFs specifically)?
  
• How can I solve this issue?

Thanks in advance for any guidance.

[frameofwork · Accepted solution]

Hi @jay_pinetco ,

Is your file property set to private? If it is, you won't be able to use that particular function as private files require a signed URL to access. Beyond that, are you sure you're referencing the correct returned value? The documentation here states that you need to access the friendlyUrl that comes through when you use the file_by_id function.

You could try to pprint out the file_by_id output to see which variable suits what you need best (ie. if you need the URL to input the image into an <img> tag):

{{file_by_id(FILE_ID_HERE)|pprint}}

Let me know if there's more details you can share as well when you inspect the broken image as that should help you narrow down what the function is returning in your case.

[frameofwork · Accepted solution]

Hi @jay_pinetco ,

Is your file property set to private? If it is, you won't be able to use that particular function as private files require a signed URL to access. Beyond that, are you sure you're referencing the correct returned value? The documentation here states that you need to access the friendlyUrl that comes through when you use the file_by_id function.

You could try to pprint out the file_by_id output to see which variable suits what you need best (ie. if you need the URL to input the image into an <img> tag):

{{file_by_id(FILE_ID_HERE)|pprint}}

Let me know if there's more details you can share as well when you inspect the broken image as that should help you narrow down what the function is returning in your case.

[jay_pinetco]

Hey @frameofwork, Thank you for the guide. So far, I am adding an image at the line items step, like when I am at the line item stage, I add the image at the line items level as shown in the screenshot below. But I tried to create a new product, and in that new product, I attach an image, then attach the product to a quote, and it works fine in the PDF as well.

[frameofwork · Accepted solution]

Hi @jay_pinetco ,

Can you help me double-check if the file property is set to private? 

If it is, you'll need a public property! If it's already set to public, do I understand correctly from your latest reply that it now works as expected? Or does the issue still happen uniquely when you download the PDF of the quote? If it's just with the PDF, any chance you could double-check whether you're lazy-loading the images? I've come across some cases where that interfered with the image coming through in the PDF.

[jay_pinetco]

Hey @frameofwork,

The property is already public for the file, and everything is working fine now. However, I wanted to clarify a couple of scenarios:

1. When I upload a photo for a product and then create a quote by selecting that product, everything functions as expected.

2. If I do not upload a photo for the product and proceed to create a quote, upon selecting the product in the quote, I then try to choose a photo in the line items editor (as shown in the screenshot). In this case, it does not work.

Additionally, I want to note that I did not use lazy-loading. 

As of now, based on my usage, the issue seems to be resolved. Thank you for checking in!

[frameofwork]

Gotcha! Thanks for confirming @jay_pinetco , for that second scenario, that does sound odd and it's possible this could be a difference in how product & line items work. If it's a big blocker to how your team is able to generate quotes, reaching out to HubSpot support to confirm the behaviour could be worthwhile here! 

I'd expect that uploading an image to the line item within the quote editing experience should allow the file to pull through but I could be mistaken there.

[chighsmith]

Hi @jay_pinetco,

Thank you for posting to the Community!

I understand that when generating a custom HubSpot Quote PDF, images fetched via the file_by_id HubL function from the product_photo property display correctly in the web view but not in the PDF, and you're seeking guidance on whether this is a limitation of file_by_id in PDFs and how to resolve it.

I'd like to tag in some of our Top Contributors to see if they have any ideas. 

Hi @Alex_Elborn @ChrisoKlepke @HubDoPete Do any of you all have any suggestions here?

Thank you!

Cassie, Community Manager