Embed image with link from custom field url

Self-Hosted | v5
1

Hi there,

I would like to embed an image which will be a link. F.e. i have an online payment provider which generates payment links. I than use the $invoice.custom2 field (text) to add the link to the invoice.
When I use $invoice.custom2 the correct url is displayed in the invoice and is clickable.

Now I would like to do something like this, but it doesn’t work:

<div class="invoice-body-pay" style="float: right; width: 66%;">
   <a href="$invoice.custom2">
      <img src="https://invoice.example.com/public/images/payment-banner.png"  width="360px" alt="Pay with your bankaccount.">
   </a>
</div>

I also tried another option using the image as a background for a clickable div but no luck.

   <div style="float: right; width: 660px; height: 120px; background-image: url('https://invoice.example.com/public/images/payment-banner.png'); background-size: contain; background-repeat: no-repeat; background-position: left;">
      <a href="$invoice.custom2" style="display: block; width: 660px; height: 120px;">
         <!-- Empty anchor tag to make the entire div clickable -->
      </a>
   </div>

How can I make this function as expected? Thanks in advance!

2

Hi,

I’m not sure if it’s supported, does it work if you hardcode the link in place of the $invoice.custom2 variable?

3

Hi @hillel,

Thanks for the suggestion. It did not work either. Would it be hard to make it work in a future version (f.e. by adding a link field option) or would you have another idea?

Thanks in advance!

4

I assume this isn’t supported, feel free to create an issue on GitHub to request it.

5

Thanks, I just did:

https://github.com/invoiceninja/invoiceninja/issues/9901