[ARCHIVED] Printing/PDF/Emailing Help Center Articles

Johannes,

You don't create a custom CSS file, you use your existing Help Center CSS file, then add to it. Here are the steps I used:

1. Right-click any page in your Help Center, then click View page source
2. Search for <link rel="stylesheet" type="text/css". The CSS file URL should start out with something like this: https://p5.zdassets.com/hc/themes/
3. Right-click the CSS file URL, then click Copy link address  
4. Access printfriendly, then paste the CSS file URL into the Custom CSS field
5. Copy the code generated at the bottom of the screen
6. Access Help Center > Customize Design > Edit Theme > Article page
7. Paste the code directly above the <footer></footer> tags
8. Within the pasted code, wrap the <a></a> tags (these are after the <script> tags) in <div align="middle"></div>
9. Access Help Center > Customize Design > Edit Theme > CSS
10. Add the following CSS after the rules for "body": 

    #printfriendly img {
    float:none;
    margin-top: 12px;
    margin-right: 12px;
    }

    #pf-content img {
    float:none;
    clear:right;
    border:none;
    display: inline-block;
    margin:1em 0 1em 1.5em;
    }

11. Click the Save button
12. Click the Publish button 

 Pete

Thanks a lot for Your reply Pete.

Your comment actually solved the problem:

" You don't need to create a custom CSS file, you can use the CSS file used by Zendesk in your Help Center.

Right-click any page in your Help Center, click View page source, then search for <link rel="stylesheet" type="text/css". The CSS file URL should start out with something like this: https://p5.zdassets.com/hc/themes/.

Access printfriendly, then enter the full URL of the CSS file into the Custom CSS field. This should generate the code you need to insert into your Article pages to correctly display images in your articles."

Only problem now is missing images in PDF.

Johannes,

You're welcome. I actually added to my comments from yesterday. I'm glad you didn't need the additional steps. 

Pete

Hi, this is really useful, however the downloaded file is not attaching the images. Any idea about this?

Thanks

Agustin

Agustin and other Zendesk clients experiencing the problem with PDF's not displaying images,

I just submitted the following issue to PrintFriendly's Support:

"We love the PrintFriendly print/email/PDF functions. however, we and several other Zendesk clients are experiencing a problem. When creating a PDF version of an article, images are not displaying. Alt text is displaying, but not the image itself. Printed version of articles are displaying images just fine. Any ideas? Thanks"

Note: per a PrintFriendly help article titled PDF: Images Not Included: "The Email and PDF features can be affected if the content is not publicly accessible or in a secure network. Typically, the images do not get included in the PDF."

Thanks,

Pete

This is a followup to my post from yesterday. I received the response listed below (in bold) from Taylor Norrish, Founder of PrintFriendly.com. Can Zendesk please address this?  

"I've contacted zendesk. The images are not publicly accessible so our the server which generates the PDF is not able to access the image. 

I've created an app that enables exporting PDFs from a help center easily and solved the issue with images not being publicly accessible, here's an article about how to use it: https://support.zendesk.com/hc/de/community/posts/115007400208-How-to-export-knowledge-base-content-from-your-Help-Center-as-PDF-no-coding-required- 

The key info here is that you have to provide an access token to the app config so images can be accessed while the PDF is being generated

PrintFriendly would be an ideal solution for us if Zendesk can work with them to make images work.

Patrick's solution isn't what I'm looking for. I need the ability to allow users or agents to create PDFs for individual articles.

Thanks

Jim,

Do you know for a fact that Patrick's solution doesn't help with the issue of allowing agents to create PDFs for individual articles? In other words, did you try his procedures and they did not work?

Thanks,

Pete

Hi Jim, hi Pete,

my solution currently only enables agents to export PDFs from help center categories but it will be extended so you could also export individual articles or sections too.

However the app does not offer the export functionality to public helpdesk users like printfriendly so your agents would have to export the PDFs.

If printfriendly wanted to get it to work they could create an app where you can provide an access token which they should use for generating your PDFs (this will enable access to your images)

Patrick, thanks for clarifying that. Pete

push..

A couple of months ago we published the Knowledge Print : PDF Download Controls  app in the Zendesk marketplace which works very similar to printfriendly, as in it enables you to add a PDF download button on your Zendesk articles where you can download a PDF of the article (or the whole section) on demand, but it contains your images (because it generates the PDFs with the necessary content view permissions) 

If anyone wants to give it a try I'd be happy to help you get started

Hi there, guys!

Any response from Zendesk regarding the PrintFriendly request? 

Hello @patrick.

I tried your app, but the Create user manual button is placed in the agent section. I'd like it to be a button for the end user to print the article to PDF.

Anyone else noted that the PrintFriendly doesn't work now? I only get the URL of the article in the PDF now.

This is my script in Article.hbs:

var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'none';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='2';(function(){var js,pf;pf=document.createElement('script');pf.type='text/javascript';pf.src='//cdn.printfriendly.com/printfriendly.js';document.getElementsByTagName('head')[0].appendChild(pf)})();</script><a href="https://www.printfriendly.com" style="color:#6D9F00;text-decoration:none;" class="printfriendly" onclick="window.print();return false;" title="Printer Friendly and PDF"><img style="border:none;-webkit-box-shadow:none;box-shadow:none;" src="//cdn.printfriendly.com/buttons/printfriendly-pdf-email-button-md.png" alt="Print Friendly and PDF"/></a>

Hi, Jessie!

I was refering to the post I read above, more exactly: 

"I've contacted zendesk. The images are not publicly accessible so our the server which generates the PDF is not able to access the image. 

I managed to implement this Print button for articles and all of the basic functionality works fine. However, the printed output does not handle table data well and some content in tables is getting cut off. I tried to deal with this by adding '@media print' style specifications in the style.css file, but none of the specifications are actually reflected in the printed output (whether that be a PDF or printed document.)

Does anyone know how / why my @media print specifications are not influencing the way article content is showing up in printed output?

Thanks for any insights you may be able to offer up.

I was able to use this but it is not downloading my media in pdf, anyone know why? 

Hey @Amardeep,

Upon reviewing this thread and checking this with the team, printing a PDF version of an article that doesn't include images is a known limitation if the content is not public or in a secure network.

I've taken a look and found that other users are discussing similar needs on this same thread. Pete who is also a community member suggested a workaround here (kindly refer to the old comments) and even raised this concern to PrintFriendly's Support and here’s what they go to say:

Note: PrintFriendly help article titled PDF: Images Not Included: "The Email and PDF features can be affected if the content is not publicly accessible or in a secure network. Typically, the images do not get included in the PDF."

I’ve seen some workaround suggested on this thread that you can try out. I'll also leave this post open in case other users have some alternative solutions for you :)

When I do this, clicking on the buttons just takes me to the Printfriendly home page. Have I misunderstood?