Skip to main content

Configure images in HTML templates

Zuora

Configure images in HTML templates

After an HTML template is created, you can configure images in the HTML template in the following approaches:

  • Directly adding images from the Internet to HTML templates
  • Uploading local images and adding them to HTML templates

This tutorial takes invoices as an example; the configuration procedure is similar for credit memos and debit memos.

Add images from the Internet to HTML templates

To directly add images from the Internet to an HTML template through the Zuora UI, perform the following steps:

  1. In the HTML template, click the Row block that you want to add an image to.

  2. In the Content tab, drag the Image component into the HTML template.

  3. In the HTML template, click the Image block.
    The Content panel is displayed on the right of the template editor

  4. In the Images section, configure the following information:

    • In the Image URL field, enter the URL of an image from the Internet. Note that the image URL must be publicly available.

    • Optional: Configure the width, alignment, and alternative text for the image.

  5. In the Action section, configure the image opening mode.

    • In the URL field, enter the URL to display in the address bar for the image.

    • From the Target list, select Same Tab or New Tab to determine whether the image is displayed in the existing tab or in a new tab after being clicked.

  6. In the General section, configure the container padding for the image.

  7. In the HTML template editor, click Save to save the HTML template.

You can also use merge fields to construct a dynamic image URL and enter it in the Image URL field. For example, www.yourcompany.com/images/invoices/{{Invoice.InvoiceNumber}}.png. If the invoice number is INV0009, it will construct a URL www.yourcompany.com/images/invoices/INV0009.png, and load the image file during the generation of the corresponding invoice PDF file.

Upload local images to HTML templates

To upload local images to an HTML template through the Zuora UI, perform the following steps:

  1. In the HTML template, click the Row block that you want to add an image to.

  2. In the Content tab, drag the Image component into the HTML template.

  3. Click the Image block in the HTML template.
    The Content panel is displayed on the right of the template editor.

  4. In the Images section, configure the following information:

    1. Click Upload Image, navigate to the location of a local image, and click Open.
      The selected image is displayed in the Image block.
      You can also click Select image to choose uploaded images. In the Select Image dialog that displays all the images already uploaded into the HTML template editor, select an image and click Use to add the image to the HTML template. An uploaded image can be used across multiple HTML templates in the same tenant.

    2. Optional: Configure the width, alignment, and alternative text for the image.

  5. You can also select uploaded images by clicking Select image. It lists all uploaded images. You can pick an image and click the Use button to use the image in the HTML template. Note: an image can be used across multiple HTML templates.

  6. In the Action section, configure the image opening mode.

    1. In the URL field, enter the URL to display in the address bar for the image.

    2. From the Target list, select Same Tab or New Tab to determine whether the image is displayed in the same tab as the template or in a new tab after being clicked.

  7. In the General section, configure the container padding for the image.

  8. In the HTML template editor, click Save to save the HTML template.

Delete uploaded images from HTML templates

If an image is no longer used, you can delete it from uploaded images. The deletion of an uploaded image does not impact the templates that are using the image. The reason is that the image is embedded as part of the HTML template.

To delete an upload local image from the HTML template editor through the Zuora UI, perform the following steps:

  1. In the HTML template, click an existing Image block.
    The Content panel is displayed on the right of the template editor.

  2. In the Images section, click Select image

  3. In the Select Image dialog that displays all the images uploaded into the HTML template editor, select an image and click Delete to delete the image. 

  4. In the HTML template editor, click Save to save the HTML template.