Insert image in footer

Hi Sander,
HTML is not allowed in the current version, although I will enable support for it in the next version (other people have been asking for this too). However, not all servers allow remote images (with a https:// etc source) to be loaded, so you might need the absolute/full server path in that case.
You can either download the development version from github:
https://github.com/wpovernight/woocommerce-pdf-invoices-packing-slips/

Or create a custom template and use the following code (which allows you to be more flexible in styling the layout as a bonus):

<img src="<?php echo $wpo_wcpdf->export->template_path; ?>/footer-logo.png"/>

Hello Ewout,

Thanks for your quick response.

So it is possible to insert an image right now (without a newer version) when I download the development version? Or when I create a custom template?

Exactly! The choice is up to you. Note that the development version is actually the newer version (containing all the changes for the next release), just not released yet. The custom template solution will work in both the current and upcoming version of course.

Is there any tutorial how to make a custom template? Im not such a good coder so Im not sure if it is easy for anyone without the knowledge… ??

You don’t really need to be a coder, as long as you know HTML/CSS. The FAQ (and settings page) contains instructions on which files to copy & edit, but there’s not really a tutorial.

I went ahead and pushed the development version live, so you can also first try the new version (1.4.4) and see if you original approach works.

Good luck!
Ewout

I got it and the image works. However, when inserting the image the footer gets to large and is not fully displayed.

Is it possible to align the image to the right?

Using

<img src=”https://www.woodiful.nl/wp-content/uploads/2014/08/Trees-for-All_logo2.jpg&#8221; align=”right” width=45 height=60>

doensnt work.

Try using CSS instead, you can use mm & cm as units too (you don’t specify a unit now).
It’s much more reliable to use tables for layout formatting in PDF (floats don’t work either), but for that you really need to edit the template. Good luck!

Using the following code makes the top logo align right aswell. Besides there is a strange error in the PDF doc: “Image not readable or empty
/home/sandedv….”

Any idea how to fix it?

<style type=”text/css”>
<style>
img {
float: right;
}
</style>
<img src=”https://www.woodiful.nl/wp-content/uploads/2014/08/Trees-for-All_logo2.jpg&#8221; width=45 height=60>

SW Online Marketing & Media | Poststraat 26f | 5038 DH Tilburg | T: 06-33948537 | E: [email protected] | https://www.woodiful.nl

KvK-nummer: 58939652 | BTW-nummer: NL060796376B01 | IBAN: NL33 INGB 0006563707

there’s a stray style tag there, which might cause some unexpected behavior. I would just put the css in the img tag:

<img style="float:right" src="https://www.woodiful.nl/wp-content/uploads/2014/08/Trees-for-All_logo2.jpg" width=45 height=60>

A few diagnostic questions about the error:

• Where do you see that error exactly?
• Is that image present on the server / is there a missing image in your pdf?
• Do you also get that error in the unmodified simple template (without the image in the footer)?

Sorry I guess I copied the wrong code, I meant this code makes the logo go to the right aswell:

<style>
img {
position: absolute;
right: 0px;
top: 0px;
z-index: -1;
}
</style>
<img src=”https://www.woodiful.nl/wp-content/uploads/2014/08/Trees-for-All_logo2.jpg&#8221; width=45 height=60>

SW Online Marketing & Media | Poststraat 26f | 5038 DH Tilburg | T: 06-33948537 | E: [email protected] | https://www.woodiful.nl

KvK-nummer: 58939652 | BTW-nummer: NL060796376B01 | IBAN: NL33 INGB 0006563707

Answers to your questions:
– The error appears next to the logo (right side)
– There is no image (next to the trees-for-all logo)
– I don’t get the error in the unmodified template

Thanks for your time, I appreciate!

Perhaps you also still have that old code I gave you with the <img> tag in the template files? It’s the only thing that I can think of now… That specific snippet would search for the image (‘footer-logo.png’) in your template folder.

When adding the code <img src=”<?php echo $wpo_wcpdf->export->template_path; ?>/footer-logo.png”/> to the template, the error appears at the top instead of the bottom. Still, the toplogo gets aligned to the right side.

Right now I resolved the error somehow with this code:

<style>
img {
position: absolute;
right: 0px;
top: 0px;
z-index: -1;
}
</style>
<img src=”https://www.woodiful.nl/wp-content/uploads/2014/08/Trees-for-All_logo2.jpg&#8221; width=45 height=60>

SW Online Marketing & Media | Poststraat 26f | 5038 DH Tilburg | T: 06-33948537 | E: [email protected] | https://www.woodiful.nl

KvK-nummer: 58939652 | BTW-nummer: NL060796376B01 | IBAN: NL33 INGB 0006563707

However, the top logo still gets aligned to the right aswell. Any idea how to solve this last issue?

Thanks

yes, simply put the css in the img tag instead like I suggested before. Orr add a class to the img and use that selector in your stylesheet/inline styles.

I think that error is because the file ‘footer-logo.png’ is not in your pdf template folder.

Hi Ewout,

Thanks for your time. It finally worked using the following code:

<img style=”position:absolute; right:0px” src=”https://www.woodiful.nl/wp-content/uploads/2014/08/Trees-for-All_logo2.jpg&#8221; width=45 height=60>

SW Online Marketing & Media | Poststraat 26f | 5038 DH Tilburg | T: 06-33948537 | E: [email protected] | https://www.woodiful.nl

KvK-nummer: 58939652 | BTW-nummer: NL060796376B01 | IBAN: NL33 INGB 0006563707