The first step we want to take is to create a print-version template based on the HTML file “template_page_print.html”. However it suddenly strikes us that the link “Back to normal version” (see buttom of file) has a counterpart in the main template, “Print version” - and we didn't map this field before! D'oh.

So, we have to take a little detour now since we would like to have that link mapped to a dynamic destination value of course.

In a situation like this what you want to do first and foremost is to modify the Data Structure to include the capability to map the href-attribute of a link. You have two options:

We choose the fun option.

So, click the icon of the TO record, select TemplaVoila and then click the button “Modify DS / TO”:

After clicking “Yes” to a warning box you will see this screen:

Enter the fieldname (here “field_printVersionUrl”) and press “Add”. Then fill in the form. In particular set the Mapping Type to “Attribute” since we want to set a value in an HTML element attribute (<a href=”...”>), selecting Editing Type to “TypoScript Object Path” (we will have to dynamically set the link value) and if you like, you can set the Mapping rules to “a:attr:href” - meaning “map this DS element only to an “href” attribute of an <a>-tag!”

Add the DS element and map it:

The only choice is “ATTRIBUTE “href” (= #)” so you will select that:

Then, press the “Set” button and in the next screen you will update the original DS/TO set:

This has saved the modified Data Structure and Template Object back. Now, there are two things to remember:

Fixing the DS XML and TO:

Edit the DS record and change in the XML the values for <TypoScriptObjPath>:

After fixing the DS record, open the TO record with TemplaVoila and map the header parts and body tag again. See former chapter.

Then save - and maybe clear cache / preview that you site is still working...

Rendering the Print Version URL

In order to insert the URL to the Print Version all we have to do is to render it with a cObject in the TypoScript template, object path “lib.print_url”:

#Print Version URL:

lib.print_url = TEXT

lib.print_url.value = index.php?id={page:uid}&print=1&no_cache=1

lib.print_url.htmlSpecialChars = 1

lib.print_url.insertData = 1

[globalVar = GP:print > 0]

lib.print_url.value = index.php?id={page:uid}

[global]

This code will insert a link pointing to the current page but with the “&print=1” parameter. Further, if the &print-parameter is set and a print template presumably is used the link will point back to the non-print page - thus working in the other direction as well!

For the print version of our website we have a template prepared from the designer. This is found in the file “template_page_print.html”:

This print template is supposed to be compatible with the main template, “template_page.html”, although the menu field will not be mapped then. Therefore we will use the same DS as for the main template. This means we will not be creating a new DS and TO like previously done - only create a new TO pointing to the same DS but to a new file!

To complete the integration of a print version we have to

Create the TO

Create a new TO:

Then enter the information for the TO:

Please notice:

Then save and close.

Now, click the icon of the new TO record again and select TemplaVoila:

Then you will see that the DS from the main template is indeed selected but no mapping information has been collected as of yet - obviously, since the TO is brand new and we are going to do the mapping now!

Now, do the mapping, just like you did with the main template, just leave the “Main menu” element out. When you are done, press the “Preview” button - this will show you that the “Page content” sample data is inserted:

You can even click the “Back to normal version” link and a little JavaScript Alert will pop up!

Before you are done, enable “Select HTML header parts” and do your selection there:

Then press “Save”.

You are done! When you click the link in the bottom of the frontpage you will see the print version right away!

(If you don't see this, make sure that you didn't forget to paste in the TypoScript code in the previous chapter!)

In this example we want to create an alternative template for a sub section of the website:

(This template is the file “template_page_xtra.html”)

The section will be an extranet for customers and password protected as well - but that is not relevant here. All we want to know is - how can we enable TYPO3 to select an alternative template for a section of the website?

In this case it is very easy - it turns out that this template design can use the same Data Structure as the main template.

Create a new TO

Basically the steps are the same as for the print version template; create a new TO. But there are some different settings:

Notice:

Now, save and close. Then click the TO records icon and select “TemplaVoila”. You should now begin mapping the elements:

When you are done the Data Structure listing should look like this:

You can see that the “Print version link URL” has not been mapped - since there was no such link in the template file.

Remember to also select the appropriate header parts to include:

... and Save.

Select the alternative templates for a sub section

You want to apply this template to all subpages of “Licensing” page - basically those marked here:

To do so, edit the page header of the “Licensing” page:

In the page header, set “Subpages - Page Template Structure” to “Page - Main” (which it basically already is, inheriting from the root page, but...:-)

Then select the Template Design (TO record) labeled “Page - Extranet”:

Thats all!

If you wanted to include the page “Licensing” in the section having the alternative template design you could have done so by setting the value of the “Page Template Selector” rather than “Subpages - Page Template Selector”.

Dummy content on the page?

Well, maybe we were a little hasty. What about putting some content elements on the page to test?

See, in this case you cannot just copy/paste elements as you are used to. Remember, for TemplaVoila it is not enough to just copy a content element onto a page - you have to bring it into the hierarchy of references going from the page to the elements. But this is easily done. Just use the new Web > Page module that TemplaVoila provides:

With that module, go to the root page and click the “Reference” icon:

Then go to the “License A” page and click the paste icon:

What you will see now is a reference created to the element on the root page - thus the two pages are sharing a content element! The reference is yellow because the content element is located externally from this page - namely on the root page!

Testing the frontend again brings even better results:

What about that? Two columns on a page. Or even more. Or “zones”. Or... you name it!

None of this is a problem for TemplaVoila - rather it is the very reason for its existence - the need for this kind of extreme flexibility.

In the case of a two-column layout there is a template file, “template_page_left_col.html”, which contains an additional left column under the menu.

We are now going to create a new DS and TO after the same principles by which we made the main template:

Now, you do the mapping of the ROOT, Page content and Menu element just like with the main template. No changes.

During the mapping process we find that the old way of mapping to the menu is not possible anymore without wiping out the <div> tag which is surrounding the left column. The reason is that both the menu and the left column <div> sections are in the same <td> tag. This is illustrated in this screenshot.

We could now change the template HTML to yield a better structure for our mapping needs. In some cases that is needed. However, we can in fact map this anyways using a mapping mode known as “range”. To map the menu you simply click the first <div> element and in the mapping mode selector you select the second-last <div> tag - thereby indicating that you want to grab all the <div> tags from the one you clicked and to the one selected.

For the left column <div> its just trivial mapping, no adventurous features to use there, sorry...

Result DS

The resulting DS looks like this:

In this case we were too lazy to add mapping instructions and mapping rules etc. However what was very important is the settings for the “Left content” field (field_left) and the “Page content” field (field_content). There are two major points:

Finally, you create the DS and TO:

Before you are done with the DS / TO work you have to

You can do that now.

Setting the new Page Template Structure

We want to apply the two-column design to this section of the website:

Just like with the Extranet template we edit the page header of “Terms & Conditions”. Notice how we have two possibilities for Page Template Structures:

As soon as you select the Template Structure “Page - 2Col” and save you will see that the FlexForm field called “Content:” changed to include two content element fields!

This shows a glimpse of what FlexForms can offer since the content of these two fields are stored in an XML data structure in a single database field rather than two separate - thus there are no limits to how many fields you can have in a form and how much nesting you can apply to them. Anyways, more about this later.

Before you exit the page header you must also select the template on the second pass:

Adding dummy content again

Before we test our solution we will create a few references (or copies if you like) of the dummy content element on the frontpage. We notice how the Web > Page module has automatically reflected the reality of two content columns which is now the case for the section “Terms & Conditions” on the website:

Now, we can preview:

Precisely as it should be... :-)

A really nice touch of DS and TO records is that you can attach icons to them which and used in the forms where people select them as templates/data structures.

Consider this example:

This is the root page of the website we are working on here. All that is done to it is that the DS and TO records has got icons attached to them - which are in turn shown here.

By using icons for the Data Structure you can easily describe the abstract mode of a Data Structure; basically what possibilities there are. And for Template Object you can show people which designs are available for the selected Data Structures.

For both TO and DS record there are fields for the icons in their records. Just make sure to prepare the icons first; they are not automatically rescaled by the system: