Automating Printing While Improving Site SEO

Wed28thFeb

Knock on wood, but we will always have paper. No matter how much we want to go digital, be online, and be mobile, there is always a desire to print, and with printing, 2 things come to mind, PDF files and QR codes.

A page that is simply printed from somebody's tablet or laptop is fine, but the fonts, spacing, margins and paper size will still be variables that are particular to that printing instance. To guarantee that the layout across all printing devices is consistent then PDF files that are generated from one source is the ticket. 

And if something is good enough to be printed then its author or source should be known, right? As antiquated as some may feel QR codes are, they are the best vehicle for making that connection. QR codes, have already had one shot at popularity but then lost their mojo. About 10 years ago manufacturers were adding them to everything from hotdog wrappers to highway billboard signs, but too often the code was bringing its audience to a web page that hadn't been designed for viewing on a phone. But 2 things have changed in 2018 that are making them popular again: (1) design initiative called "Mobile First", led by Google; and (2) Snapchat.

As Paul Towers pointed out in a recent article titled How to Use QR Codes to Market your Startup at Events on lilQR.com

For marketing purposes, QR codes meant to direct people to your website or to forms leading to videos and other media are the best.

QR codes empower a company to keep contol on their message, and mature the content's information over time, keeping the printed material current, even after new information becomes available over time regarding the subject of the media.

Snapchat's network of users has grown to nearly 200 million people worldwide and has passed 60 million right here in the US. Most of its users are under 35, and one of the network's principal designs for exchanging contact information between users on its app involves QR codes that are conveniently rendered onto a phone's display for another phone to scan it with it's Snapchat app.

Since 2016, more people have been using mobile devices, as opposed to desktops, to look at websites, and this spring Google is meeting this trend with Mobile First Indexing. Simply put, what this means to website owners who want to rank well in web searches is that they need to make their sites primarily accessible to people reading it on their phones while still displaying that wealth of information that was able to fit on a full laptop or PC display.

These advancements have done quite a bit to give QR codes a new breath of life. More than 35% of the online audience is once again using them. In the old days, many company market departments weren't smart enough to consider the context of how people were accessing web pages with their tiny screens.  But now that more and more websites are being designed with Mobile First in mind, the right conditions for QR codes to become popular again has come.

Putting QR into your printing considerations

QRs belong on paper, and PDF files are the vehicle of choice for sharing content that is intended for paper. So if an online blog has documents that are good enough to be printed then those pages should have links back to where they came from. After all, the more backlinks that are used to find a webpage, the more impact it will have on the content's health with regards to SEO. Wouldn't it be great for a blogger to have a vehicle for easily writing their content, distributing it for people to read it on their phone, and if they find the information compelling enough, print it as a brochure, flyer or just deeper reading?

A Drupal Design Solution

Drupal is an open source content management system used by hundreds of thousands of websites across the web. It's supported by a development community that has contributed thousands of publicly shared modules, extending the power of the platform to doing virtually anything imaginable; creating QR codes and converting digital content in HTML to PDFs are just a few of the things that have been addressed with this catalog of modules.

Here's a content printing recipe for Drupal 7 that deals with printing anything fabulously. It depends on Display Suite and a few other modules like chaos tools and other dependent modules, but that is beyond the scope of this article.

This system formats all of the site's articles, events or other content for Printing. It also makes the content available as logo branded PDFs that can be styled so that things like business cards, flyers and restaurant menus can be updated within the website for reference from phones and tablets, but can also be sent to online printing company's like Vistaprint as a very affordable printing solution.

Install and Enable The Following Modules

  1. Mobile Codes
  2. Printer-friendly pages
  3. Printer-friendly pages UI (included with the print module)
  4. TCPDF library handler (included with the print module)
  5. PDF version (included with the print module)
  6. Display Suite (DS)
  7. Display Suite Extras (included with the DS module)
  8. Display Suite UI (included with the DS module)

modules-list.jpg

Customize your Theme

You'll need to make a few customizations to your Drupal theme's files in order to get everything working just right.

  1. Override the function theme_print_pdf_tcpdf_content() within the Printer-Friendly's TCPDF module
  2. Add a CSS file (print.css) to your theme so that you can style the layout and fonts of your printout

CSS is an essential tool for styling the output to a nicely formatted letter or legal sized piece of paper or even business card, and the TCPDF library leverages a subset of the CSS attributes for performing that styling to PDF files. Be aware that not all CSS attributes are supported, but there is enough of them to create a pretty nice looking PDF formatted page. Among the important ones that are supported allow you to resize images and fonts, change fonts and headings, and deal with table layouts.
(The important ones that are not supported that I've run up against have to do with blocks and "floats" against them, but you can play with the position: absolute to get images to move around to different places on a page.)

Create a function within your theme's templates.pdf so that it can accommodate CSS styling

The TCPDF module that accompanies the Drupal "Printer-Friendly" module doesn't support styling through CSS, but that is easily remedied by "hooking" to it and overriding its function. This is accomplished by copying the theme-able function, theme_print_pdf_tcpdf_content() within the /print/print_pdf/lib_handles/print_pdf_tcpdf/print_pdf_tcpdf.pages.inc file (located near the end of the file) and copying it to the tempate.php file located in your theme directory. After the function is copied, rename it from [theme]_print_pdf_tcpdf_content() to [yourthemename]_print_pdf_tcpdf_content(). Once copied, replace the body of the theme's new function with the following:

function kevsosassy_print_pdf_tcpdf_content($vars) { $pdf = $vars['pdf']; // Set content font. $pdf->setFont($vars['font'][0], $vars['font'][1], $vars['font'][2]); // Remove the logo, published, breadcrumb and footer from the main content. preg_match('!(.*)!sim', $vars['html'], $matches); $pattern = '!(?:

|


)!si'; $matches[1] = preg_replace($pattern, '', $matches[1]); // Make CCK fields look better. $matches[1] = preg_replace('!(

.*?

)\s*!sm', '$1', $matches[1]); $matches[1] = preg_replace('! ' . $matches[1]); return $pdf; } .*? )\s*!sm', '$1', $matches[1]); $matches[1] = preg_replace('! ' . $matches[1]); return $pdf; }

 

You'll also want to create a print.css file within your theme's css directory. This file will be referenced within the configuration settings that follow.

Configuring Drupal

Once the file changes have been made then Drupal is ready to be configured. Within the configuration settings in the Drupal Administrator plane, go to 

admin/config/user-interface/print/pdf

and select TCPDF as the PDF generation tool, then SAVE.

Navigate to the settings tab

admin/config/user-interface/print/common

and enter the path, relative to the domain's root, where the print.css file resides. This is the same file that was addressed above.

 

 

Note that this particular path example assumes that the drupal server is configured for serving multiple domains.

That will configure the general Printer Friendly and PDF printing settings. The next set of configurations allow each content type to take advantage of the PDF and Printer Friendly features.

Content Type Settings

The settings page for each content type now has a Printer, e-mail and PDF versions Tab. 

Goto 

admin/structure/types/manage/[conenttype]

 

print.jpg

and make the proper settings, then save.

Creating a 'print' Display Suite View For The Content Type

Display Suite is going to give 2 pieces of functionality to this solution:

  1. Sets the ability to layout the fields that are going to be printed by using a display view called 'print'
  2. Provides a code field type that we will use for creating the QR code from mobile codes, covered in part 2.

for now, let's simply design a view for the printer friendly and PDF file layout. 

  • Goto Structure - Display Suite - View Modes (admin/structure/ds/view_modes) and click the "+ Add a view mode" link.
  • Specify 'print' as the label, and select "Node" as the Entity, then Save.
  • Go to a content type, select "Manage Display", Scroll down to the Custom Display settings and enable the 'print' view mode. and save
    (admin/structure/types/manage/[content type]/display )
  • Now make your changes to the print view layout, 
  • (admin/structure/types/manage/[content type]/display/print )

Adding the QR code

I like this touch within the app because it provides a link from a paper version of the content back to the same content back online.

  • create a new Text Format For Mobile codes (admin/config/content/formats)
    • Enable the Mobile Codes and Replace Tokens Filters.
      make the order
      • "Replace Tokens" then
      • "Mobile Codes"
  • Create a Display Suite Code Field called "QR"
    admin/structure/ds/fields/manage_custom
    • Label: qr
    • Entities: Node
    • Enable the Token checkbox
    • Field Code:
[mobilecode #preset="small"] https://www.northconway.com/node/2035[/mobilecode]
/blog/automatic-printing-links-back-web
  • Go back to the Display View and add the QR field to the layout.