As of print-o-matic version 2.0.1 the ability to use class to target a print element in external print triggers has been added. Basically it works the same as using the data-print_target attribute but instead uses a unique classname in the format of printtarget-<target_id>.
Step 1
Create a target element. The element below is a div with an id of ‘my_print_target’:
<div id="my_print_target">This is the print target wrapped in a div with an element of 'my_print_target' as explained above</div>
This is the print target wrapped in a div with an element of ‘my_print_target’ as explained above
Step 2
Add an external trigger using the new class-trigger method. We’ll use a simple button like so:
Like in the original example, we need to add the hidden print trigger using a print-me shortcode with the same id as our external trigger and a printstyle=”external” attribute:
In the case of a large gallery of images, it could happen that a page break would split images across pages.
For example, what happens when this gallery is printed?
Flight of the Conchords
BMW K1200RS riding into the sunset through Death Valley, California
Here is an example of using Print-O-Matic to print a WordPress Chart using wp-charts.
[wpcharts type=”piechart” legend=”false” titles=”Title 1, Title 2, Title 3, Title 4″ values=”3,7,5,12″ id=”my_chart”]
[print-me target=”%prev%”/]
[print-me target="%prev%"/]
Works in 2.0. Pre 2.0: It seems we need to wrap the chart shortcode in a div so we can target that div and include it’s related javascript. Still not. maybe we also need to include the chart js on the page? Nope. It seems the HTML Canvas element is not cloning it’s content that was generated by the javascript… hmmm.
This is a test for printing various forms using Print-O-Matic and Print-Pro-Matic plugins.
Standard HTML Form
This is some text inside the target div
OK, for some reason the current theme (Twenty-Seventeen) forces all form elements to display:none when printed. This works on other themes.
[print-me title="Print Standard HTML Form" alt="Print the HTML form" target="#html_form, #texter"/]
[print-me title=”Print Standard HTML Form” alt=”Print the HTML form” target=”#html_form”/]
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>
This is our target print element
First we create a kind of roll-your-own print trigger. The details that must be included are:
a unique id
a print-o-matic class such as printomatic or printomatictext
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 shortcode will not output anything to the page.
That’s it. You are done! Let us know on the WordPress Support Forum if you require any further assistance.
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:
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: