Testing the use of get_post_type_archive_link to generate archive permalinks for cpts
Print-Pro-Matic Lazy-load Image Test
By default, WordPress will add loading=”lazy” to all img tags that have width and height attributes present. Normally this is desired. However, if a page has many images and is to be printed, often times images further down the page have not yet loaded, leaving large spaces as placeholders for when the user finally scrolls down that far and the image loads. Good for the web, bad for a PDF.
Print-Pro matic now offers the option to selectively turn-off this default loading="lazy" attribute for images for the entire site.
Below is a series of images with width and height defined. By default lazy-load should be enabled, but with the option turned on, the lazy-load is disabled, allowing the images to fully load on the page in preparation for printing.
The New Print View Method
The more advanced method is by using a custom print_view variable that turns off the lazy-load only when the print is triggered. To accomplish this, first add the following to the child-theme’s function.php file: (note, this is no longer required as of version 2.1.2)
function printpromatic_query_var( $vars ) {
$vars[] = 'print_view';
return $vars;
}
add_filter( 'query_vars', 'printpromatic_query_var' );
function print_with_no_lazy_load() {
if ( get_query_var( 'print_view' ) ) {
return false;
}
return true;
}
add_filter( 'wp_lazy_loading_enabled', 'print_with_no_lazy_load' );Next we add the print-me shortcode with a unique ID and url using the %print_view% placeholder:
[print-me id="donkey" url="%print_view%"/]Ad of version 2.1.2 there is a new option to add the print_view query var from the plugin options page–so no need to manually add this to the child-theme’s function.php file. This option will also add the print_with_no_lazy_load function. Version 2.1.2 also added a url_target attribute to allow the print version to load in the same tab:
[print-me id="monkey" url="%print_view%" url_target="_self"/]
Quick Test – Collapse by Class
This is a test on how to handle retroactively applying a collapse-expand feature to any element with a defined class.
The idea is to first have an element with a specific class that holds a heaping amount of content, like the one below:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ok, that’s a lot of text. Now within collapse-pro-matic check for this class, if found append or prepend a trigger and then adjust the target to a defined minimum height.
This is something that would be applied to every element with the defined class, across all posts, future, present and past.
Collapse-O-Matic Button
[expand title="Push me" swaptitle="Push" trigclass="noarrow my_button" tag="div"]this is the hidden content[/expand]this is the hidden content
CSS
.my_button {
background-color: white;
color: black;
border-radius: 6px;
font-family: by;
padding: 5px;
width: 99px;
text-align: center;
border: 2px solid #98FB98; /* Green */
}
.my_button.colomat-hover{
background-color: #eb234c; /* red */
color: white;
text-align: center;
}Collapse-Commander Sub Elements
Print-Pro-Matic Print External URL
This is a test to see if print-pro-matic can print an external URL:
[print-me url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSC6kmo4lmXRBc7QHMmg_s2Dq4LBg0FHclszFjAhCW_wYo814nBWM_mQhAryRayPNdQJLCXw0gNVbPo/pubhtml"/]
There will be an issue with cross domain origin, however a url on the same domain can be printed:
[print-me url="https://spacedonkey.de/donkey/donkey-in-a-bucket/"/]Print-O-Matic non existing element test
This is a test to see how print-o-matic and print-pro-matic handle targeting a non-existing element:
[print-me target="#aintnosunshinewhenshesgone" /]No element? no problem… do nothing.
Now what happens if we have one element that does not exist in a list of elements:
This is a little div with an id of ‘printbox’
[print-me target="non_elem, #printbox" /]Print-O-Matic External Print Trigger – Target by Class
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:
<button id="my_print_button" class="printomatic printtarget-#my_print_target">Print Trigger</button>
Step 3
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:
[print-me id="my_print_button" printstyle="external"/]Collapse O Matic Tag Class
Quick test to demonstrate how to use the tag and css to control the look of a trigger.
The Shortcode
[expand title="trigger" tag="h4"]hidden target content[/expand]
The CSS
h4.collapseomatic {
color: blue;
}The Results
trigger
hidden target content
Collapse-Pro-Matic Excerpt Adjustment
This is an example of a simple expand element with an excerpt:
[expand title="Trigger Text" excerpt="The excerpt"]Hidden Content[/expand]Trigger Text
The excerpt
Hidden Content
The excerpt can be repositioned above the trigger by adding excerptpos=”above-trigger” like so:
[expand title="Trigger Text" excerpt="The excerpt" excerptpos="above-trigger"]Hidden Content[/expand]The excerpt
Trigger Text
Hidden Content
The following CSS can be used to control the vertical spacing between the three components. So that we don’t adjust all expand elements, the first step is to provide a unique class for each component:
[expand title="Trigger Text" excerpt="The excerpt" excerptpos="above-trigger" trigclass="skinny_trig" excerptclass="skinny_excerpt" targclass="skinny_targ" ]Hidden Content[/expand]Now each can be controlled using the following css classes:
.skinny_trig {
border: 1px dotted red;
}
.skinny_excerpt {
border: 1px dotted green;
}
.skinny_targ {
border: 1px dotted blue;
}That results in borders around each:
to make things as compact as possible, we remove the following padding and margins:
.skinny_trig {
/* border: 1px dotted red; */
padding: 0 0 0 10px;
line-height: .9;
}
.skinny_excerpt {
/* border: 1px dotted green; */
line-height: .8;
}
.skinny_targ {
/* border: 1px dotted blue; */
margin: 0;
line-height: .8;
}And the final results are:
The excerpt
Trigger Text
Hidden Content