2. Create a Page Template for WEC: Step 2 - New Template
Create a New TemplaVoila Template for your WEC site using your own HTML and images.
If we pick up where we left off in Step 1, you should still be in your template folder under fileadmin.
- Click your template HTML file's icon and from the context menu select TemplaVoila.
- Next you'll see a blank "Data Structure". This is where we will define what areas of our website design will have "dynamic" content areas - ie content areas you can edit and place database-driven content into.
- Start by creating your first field.
- Fields don't necessarily need to be in order of appearance on your web page, but it may help you to do it this way.
- Note that if you are using existing WEC Templates, you will want to adhere to the WEC standards - otherwise, your content will no longer be visible when you switch to your new template. You can find these standard field names and settings in Appendix II of the WEC Template Developer's Manual - www.webempoweredchurch.org/products/templates.
- Enter the field name and click the Add button.
- Next, you'll need to define what type of content should be put in this new field. Most will be of the Mapping Type: Element. For our sitename field we'll enter a title.
- The Site Name field is given content from the WEC Constants (which you likely set when you first set up your website). Therefore, our editing type will be TypoScript Object Path. We can also give it a mapping rule of *:inner which will only allow us to map the item inside of existing HTML containers (such as div, span, td, etc)
- Click the Add button
- A new field appears under the Editing Type which asks us for the Object path. This is set in the Default Typoscript Template on the top-level page of your site - which we'll discuss in-depth later. For now, we'll refer to the WEC Template Developer's Guide Appendix II for the correct path.
- Be sure to click the Update button or your change will not be saved. Then click the Cancel/Close button.
- Continue Adding fields using the Data Structure chart found in Appendix II of the WEC Template Developer's Manual as a reference.
- When we get to the Left Content area, we will do things slightly different. Since we want to be able to add various types of content elements based on the individual page, we will make it have a mapping type of "Content Elements."
- We'll repeat this for the Main Content area as well.
- We now have all of the fields we plan to use in our TemplaVoila template. Now, we must "Map" each of these fields to a part of our template so that TYPO3 knows where to put our content.
- There are two ways you can map - by looking directly at the HTML source, or the Exploded Visual mode. You can change the view by selecting the option from the Mapping Window selector box. We'll choose Exploded Visual mode because it is a little easier for beginners
- We now see our HTML template with a bunch of multi-colored markers. Each of these markers is a possible area to map our fields to. For the ROOT element, we usually want to map to the <body> of our HTML file.
- Click the Set button to confirm that this is where you want to map to.
- Do the same for each of your fields, mapping each to their respective container.
- If you hover your mouse over a particular marker, a popup will show details about that marker. A good practice to get into is assigning a class or id to each of your HTML containers (divs, tds, spans, etc) so that you can determine what field they will be mapped to.
In this case, the Site Name container looks like this in the HTML file:
<div id="sitename">Sample Content</div> - Inevitably, you'll forget to place a container for a field in your HTML file. If that happens, just skip over mapping it, and we can come back to it later (in Step 3).
- When you've mapped all possible fields, click the "Save as" button.
- In the top portion under CREATE Data Structure/Template Object enter a title for your Template & Data Structure. You'll always want the Template Type to be "Page Template" unless you are creating templates for content called "Flexible Content" (we'll save that for another tutorial!).
- Make sure that if you have multiple Storage/Sys Folders that you select the one where other templates are stored (in WEC this is Storage Folder).
- Click the CREATE TO and DS button to make your new template.
- Your new template should now show in the TemplaVoila Control Center. We're not done yet, though. We need to link a few things to our template.
- Click the Update mapping link.
- Be sure the Select HTML header parts checkbox is checked.
- Then, make sure to link up any stylesheets and/or script references as well as the main body tag.
- Click the Save and Return button.
- You're now ready to move on to the next step - Editing an Existing Data Structure and Template. On you go to Step 3 ...
