See all tutorials

Tutorials » How to include a static image in a generated PDF file

It is quite common that generated PDF files have embedded images in them (like logo images, advertising images, charts and so on). This tutorial covers the functionality to include a static logo image in a generated PDF file.

This tutorial will continue one of the previous tutorials: How to generate a simple PDF file.

Webpagebytes CMS administration interface can manage static files and these can be used in the generated content. In this tutorial case an uploaded image will be used in the generated PDF content.

To include an image in a PDF file generated with Webpagebytes CMS take the following steps

Upload a logo image under CMS Files section

Step 1

In Webpagebytes CMS administration interface navigate to Files section and load the below logo image. Note the image External Key once uploaded because it will be used in the next step.
Logo image

Use the image in the XLS-FO content

Step 2

To use an image in the XLS-FO fragment, this tutorial will use fo:external-graphic element and the src will be the base64 content of the image loaded at Step 1.

To generate the base64 content of an uploaded image, Webpagebytes CMS implemented the following Freemarker directive .
The attribute 'embedded' will generate the content of the image as base64, instead of an url path. The site page XLS-FO needs to be replaced with the following XML code.

<?xml version="1.0" encoding="UTF-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master master-name="A4" page-width="210mm" page-height="297mm" margin="10mm">
    <fo:region-body margin-top="25mm" />
    <fo:region-before region-name="header" />
    </fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="A4" initial-page-number="1">
    <fo:title> Webpagebytes CMS PDF example</fo:title>
    <fo:static-content flow-name="header">
        <fo:block>
	    <fo:block-container position="absolute" top="2mm" left="2mm" width="40mm" height="20mm">
                <fo:block>
                     <fo:external-graphic src="<@wpbImage externalKey="8c319c58-578e-4dbe-954d-b21c61e67bbe" embedded="true" />" />       
                </fo:block>                	                                         
            </fo:block-container>
        </fo:block>
    </fo:static-content>
    <fo:flow flow-name="xsl-region-body">
        <fo:block>
           First PDF with Webpagebytes CMS!           
        </fo:block>
    </fo:flow>
</fo:page-sequence>
</fo:root>

Test the PDF generation

Step 3

Open a browser and navigate to http://[your_server_and_port]/pdf to get the generated PDF file.

Fork me on GitHub