How to make a Print button on item.md page that prints some elements of item.md, not all

[joejac]

Hello,
I have an item.md page of a blog section, this item .md page has plenty of data displayed on the screen.

I need to include a button on item.md that takes the following elements from the frontmatter:

hero_image: page_hero_image.jpg
media_order: first_image.jpg
media_order: second_image.jpg
title: 'Tittle of page'
page.summary|raw 
page.more-frontmatter-data

and builds a page for the printer, in landscape mode, as shown in the following image:

I can build the HTML/CSS for the printout, but I do not know how to send con clic to the printer. I will need Javascript to interact with a Grav print twig template, I guess.

Any help is very much appreciated.
Thanks

[Karmalakas]

Just use print media CSS and add a button

<button onclick="window.print()">Print</button>

[joejac]

Thank you @Karmalakas I will try it, I saw something similar in this post:

Print Article button

Hi Antineutrinos, Personally when I’ve had to do print versions of html pages I do with with print media queries in css. Smashing Magazine has a good intro to the topic: https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/ EDIT: For the actual button to print you could do this with javascript as such: <button id="printBtn"> print me </button> <script type="text/javascript"> document.getElementById('printBtn').onclick = function printContent() { window.print() …

But I was unsure, I thought I had to create a print.html.twig template to do so since the print page will not use all original web page elements nor will they be in the same layout and disposition on the print page.

I will try your proposed solution and figure out how to print differently using CSS for the print device.

Thank you and regards.

[Karmalakas]

Actually, you don’t even need a print button. Ctrl/Cmd + P or browser print menu works with CSS print media queries

[joejac]

Hello, and thanks @Karmalakas.
It is needed to print certain parts of the page in a given layout that is very different from the webpage itself, not to print the displayed webpage. I finally found the way to do it.

1. Create the new layout using, HTML, CSS inline styles, and twig variables to render only the selected elements for this new layout, inserted inside item.html.twig template.

2. A print button that calls a javascript function that opens a popup window with the new layout incrusted inside item.html.twig template of point 1, and it will show the print preview.

Since I do not program in javascript the following were very valuable resources to me:
Printer Friendly Pages:

How to Create Printer-Friendly Pages with CSS - APITemplate.io

Force A5 Paper-size in Chrome's print settings CSS

How to print table using Javascript? - Stack Overflow

Do not use CSS GRid or Flex, they do not print well, I tried table, and at the end, I used only divisions <div> and floats inline styles, and finally, it worked as required.

Please be aware that: Window.print() “is supported on iOS, Chrome on Windows and Safari and Chrome on Mac. It is not supported on Android.”
https://wiki.appstudio.dev/Window.print()

[Karmalakas]

@joejac

It is not supported on Android

Isn’t it really?

Window API: print | Can I use... Support tables for HTML5, CSS3, etc

[joejac]

@Karmalakas

Isn’t it really?

I tested on an Android 11 ZTE phone and Window.print() from a javascript function, does not print.
https://wiki.appstudio.dev/Window.print()

Regards

[Karmalakas]

What’s the browser there?

[joejac]

My ZTE Android has Google Chrome.

[Karmalakas]

Works just fine on Pixel 6a in this example

W3Schools online HTML editor