Category: print-o-matic

January 2016

March 2016

Print

As of version 1.6.7c we introduced a new printstyle value ‘external’ for Print-O-Matic. Now it is possible to create an external button to trigger a print in a less-hacky way. Here is an example of this works: To print the following div with an id of ‘print_me_please’:

<div id="print_me_please">This is our target print element</div>

First we create a kind of roll-your-own print trigger. The details that must be included are:

1. a unique id
2. a print-o-matic class such as printomatic or printomatictext
3. a data-print_target attribute

For example:

<button id="my_print_button" class="printomatic" data-print_target="#print_me_please">Print Trigger</button>

Which will output:

Print Trigger

The final thing we need to do is include a hidden print trigger using a print-me shortcode with the same id as our external trigger and the new external printstyle attribute. This shortcode must be placed someplace on the same page, and will load in all the required scripts and settings to make the print trigger work correctly.

[print-me id="my_print_button" printstyle="external"/]

This is a quick test to inject a logo at the top of a print-pro-matic page using only css.
In this case, the print element has a class of #post-2182 and it is targeted as normal:

[print-me target="#post-2182"]

However now we add the following css to the our theme:

@media print {
   #post-2182::before {
      content: url(https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles-300x223.jpg);
   }
}

This will place the logo in the ::before pseudo class of the targeted print element on the print page. however if the images does NOT exist on the page then it will not have enough time to load before print is triggered. Let’s try it out:

[print-me target="#post-2182" pause_before_print="500"/]

Probably now image right? Now click the print icon again. Image. How to solve this?

Guess we need to use top_html and bottom_html to define custom content and provide a bit of pause_before_print time.

This is how one uses the %ID% placeholder for targeting the post_id

[print-me target="#post-%ID%"/]