Yay. Another IE issue with Print-O-Matic & Print-Pro-Matic.
This page is currently testing Print-O-Matic Version: 1.6.7b
This print button should print a larger version of the thumbnail image of the donkey below.

A Pluginoven Test Site
Yay. Another IE issue with Print-O-Matic & Print-Pro-Matic.
This page is currently testing Print-O-Matic Version: 1.6.7b
This print button should print a larger version of the thumbnail image of the donkey below.
This is a Dr. Frankenstein experiment with Contact Form 7’s Submit button and the Print-Pro-Matic Print external trigger. When the user clicks submit, the form should also force-launch the print dialogue. Years of working in UI tells us NOT do this, but people still have music playing on page load, so what do we know.
[contact-form-7 id="1018" title="SubPrint"/]
To cross-breed the Submit button with the print-pro-matic print trigger, just follow the following steps.
[submit id:subprint class:printme_trigger]
[print-me target="#wpcf7-f1018-p2316-o1i" external_trigger="subprint"/]
The above will work nicely if there is no validation to consider. However if we only want to print the form after it has passes validation we need another approach.
First: We will not actually have the print triggered via clicking the submit button, so we can remove the id and class in the submit tag in the form:
[submit]
If the submit button does not trigger the print what will? If you notice in the Contact Form 7 edit page, there is an Additional Settings tab. Here we can use Contact 7 own on_sent_ok:
to trigger the print like so:
on_sent_ok: "print_trigger('my_print_trigger');"
Now, finally, we must provide an ID to our hidden print-me shortcode:
[print-me id="my_print_trigger" target="#wpcf7-f1018-p2316-o1" external_trigger="on_sent_ok"/]
deactivated due to spam abuse.
[contact-form-7 id="1018" title="SubPrint"/]
printme_trigger
class that turns anything into a print triggerexternal_trigger
shortcode element to enter the id or ids of the element(s) that should be used as an external triggerAnd this is how it works:
First we need an element that has a unique id. There must also be the ability to add the printme_trigger
class to it.
<button id="my_button" class="printme_trigger">Print</button>
Next we add the print-me shortcode like normal… but also add the external_trigger attribute like so:
[print-me target="#intro_text" external_trigger="my_button"/]
And that’s it! Note: The external_trigger attribute can accept a comma separated list of multiple id’s. Also: When an external_trigger attribute is assigned, no standard print-pro-matic icon or text will be displayed, as the external trigger will be used instead.
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.
Print-Pro-Matic allows loading in an external css file for the print view, rather than have to manually entered all definitions in to the Custom CSS area.
For example, this should load in a css file that gives the target element a lovely purpley dotted border:
[print-me css_url="https://spacedonkey.de/wp-content/uploads/2015/07/purpeat.css" target=".purpeoeater"]
Well, bless my soul rock ‘n roll flying’ purple people eater
Pigeon-toed under-growed flyin’ purple people eater
One-eyed one-horned it was a people eater
What a sight to see!
[print-me url="http://twinpictures.de" title="print Twinpictures"]
[print-me url="http://plugins.twinpictures.de" title="print Plugin Oven"]
here is some more text
This is how one uses the %ID% placeholder for targeting the post_id
[print-me target="#post-%ID%"/]