pythonmacosimagepdf

How to generate a PDF with a grid of images per page?

Our work involves visually inspecting a number of plots together. All plots of same size. we want to print them in pages to study. Something like a 8.5"x11" paper with 1" margin gives me a 7.5"x10" space with 3:4 aspect ratio. This space can be filled with 9 or 16 images each of the same aspect ratio. Adding some space between images would be great (I think the term is gutter). My question is around how to generate this PDF from the individual source images?

Constraints:

So far we have tried:

Solution

  • Most modern computers have a browser which is perfect for command line convert a Page of images to PDF in one single command.

    HTML is great for templating images as it does not matter if the file is JPEG or PNG it will often handle a mix even with the other extension!

    However it will embed a JPEG smaller if possible than a PNG. thus we template with that in mind for a contact sheet of 00.jpg to 99.jpg. Thus if they are PNG first rename them to .jpg!

    The aim here is 25 images to be opened automatically in the same folder as the HTML contact sheet.

    Compacted HTML to show one starter sheet of 4 pages which can be easily changed to less or more pages or images. It is "targeted" for A4 rather than letter but should be fairly easy to tweak as required. Just remove or add pixels in relative proportions. I have added a rough first attempt for letter "style" below this code.

    <!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Table 001</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media print { @page { margin: 20px; size: 794px 1122px; } body { margin: 0px; } }
#table { font-family: Arial, Helvetica, sans-serif; border: 1px solid; border-spacing: 10px; width: 764px; height: 1092px; }
#table td { text-align: center; border: 0.5px solid; height: 190px !important; width: 140px !important; }
img { max-height: 190px; max-width: 135px; }
</style></head><body>
  <table id="table">
    <thead>
      <tr><th>"Column00"</th><th>"Column01"</th><th>"Column02"</th><th>"Column03"</th><th>"Column04"</th></tr></thead>
    <tbody>
      <tr><td><img src="00.jpg"></td><td><img src="01.jpg"></td><td><img src="02.jpg"></td><td><img src="03.jpg"></td><td><img src="04.jpg"></td></tr>
      <tr><td><img src="05.jpg"></td><td><img src="06.jpg"></td><td><img src="07.jpg"></td><td><img src="08.jpg"></td><td><img src="09.jpg"></td></tr>
      <tr><td><img src="10.jpg"></td><td><img src="11.jpg"></td><td><img src="12.jpg"></td><td><img src="13.jpg"></td><td><img src="14.jpg"></td></tr>
      <tr><td><img src="15.jpg"></td><td><img src="16.jpg"></td><td><img src="17.jpg"></td><td><img src="18.jpg"></td><td><img src="19.jpg"></td></tr>
      <tr><td><img src="20.jpg"></td><td><img src="21.jpg"></td><td><img src="22.jpg"></td><td><img src="23.jpg"></td><td><img src="24.jpg"></td></tr>
    </tbody>
  </table>
  <table id="table">
    <thead>
      <tr><th>"Column05"</th><th>"Column06"</th><th>"Column07"</th><th>"Column08"</th><th>"Column09"</th></tr></thead>
    <tbody>
      <tr><td><img src="25.jpg"></td><td><img src="26.jpg"></td><td><img src="27.jpg"></td><td><img src="28.jpg"></td><td><img src="29.jpg"></td></tr>
      <tr><td><img src="30.jpg"></td><td><img src="31.jpg"></td><td><img src="32.jpg"></td><td><img src="33.jpg"></td><td><img src="34.jpg"></td></tr>
      <tr><td><img src="35.jpg"></td><td><img src="36.jpg"></td><td><img src="37.jpg"></td><td><img src="38.jpg"></td><td><img src="39.jpg"></td></tr>
      <tr><td><img src="40.jpg"></td><td><img src="41.jpg"></td><td><img src="42.jpg"></td><td><img src="43.jpg"></td><td><img src="44.jpg"></td></tr>
      <tr><td><img src="45.jpg"></td><td><img src="46.jpg"></td><td><img src="47.jpg"></td><td><img src="48.jpg"></td><td><img src="49.jpg"></td></tr>
    </tbody>
  </table>
  <table id="table">
    <thead>
      <tr><th>"Column00"</th><th>"Column01"</th><th>"Column02"</th><th>"Column03"</th><th>"Column04"</th></tr></thead>
    <tbody>
      <tr><td><img src="50.jpg"></td><td><img src="51.jpg"></td><td><img src="52.jpg"></td><td><img src="53.jpg"></td><td><img src="54.jpg"></td></tr>
      <tr><td><img src="55.jpg"></td><td><img src="56.jpg"></td><td><img src="57.jpg"></td><td><img src="58.jpg"></td><td><img src="49.jpg"></td></tr>
      <tr><td><img src="50.jpg"></td><td><img src="61.jpg"></td><td><img src="62.jpg"></td><td><img src="63.jpg"></td><td><img src="64.jpg"></td></tr>
      <tr><td><img src="65.jpg"></td><td><img src="66.jpg"></td><td><img src="67.jpg"></td><td><img src="68.jpg"></td><td><img src="69.jpg"></td></tr>
      <tr><td><img src="70.jpg"></td><td><img src="71.jpg"></td><td><img src="72.jpg"></td><td><img src="73.jpg"></td><td><img src="74.jpg"></td></tr>
    </tbody>
  </table>
  <table id="table">
    <thead>
      <tr><th>"Column05"</th><th>"Column06"</th><th>"Column07"</th><th>"Column08"</th><th>"Column09"</th></tr></thead>
    <tbody>
      <tr><td><img src="75.jpg"></td><td><img src="76.jpg"></td><td><img src="77.jpg"></td><td><img src="78.jpg"></td><td><img src="79.jpg"></td></tr>
      <tr><td><img src="80.jpg"></td><td><img src="81.jpg"></td><td><img src="82.jpg"></td><td><img src="83.jpg"></td><td><img src="84.jpg"></td></tr>
      <tr><td><img src="85.jpg"></td><td><img src="86.jpg"></td><td><img src="87.jpg"></td><td><img src="88.jpg"></td><td><img src="89.jpg"></td></tr>
      <tr><td><img src="90.jpg"></td><td><img src="91.jpg"></td><td><img src="92.jpg"></td><td><img src="93.jpg"></td><td><img src="94.jpg"></td></tr>
      <tr><td><img src="95.jpg"></td><td><img src="96.jpg"></td><td><img src="97.jpg"></td><td><img src="98.jpg"></td><td><img src="99.jpg"></td></tr>
    </tbody>
  </table>
</body></html>

    USA Letter style:

    <style>
@media print { @page { margin: 20px; size: 816px 1056px; } body { margin: 0px; } }
#table { font-family: Arial, Helvetica, sans-serif; border: 1px solid; border-spacing: 10px; width: 786px; height: 1025px; }
#table td { text-align: center; border: 0.5px solid; height: 178px !important; width: 145px !important; }
img { max-height: 178px; max-width: 140px; }
</style>

    The images will be autoloaded. Look at column 1 and see the duplicate rotated image is auto scaled to fit the box at the max in either width or height. enter image description here

    Now on any platform we can run Chrome based or Edge browser for headless print to PDF.

    This was my one line command on a Windows copy but will be similar on other desktops. enter image description here
    Works instantly, with 100 images in Letter page format, just like a CATalogue:
    US Landscape starter for adjusting:

    <style>
@media print { @page { margin: 10px; size: 1066px 816px; } body { margin: 0px; } }
#table { font-family: Arial, Helvetica, sans-serif; border: 1px solid; border-spacing: 7px; width: 1046px; height: 786px; }
#table td { text-align: center; border: 0.5px solid; height: 136px !important; width: 178px !important; }
img { max-height: 136px; max-width: 178px; }
</style>

    enter image description here