Our final change will be to add a logo to the top right corner of our website. We could, of course, add this in the HTML template, but we want our logo to be a TypoScript object like the time stamp. We know that we may need to change the logo at certain times of the year, and we don't like the idea of just overwriting a single image file for every change. We also want the ability to overwrite the logo in subsections of our site or create different logos for international versions of our site in the future. So, we have decided that it should be a TypoScript object.
Our first step, like always, is to add the space for a logo to our HTML. We know that we want it at the top of our site, and we're not going to use any CSS positioning right now; we can go ahead and add it right below the body tag in our HTML:
<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="banner_image"></div> <div id="content">This is our content</div> </body>
Now that we're getting into the flow of editing the template, we know that our next step will be adding it to the TemplaVoila data structure as a new data element. We can go ahead and open up the data structure for editing again and add a new field at the bottom of the page called field_logo:
Now that we know how this works, we're going to just fill in the form with the new configuration information:
- Title: We'll keep it simple and call this Logo in the backend.
- Mapping Instructions: Just like the other elements, we'll use the same basic kind of instructions: Pick the HTML container element where you want the logo to be placed.
- Sample Data: Our sample data can be [Logo goes here].
- Element Preset: We know we're going to use an object this time, so we can go ahead and choose TypoScript Object Path from the drop-down menu.
- Mapping rules: Like the other elements we've added, we just want some simple rules: div, span, tr, td.
- Object path: We'll set this under the TypoScript section again. This time we can call it lib.logo so our editors know exactly what we are creating.
Now we can click on the Add button and use Save to overwrite the old template data structure with the new one. If we choose to Show XML, this should be the new field that the wizard created from our configuration:
<field_logo type="array"> <tx_templavoila type="array"> <title>Logo</title> <description>Pick the HTML container element where you want the logo to be placed.</description> <sample_data type="array"> <numIndex index="0">[Logo goes here]</numIndex> </sample_data> <eType>TypoScriptObject</eType> <tags>div,span,tr,td</tags> <proc type="array"> <stdWrap></stdWrap> </proc> <TypoScriptObjPath>lib.logo</TypoScriptObjPath> </tx_templavoila> </field_logo>
If everything looks okay, we can map it to the new div tag with the logo identifier and save our changes.
After we've saved our mapping, we need to add our new object to the TypoScript template. I created a quick image with the filename logo.png and saved it into the fileadmin/templates/ directory. It's also helpful to make sure that our logo links back to the homepage, so we're going to add a standard wrapper to the image with a link to our example site for right now. We could have created an image element like we did for the banner, but we wouldn't be able to set the image and wrap it in a link for the entire site using TypoScript. Because we are using the TypoScript template, we can add this code to the bottom of our TypoScript template setup to define our image and the link together:
lib.logo = IMAGE lib.logo.file = fileadmin/templates/logo.png lib.logo.stdWrap.wrap = <a href="http://www.example.com/">|</a>
My fancy new logo simply says Example.com in the example below, but our site is still looking much more professional:
