A printable version of our pages doesn't do much good if nobody knows about it. Of course we know the syntax and we could spend time adding a printable link to the bottom of every page that we want it on, but that obviously doesn't make sense when we're using a powerful CMS like TYPO3. Using TypoScript, we can dynamically create a printable link at the bottom of every page that has a printable template.
We have already added a section to map to on the printable_template.html, but we need to add a div to the main template HTML file. Go ahead and update template.html with a new div tag like this:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> </head> <body> <div id="logo"></div> <div id="timestamp" style="float: right;"></div> <ul id="menu-area"><li class="menu-item"><a href="">Menu Item #1</a></li></ul> <ul id="submenu-area"><li class="submenu-item"><a href="">Submenu Item #1</a></li></ul> <div id="breadcrumb">Top Menu Next Page</div> <div id="banner_image"></div> <div id="content">This is our content</div> <div id="print_link"></div> </body> </html>
This will have to be mapped to the templates in order to be usable, so we need to add another field to the data structure:
- Go through the TemplaVoila section of the backend to the data structure editing page that we used to add the sidebar fields earlier.
- Add a field named
field_printlinkto the bottom of the main data structure. - Like the menus and logo, this will be a TypoScript Object Path, so we can configure it with the following settings:
- Field:
field_printlink - Title:
Printable Link - Mapping Instructions:
Pick the HTML element in the template where you want the printable link to be mapped. - Sample Data:
[Print link goes here] - Element Preset:
TypoScript Object Path - Mapping rules:
div,span,tr,td
- Field:
- Click on the Add button.
- Choose TypoScript from the tree on the left.
- Set Object path to
lib.printLink. - Click on the Update button and then on Save to save the data structure changes to the database.
After we have saved our changes to the data structure, we just need to map the new field to the tags in the HTML files. For Main Template [Template], go ahead and update the mapping to map the Printable Link field to the div with the ID print_link. For Printable Main Template [Template], map Printable Link to the table cell with the ID print_link. When you're done, make sure you save all of the changes.
In the earlier TYPO3 tutorial Futuristic Template Building, they talked briefly about how to generate a printable link, but they didn't use the typolink object to make it as powerful as it could be. Like that tutorial, we are going to update the TypoScript template setup, but we are going to use a typolink solution that will work better with RealURL and multiple URL parameters.
To use the typolink object, we just need to setup the URL parameters and assign it to our printLink TypoScript object. Typolink will use our configuration to generate a complete URL. First, we can use the page:uid value to call the current page ID and assign it to the first parameter:
lib.printLink.typolink.parameter.data = page:uid
Next, we can start adding parameters to the link in a query string. We will need to use addQueryString.exclude to make sure we don't post the page ID twice in the parameters. Then, we can add the parameter&print=1 to the link URL to call our printable template when the link is used:
lib.printLink.typolink {
addQueryString = 1
addQueryString.exclude = id
additionalParams = &print=1
}
Finally, we can create a link to the non-print template that will remove the print parameters and only be displayed when the print parameter is already set:
[globalVar = GP:print>0]
lib.printLink {
value = Normal page view
typolink {
additionalParams >
addQueryString.exclude = print
}
}
## Return to global processing
[global]
If we put all of the new TypoScript pieces together and eliminate some duplication by using curly braces, we can add this code to the bottom of our main TypoScript template setup:
## Print View Link
lib.printLink = TEXT
lib.printLink {
value = Printable page view
typolink {
parameter.data = page:uid
addQueryString = 1
addQueryString.exclude = id
additionalParams = &print=1
}
}
## Normal View Link (to run when print is greater than 0)
[globalVar = GP:print>0]
lib.printLink {
value = Normal page view
typolink {
additionalParams >
addQueryString.exclude = print
}
}
## Return to global processing
[global]
Now we can test this out on a frontend page. On any page using the main template, we can see a link labeled Printable page view on the bottom of the page. If we click on it, we see a printable version of the same page with a link at the bottom back to the normal view:
