Custom Print View for all single items

support
1

I’m trying to create a print view for all “single” pages. Essentially I just want a print button that I will add to “single.html” that will take all of the content from that single as input, and display that single in a printable format. Any ideas on how to accomplish this?

2

Could you clarify what you mean? PDF? Print-friendly CSS? Print-friendly CSS in a new page? Print-friendly CSS on the same page?

3

Print friendly css on a new page.

4

You can accomplish it by wrapping the print button code within a condition.

See: Conditionals

5

You can made this with CSS and @media selectors.

See it in my sample here

I use CSS tachyons and have the print stuff in CSS print.css
hope this helps

6

@ju52 is right. this should not be done via outputformats or any hack because there is already a simple <link rel="stylesheet" media="print" href="your-printstylesheet.css"/> existing and all you need to do is add your styles for print to such a file. Defining two pages, one for screen, one for print, makes the visitor load two pages. If they decide to print your page via “CTRL+P” or however their browser does it then the page get’s printed in it’s design anyway. Why not doing it proper right away and add a script to your print button that just calls the dom-windows internal printer. <a href="javascript:window.print()">Print</a>

https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

7

Don’t like this

  • needs java
  • waste more paper

forgot

  • hidden gem in the printed page, QR code with page URL to go back online
8

Sorry, but people who disable Javascript (not Java) know how to print and this religious discussion is probably wrong in a generic discussion about a button and where please does a print stylesheet waste more paper?

9

I’m sorry, I’ve apparently worded this horribly. I want a new route (i.e. /print/single). This is for a recipe book so the print display will be radically different from the view page, so the actual layout will be different, no amount of css hacks will be sufficient.

I need a print button I can add to single.html, that will redirect to a new route, like print, and display that single in that new print.html format.

10

You would need to configure a Custom Output Format for a .print.html format.

11

Thank you! That took a lot of messing around to figure it out, but finally have the /print/ route setup and working.

12

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.