Support » Plugin: Print-O-Matic » How to create a presentation of the printable document

  • Resolved Trebly



    The documentation seems to not explains how to create a custom display format for the printable document.

    If We want to use the “Custom Print Page Style” we need to know the styles used for the dislay. But there is no information about these styles. Because of the “clone” use the debogger cannot access the elements as the “top page” and bottom which could give this information.
    If we try to use the “Print Page Top HTML” or “Print Page Bottom HTML” this code need to use elements of the document (DOM) as the tittle. This means to write js code into this HTML header or footer.

    I could begin to read the code to understand how the printable document is built.
    If I am able to do so, I am sure that I can developped what I need, but how others users can use this features ?

    May be I have missed something ?
    Can you confirm that to produce a custom “Print Page Top” or bottom I must write the html with is script and for this look in detail at the way that you use to produce the document ?

    Thanks for answering to avoid time lost.

    Best regards


Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor twinpictures


    can you explain more about what exactly you mean by:

    how to create a custom display format for the printable document

    There are spaces to add HTML to the top and bottom of the print page available in the plugin settings.
    What exactly are you trying to accomplish?


    Note : the English to French auto translation Google give me exactly what I mean in French and in Spanish and Italian so I have not another way than use more details.

    Create a custom versus default form for printing, I mean :

    • Top of each page
    • bottom of each page

    For this there are the custom fields “Print Page Top HTML” or “Print Page Bottom HTML” but :

    • The doc tell about “added” code, but to what ?
    • These fields if there are without js script code cannot contain any variable data

    In fact custom format can mean : replace the default content (which seems defined into the code, I am checking)
    The default format gives for:

    • the top of print-page

      Date + Title

      (if too long truncated)

    • At bottom :

      Page number

    We don’t know which css are used for : top – content – bottom

    A custom top or bottom should contain a block of generated html from fixed element and variable elements as the title of the document or others elements hidden in normal display but usable for printing. More it should access and use pagination.

    This is what I meant.

    Best regards

    note : for what I have seen the variable custom elements are the css.
    I don’t know how to defien into top or bottom

    • the date (with suitable format) or any js standard function result
    • current page number / total page number
    • any element (hidden or not) of the document

    I will probably add elements to print generated as display:none element by content.php (or other content generator to be printed into to or bottom and containing images

    • This reply was modified 1 year, 8 months ago by Trebly.
    Plugin Contributor twinpictures


    Adding custom content to the top/bottom of the print page, can be acheived in a number of ways.

    1. If the content is static, it can be added to the Print Page Top HTML and Print Page Bottom HTML found under:
    Dashboard > Settings > Print-O-Maitc

    2. If the content is dynamic it can must also be placed on the display page. The element can then be hidden display page and shown on the print page using CSS.

    3. If it’s a more advanced custom layout, print-pro-matic should be used. See this post for detailed instructions on how to set up a custom print template with print-pro-matic:

    Everything else is related to CSS and goes beyond the support of our free plugin. However, we added a few links that should point you in the right direction.

    This can be printed in the header as part of the browser’s print-dialog box. Under more settings, there is an option to print headers and footers. Alternatively you can add this this element on the page and hide it using CSS as mentioned above

    Current page number / total page number:

    Any Element:
    Print-Pro-Matic allows print-only elements to be defined. However, you can get around this limitation with the free version by understanding how CSS works.

    Issue marked as resolved.

    Thanks for this so complete and quick answer.

    I would add some elements now (I describe what I am going to implement with the detailed knowledge that I got with your answer)

    A- Data transmission from php theme to js :

    • Using elements and attribute “data-<attr>”. The elements are hidden and you get data from element with js. As It is done using normalized <attr> names. this is an easy way to communicate directly. This need data conversion depending of the type of values received for the various known<attr>
    • Using a script into the html code (used fro print-o-matic), script defining directly a var (an array). This has the inconvenient thats vars are not into the same block of js code, with we get, in my opinion a less clear and more difficult encapsulation and debugging

    B – Encoding the “Print Page Top HTML” and “Print Page Bottom HTML” :

    • the parameters give the shape for all printed pages for the html top and bottom, but they use of “shortcodes-like” inside (list to elaborate by each user-developer of theme or sub-theme).
    • a treatment into “printomat.js” decode the shortcodes found and uses the “.data()” array received as replacement. This need just one little new function into printomat.js. A more elaborated solution is an object which can contain both data acquisition and treatment. The result is fully independent of the content : the developer uses his syntax into his php code elements and use them to give instruction to the object decoder.

    C – Configuration of print : into printomat.js : :
    a user defined function set by a script written from php and called (standard name) just before var w ='', 'printomatic print page',... displays an intermediate window to get the needed data and or show-hide elements to display for the context (note : different from the print-o-matic parameters, this script can be written by the different *.php used to display each type of document – so containing different classes (or id, names… any valid selector of content elements). The script then ask for execution detail of hide-show or changes of content of elements to perform the array created contains needed data to perform changes to manage cloning).

    D – Set complements of css for “@media print” blocks for formatting header and footer of print pages (Copyright, date, etc..)

    Best regards


    • This reply was modified 1 year, 8 months ago by Trebly.
    • This reply was modified 1 year, 8 months ago by Trebly.
    Plugin Contributor twinpictures


    What you are attempting to do is a bit more advanced that what the plugin was designed to accomplish. We have a pro version called Print-Pro-Matic that comes with a few extra features that would greatly assist you.

    One nice feature is the the ability to set up a completely custom print-view or an entire print-only template. This would most-likely be the smartest way to achieve your goals.

    In addition a very high level of support is included–we would even be happy to set up a working example on your site as port of the included support.

    Please let us know here on the form if we can be of any further support with the features of our free plugin.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to create a presentation of the printable document’ is closed to new replies.