Embedding images from google Drive on invoice/Manager

I thought I share how I show the timesheets/purchase invoice on sales invoices from Google Drive for a client then send to suppliers.
the same approach can be used to show the image anywhere on the invoice

Step ONE: Follow this guide to create IMAGE custom field Add an image to a custom field | Manager

Step TWO:

  1. Upload an image to your google drive.
  2. Right-click [Windows] on the image and click on GET LINK
  3. Change to Anyone with th link ==========> VIEWER ======> COPY LINK
    e.g. This is the link to this file https://drive.google.com/file/d/1l6CK6Mtg6PnfPvBJ7wYghcQF-s79BHXZ/view?usp=sharing
    https://drive.google.com/file/d/1l6CK6Mtg6PnfPvBJ7wYghcQF-s79BHXZ/view?usp=sharing

Step THREE
Remove/Replace the /view?usp=sharing from the link above and change to the preview
i.e. change view?usp=sharing to preview

Before
https://drive.google.com/file/d/1l6CK6Mtg6PnfPvBJ7wYghcQF-s79BHXZ/view?usp=sharing

After
https://drive.google.com/file/d/1l6CK6Mtg6PnfPvBJ7wYghcQF-s79BHXZ/preview

Step FOUR
These links are not working with <img> tags as shown in Step ONE guide, as it does not have any extension like jpg/png so show it in <iframe> instead

<iframe src="https://drive.google.com/file/d/1l6CK6Mtg6PnfPvBJ7wYghcQF-s79BHXZ/preview" width="640" height="480"></iframe>

You can change the width and height to your own requirement and image orientation

image

The image on the invoice will show like this when viewing in Manager - Google drive using an overlay to view the image in a new window - hence the ARROW

on print or pdf[usinf own pdf app] like


now the Issues with Manager PDF generation.

KNOWN ISSUE/BUG in Manager:
If you are using Manager PDF generator then it does not shows the image in pdf created.

I hope it might help someone who wants to add images from Google Drive to the invoice

3 Likes