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"/]
