2020.2

Creating and using image sprites
Step 1. Create a file that contains a collection of images.
Static images may go in any type of image file. Store images that need be added dynamically to
the template, in one PDFfile, one image per page.
There are several tools to combine image files into a singe PDF. ImageMagick is one of them.
You could use the convert command of the ImageMagick library:
convert C:/myimages/*.jpg C:/myimages/image-collection.pdf
You could also use Connect Designer itself: create a print template with the size of your
images and set the page margins to 0. Create a script that loops over your images and adds
them to the text flow of the template. Subsequently generate PDF output and use the resulting
file as your collection file.
Step 2. Add the file that contains the collection of images to the template's Resources (see
"Adding images" on page270).
Step 3. Display part of the collection file as an image in the template.
l
Static images that are part of an image file can be displayed via Cascading Style Sheets
(CSS). This technique is much used in web design. In this technique, the file that contains
a collection of images is called an image sprite. The trick is to create a Box (or Div) for
each image and give that box an ID (see "Boxes" on page253). Then use the ID in a style
sheet to select the Box and write a style rule (see "Styling templates with CSS files" on
page287) that sets its background image to the image sprite and positions the image.
For an explanation and examples of this style rule, see
https://www.w3schools.com/css/css_image_sprites.asp.
l
Dynamically added images are loaded in a script. To retrieve one page from a PDF file
in a script, add the page parameter to the file path and set that as the source of the image.
Here is an example (assuming that the page number is stored in a variable pageNumber):
var imageStr = "";
var imagePath = "file:///C:/image-collection.pdf?page=" +
pageNumber;
imageStr += '<img src="' + imagePath + '">';
results.after(imageStr);
Page 984