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

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

1 Like

Just use print media CSS and add a button

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

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

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.

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

1 Like

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 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()

Isn’t it really? :thinking:

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

What’s the browser there?

My ZTE Android has Google Chrome.

Works just fine on Pixel 6a in this example