[Resolved] Print PDF Custom Page Layout

[Author]

Posts

[liatG]

I am trying to get a "Print PDF" button for a specific article type for the website. Our current ways of doing this are either by creating the PDF manually and then uploading it to the website or creating a custom post type, including the elements that are to be printed and trying to adjust the layout.

Both ways work but it is a bit redundant. Also, the issue with creating a custom post type is that the layout has to be coded in. We were looking for functionality where we don't have to use a custom post type but achieve the functionality.

An example we would like to achieve is from hidden link after you click the "print essentials" or "print everything" buttons

knitfreedom.com

[Christian Cox]

Hi, Toolset doesn't have any built-in print triggering functionality like this, but I don't really see the need for an additional upload or custom post type unless you want something very custom. Most sites use CSS print stylesheets for this purpose, restyling the existing content, but optimized for print. It looks like the example you shared actually creates separate window/tabs and loads the page again either with or without images. A print stylesheet doesn't require a page reload, it works with the markup already loaded by the browser to provide a design optimized for printing.
https://www.sitepoint.com/css-printer-friendly-pages/
https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/

I looked at the links and the page source codes and the example you shared doesn't seem to be doing anything extremely advanced. Each link simply opens up the same post in a new tab, with an extra URL parameter added like so:
hidden link
- or -
hidden link

I'm guessing that based on that URL parameter, there is some PHP conditional structure in the template that changes the contents of the page. I can see at least these two changes:
- A JavaScript snippet is added to the page, triggering the main print dialog with window.print() when the page loads. See print-dialog.png
- Certain images are not included in the page contents in the printNoImages version, so those items are not printed. See img-source.png and no-img-source.png

You can create multiple Content Templates in Toolset to accomplish something similar. You can apply any template to any post programmatically by adding a URL parameter like so:

<a href="<em><u>hidden link</u></em>" target="_blank">Print this post, with template 123</a>
<a href="<em><u>hidden link</u></em>" target="_blank">Print this post, with template 234</a>

Those links would open the same post in a new tab/new window with a different Content Template applied. If you include the same JavaScript snippet in the template, the browser's print dialog will open when the page loads.

But usually it isn't necessary to create completely different templates like this. Usually you can use CSS print stylesheets to redesign the existing content layout, set images to display:none;, modify fonts for legibility, hide entire sections of the output, remove image backgrounds and iconography, hide the main site navigation, etc., to optimize the site for print. Trigger the browser's print dialog when the User clicks a button, and the browser will automatically apply the print stylesheet.