make LinkedIn Post page printer friendly

js-console-script.js

content_width = '1512px'
text_format   = 'font-size: 16px; var(--artdeco-reset-typography-font-family-sans);'
images_size   = "width:50%;height:50%"
document.documentElement.style.setProperty('--scaffold-layout-xl-max-width'  , content_width);  // resise content
document.documentElement.style.setProperty('--scaffold-layout-none-max-width', content_width);  // maximises for print
document.getElementById('voyager-feed').style.cssText = 'margin-top: -50px; padding: 0';        // removes margin at top
document.querySelector('.update-components-image img').style.cssText = images_size              // format images
document.querySelector('.update-components-text').style.cssText = text_format                   // format main text
document.querySelector('.scaffold-layout__sidebar' ).remove()                                   // remove left-hand-side box
document.querySelector('.scaffold-layout__aside'   ).remove()                                   // remove right-hand-side box
document.querySelector('.update-v2-social-activity').remove()                                   // remove bottom social and stats
//document.querySelector('#global-nav'               ).remove()                                 // remove top banner

Linked-in-post.md

"Creating a 'Print-friendly' version of a LinkedIn post that can be shared as a PDF or PNG" - How hard could it be, right?

TL;DR: Use the JavaScript code from this GIST: https://gist.github.com/DinisCruz/d5e4bb4d8a6dcd7b25e31d160c747f1e

Unless I'm missing something very obvious, there isn't an easy way to create a PDF or a PNG image from a LinkedIn post (I need posts in this format so that I can easily share them on WhatsApp, Discord, or Slack).

As an example, I wanted to share the daily poem that I posted today (see https://www.linkedin.com/posts/diniscruz_here-is-a-poem-for-the-7th-of-march-2024-activity-7171459601492602880-Tkzs) with my family, which includes some members who are not on LinkedIn.

What I wanted was to create something like what you can see in pic2, i.e., a reasonably formatted pdf/png that allows for the easy reading of the post's content (and images).

The problem is that when I use the LinkedIn 'Print' option, the layout and PDF look like what you can see in pic3 (a small column in the middle, multiple pages, and not nice at all).

Since all this is just JavaScript and I've done this many times before, after a nice thread with "ChatGPT + Chrome's JavaScript console )" (see pic4), I created the JavaScript which you can see in pic5 and I also posted it on this GIST: https://gist.github.com/DinisCruz/d5e4bb4d8a6dcd7b25e31d160c747f1e (the gist contains raw code and the one-liner for using as a browser's bookmark).

With this block of JavaScript, my workflow now is:

1. Go to the LinkedIn post I want to print (or create a PNG for).
2. Open the bookmark with the JavaScript (pic6).
3. Open the print page.
4. Print it as a PDF.
5. Open the PDF locally and save it as an image (using a 300pt resolution).

This can still be improved a bit, but it is already massively better than what I had before.

Btw, is there an alternative solution (or service) that does this?

one-line-for-bookmark.js

javascript:(function(){document.documentElement.style.setProperty('--scaffold-layout-xl-max-width','1512px');document.documentElement.style.setProperty('--scaffold-layout-none-max-width','1512px');document.getElementById('voyager-feed').style.cssText='margin-top: -50px; padding: 0';document.querySelector('.update-components-image img').style.cssText='width:50%;height:50%';document.querySelector('.update-components-text').style.cssText='font-size: 16px; var(--artdeco-reset-typography-font-family-sans);';document.querySelector('.scaffold-layout__sidebar').remove();document.querySelector('.scaffold-layout__aside').remove();document.querySelector('.update-v2-social-activity').remove();})();