sections in the article
This article explains how to add a table of contents to Content Store cover page type templates in the Content Store back end. A table of contents can be used when creating a publication in Content Store.
The feature is managed inside the HTML Templates in Control Center.
Note! Only users with an assigned administrator role can access the Content Store back end and Control Center.
Creating catalogs in inriver Content Store
As a front-end user, you can create a publication in Content Store by using the Create Catalog feature. This will generate customized PDFs with material directly from Content Store. Read more about creating a catalog in this article.
For front-end users to be able to include a table of contents in a publication, the feature first has to be added to the cover page template used in Content Store by an administrator, as described below.
About table of contents
The Table of Contents feature is available for Content Store cover page type templates.
To use a table of contents, the administrator that is modifying the template first has to define what to include in the table of contents. When generating the a PDF catalog, the inriver PDF engine will look for HTML elements that are marked for inclusion. Marked HTML elements will be stored in a data structure that is then supplied to the cover page.
In conjunction with the table of contents feature, there is also a feature for inserting page numbers on each page.
To set up the table of contents feature
1. Mark elements for inclusion in the table of contents
Add the class 'inriver-pdf-add-to-table-of-contents' to any HTML element in the catalog. By default, the tag's content will be used as text in the table of contents.
- Example: <h2 class="inriver-pdf-add-to-table-of-contents">Chapter 1</h2>
- The text Chapter 1 will show up in the table of contents.
To set a custom value for the table of contents, use the attribute inriver-pdf-table-of-contents-text.
- Example: <h2 class="inriver-pdf-add-to-table-of-contents" inriver-pdf-table-of-contents-text="First chapter">Chapter 1</h2>
- The text First chapter will show up in the table of contents.
2. Render the table of contents data
When the HTML elements are marked for inclusion, there will be a table of contents data array available when rendering the cover page.
For each item in the table of contents, there are properties for the text, page number and link target (used for clickable links within the PDF).
Example data:
var tableOfContentsData =
[
{
"value": "Popcorn",
"linkTarget": "1:45:93.75",
"pageNumber": 1,
"sequenceNumber": 0
},
{
"value": "Mounting Bracket",
"linkTarget": "2:322.5:93.75",
"pageNumber": 2,
"sequenceNumber": 1
},
{
"value": "Car",
"linkTarget": "3:45:446.25",
"pageNumber": 3,
"sequenceNumber": 2
}
]
It's up to the template author to make use of this data in the template and render it to the DOM. A simple example would be to simply iterate the array and output a list like this (using JQuery and underscore.js):
<script>
$(document).ready(function () {
_.each(window.tableOfContentsData, function(item) {
$(".table-of-contents-list").append("<li class='inriver-pdf-table-of-contents-link' inriver-pdf-link-target='" + item.linkTarget + "'>" + item.value + "...... page " + item.pageNumber + "</li>");
});
});
</script>
In order for the inriver PDF engine to create clickable links it will look for elements with the class 'inriver-pdf-table-of-contents-link' as well as a custom attribute named 'inriver-pdf-link-target' describing where the link target is located. The supplied linkTarget string should be used as attribute value. See the example above.
3. Enable page numbers
To enable page numbers automatically being added, the inriver PDF engine will look for a meta tag named 'inriver-pdf-page-number-template' in the main template (the template used as the main catalog template).
The pageNumber property in the table of contents data array will match with the page numbers outputted here.
There are two variables available for page number templates: {{pagenumber}} and {{pagecount}}
It's also possible to define the vertical positioning of the page numbers by using a meta tag named 'inriver-pdf-page-number-y-position-offset' (if this tag is omitted the value will default to 60).
Meta tags should be set in the head tag like this:
<head>
<meta name="inriver-pdf-page-number-template" content="Page {{pagenumber}} of {{pagecount}}">
<meta name="inriver-pdf-page-number-y-position-offset" content="60">
</head>
Example output
Comments
0 comments
Please sign in to leave a comment.