Custom Invoice View Template Rendering Incorrectly

Hey y’all! I’ve been using Manager with the default Invoice template but I decided to design my own. However, whenever I try printing the invoices, some elements appear as mashed up together. I read somewhere in the forum from a replay by @lubos that to render correctly, one has to email it. This did not fix the problem. In fact, an invoice with only one item spans 2 pages. I had added a ‘Thank You’ image at the bottom of the invoice which displays well when viewed on Manager, but only an empty box shows on the rendered invoice. I had not tried the email option prior to updating to version 16.7.95 which I noticed broke a few things including previewing your custom view template as you modify it. The drop down which allows you to select an invoice shows “no match found”.

Here’s the invoice on Manager:

Here’s the emailed invoice:

Decrease your font size.

What is the default font size used or what size do you recommend @Jon ? And what about the issue of the image disappearing/not displaying?

Whatever size it is, make a a little smaller. It looks like your printout is just ever so slightly too wide for its columns, making rows wrap to a second line, which makes your invoice run into a second page. (For some reason, when Manager prints, it always seems to come out with wider margins and a slightly larger font than what it displays on the screen. Things that look like they fit onto a single line on the screen in Manager often seem to run into two lines when printed.)

I don’t see which image you’re referring to.

@Lubos has indicated that he will eventually be revamping the printing engine by incorporating a PDF engine into the core program. It’s a big task and it’s not at the top of the roadmap, so it’s not something we should expect for a while. For now, printing relies on the printing capability of your web-brower’s rendering engine or on an external PDF generation tool (or something like that).

You can also try right-clicking your invoice on the Manager screen, selecting Print preview... and changing the print-size drop-down (in the preview screen’s toolbar, last box on the right) to something besides Shrink to Fit and see if it makes a difference. You can also try tweaking the print margins from that screen.

Thanks @Jon . I shall give that a try. About the image, if you look at the invoice as shown on Manager, there’s the image that says “Thank You” on the left side of the payment details. A empty box is shown instead on the rendered invoice.

Which image on your invoice are you referring to? What HTML code did you use to insert that image?

Where does that image file reside? Is it a local file or is it on a web server? I seem to recall something about images tags in Manager templates (and in invoice notes) having to have http:// sources, and not file: sources. If your image file is stored locally, try uploading it to a web server and changing the img tag in your template to source it from there instead. That might do the trick.

Otherwise, please post the relevant part of your template here, and perhaps someone can figure it out.

@lubos and @Jon, here’s the bit where I place the image:

<table style="vertical-align: bottom; width: 100%">
   <tr>
       <td style="vertical-align: top; min-width: 100%; padding: 8px 8px; border: none">{{ notes }}</td>
   </tr>
   <tr>
       <td style="vertical-align: bottom; text-align: right; padding-right: 32px"><img src="C:\(some path)\Local\Manager\src\thanks.png" style="width: 150px !important; height: 132px !important"></td>
   </tr>
</table>

Let me try hosting the image online.

@lubos I’m referring to this image on the right.

Still not working. Strange thing is when you post the code snippet here: http://rendera.herokuapp.com/ the image is displayed.

<table style="vertical-align: bottom; width: 100%">
   <tr>
       <td style="vertical-align: top; min-width: 100%; padding: 8px 8px; border: none">{{ notes }}</td>
   </tr>
   <tr>
       <td style="vertical-align: bottom; text-align: right; padding-right: 32px"><img src="https://lh4.googleusercontent.com/NTRHCbSDmy86ZUedgWBLxr2nHGCsk-Fow2CNCag08wqZ52UpOq4sxzqA5PGUps8zw8DR932sb3Vm9sQ=w1366-h667" style="width: 150px !important; height: 132px !important"></td>
   </tr>
</table>

The image is here:
https://lh4.googleusercontent.com/NTRHCbSDmy86ZUedgWBLxr2nHGCsk-Fow2CNCag08wqZ52UpOq4sxzqA5PGUps8zw8DR932sb3Vm9sQ=w1366-h667

Google link doesn’t work for me.

Upload image to http://imgur.com, or you can inline image using base64 encoding. See: https://css-tricks.com/data-uris/

You need to configure your Google account to permit the image file to be fetched from any computer. When I try to fetch the image file, I get a 403 error, which means I don’t have read rights to the file. The same thing is probably happening when Manager is trying to fetch the file. Please post the file on a world-accessible web server and try again.

As an aside @ChrisWambugu: It probably still won’t work in Manager, but for future reference, note that the standard way of sourcing a local file is file://host/path/filename.ext. Some browsers will accept the format without the file: part and with backslashes instead of slashes, but it’s non-standard. Google “file URI” for more detail.

Your example should be <img src="file://c:/(some path)/Local/Manager/src/thanks.png">.