23,27 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
In Detail
The template systems in TYPO3 make it one of the most powerful content management systems available today, but they seem too complex for many users. Site developers who are able to learn how to use them efficiently can build more extensible sites quicker and more customized for their users.
This book is a step-by-step guide for building and customizing templates in TYPO3 using the best solutions available. It takes the readers through one complete example to create a fully functional demonstration site using TypoScript, TemplaVoila, and other core TYPO3 technologies.
This book starts with the basics of creating an example TYPO3 site before showing you how to add your own stylesheets and enhanced JavaScript to the template. You learn about the different types of menus and navigation, and you can try out each one with practical examples in the book. The book shows how to create multiple templates for sections or individual pages in TYPO3 and how you can make a new template completely from scratch for a newsletter. Just as importantly, you learn how to update the editing experience and impress your clients with a custom back-end. Finally, you will learn how to specialize for browsers and internationalize your TYPO3 site with simple template updates.
A step-by-step guide to creating and modifying templates with TypoScript and TemplaVoila
Approach
This book uses a clear, conversational style to teach everything from the simple to the complex in an easy-to-read narrative. The entire book goes through one complete example project to build a company website, and each chapter adds functionality to the final product as the readers learns about the concepts. Every concept and technique is reinforced with working example code, and illustrations and screenshots are used to explain even further when necessary.
Who this book is for
If you are a developer, designer, or a site builder who wants to get the most out of TYPO3 whether you are building multiple websites for clients or optimizing their company’s site then this book is for you.
It is written for new or experienced users at all levels, but some basic experience with TYPO3 editing and installation is expected.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 375
Veröffentlichungsjahr: 2010
Ähnliche
Table of Contents
TYPO3 Templates
TYPO3 Templates
Copyright © 2010 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author(s), nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: November 2010
Production Reference: 1111110
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-847198-40-2
www.packtpub.com
Cover Image by Gavin Doremus ( <[email protected]> )
Credits
Author
Jeremy Greenawalt
Reviewers
Christine Gerpheide
Heike Raudenkolb
Ingo Schmitt
Acquisition Editor
Sarah Cullington
Development Editor
Maitreya Bhakal
Technical Editor
Kavita Iyer
Indexer
Hemangini Bari
Editorial Team Leader
Akshara Aware
Project Team Leader
Lata Basantani
Project Coordinator
Leena Purkait
Proofreaders
Aaron Nash
Lynda Sliwoski
Production Coordinator
Melwyn D'sa
Cover Work
Melwyn D'sa
About the Author
Jeremy Greenawalt is a full-time developer and part-time writer with close to ten years professional experience in website and application creation. His first love was writing, but programming quickly followed.
He is a co-founder of Vintage 56 where he helps develop websites, online shopping carts, web apps, iPhone/iOS apps, and anything else his friends can think up. Jeremy is also the Web Director of a large ministry, Generals International.
Jeremy lives near Dallas, Texas with his wife, Rebekah, and their ever-youthful puppy, Aingeal. He loves spending time at home reading, playing around on the piano, or just relaxing on the couch with his family.
You can read more from Jeremy at pocketrevolutionary.com, and you can follow him on Twitter at @jgreenawalt.
Acknowledgment
This book is the product of so many editors, coworkers, and encouragers that I'm surprised my name still gets to be on the cover. I wish I had space to thank everyone individually.
I want to thank the entire Packt team that made this book possible. Thank you, Sarah and Leena, for helping a new author through an intimidating process. A special thanks to the editors and technical editors who helped turn some rambling paragraphs and run-on sentences into a complete book.
Thanks to all of the smart people I work with. Thank you, Mike and Cindy, for always encouraging me. Thank you, Neil, for telling me to write the book when I thought I couldn't. Thank you, Kevin and Bethany, for being my test subjects sometimes. Thanks to all of my coworkers who put up with my pre-deadline breakdowns and always let me vent.
I need to thank Kasper Skårhøj for giving us TYPO3. More importantly, thanks to all the developers, well-known and anonymous, who have made TYPO3 what it is today.
Thank you, Michael Brennen, for giving me my first real programming job. I still blame you for all my Linux or PHP knowledge.
Thanks to Jeff Segars and Ron Hall from the Dallas TYPO3 Users Group for convincing me to use TYPO3 in the first place. Thanks, Ron, for letting me write my final chapter on your framework and being the first to ask for a copy of the book.
Thanks again to my wonderful wife, Rebekah. You will always be my princess.
About the Reviewers
Christine Gerpheide works as a developer and project lead at customedialabs Interactive Media Agency in Larissa, Greece. At customedialabs she helps create enterprise applications and websites, specializing in TYPO3 and mobile application development. She has also presented on TYPO3 at open source conferences in Greece and at the North American TYPO3 Conference. In her free time, Christine likes to experiment with upcoming web technologies, go backpacking, promote renewable energy, and cook Greek food. Christine was born in Washington, D.C. and has a bachelor's degree in Mathematics and Political Science from Grinnell College.
Heike Raudenkolb has been working with websites for more than ten years now. Originally started as a hobby while studying to become a certified translator in the late 1990s, web design and website production soon became her full-time day job during which she has since been building many static as well as dynamic web pages and playing with various CMS and webshop systems.
Today Heike works as a web designer and TYPO3 integrator for an Internet service provider. Her main tasks there are behind-the-scenes TYPO3 integration, customization, and templating – actually, not very different from how it is described here in this book but – she's also doing end user support and customer workshops for editors wanting to work with TYPO3.
Ingo Schmitt, born 1974, studied Electrical Engineering at the "Universität Gesamthochschule Duisburg", Germany, learned Pascal, C++, discovered the Web with Netscape 1.0, and started working for Marketing Factory Consulting GmbH, Düsseldorf in 1996. Working with PHP he developed Web-based applications, releasing his first extranet online shop in 1998. As CTO of Marketing Factory Consulting GmbH he started working with TYPO3 in 2002, including developing his own extensions. Ingo Schmitt is founder and main developer of TYPO3 Commerce, TYPO3 Certified Engineer and "IHK Prüfer für Fachinformatiker". At Marketing Factory he and his team are responsible for the complete development process for web applications and for ongoing maintenance including hosting of the applications. You can follow Ingo Schmitt on twitter at http://twitter.com/Ischmitt.
Marketing Factory Consulting GmbH is one of the top TYPO3 agencies in Germany, developing and hosting international multi-language web and portal applications for clients such as Henkel, Ecolab, Ista, Metabo, Wrigley, and Westfalia.
Marketing Factory also runs its own websites such as heimwerker.de (the biggest DIY site in the German language), ratgeber.de, and online shops like blumenbutler.de.
This book is dedicated to my parents, Loren and Kathleen, and my beautiful wife, Rebekah. To my parents, for buying me my first computer and being my most loyal readers; I miss you both. To Rebekah, for loving me and encouraging me every day before and even after the moment I decided to write this; I'll make it up to you somehow.
Preface
The template systems in TYPO3 make it one of the most powerful content management systems available today, but they seem too complex for many users. Site developers, who are able to learn how to use them efficiently, can build more extensible sites quicker and more customized for their users.
This book is a step-by-step guide for building and customizing templates in TYPO3 using the best solutions available. It takes the readers through one complete example to create a fully functional demonstration site using TypoScript, TemplaVoila, and other core TYPO3 technologies.
This book starts with the basics of creating an example TYPO3 site before showing you how to add your own stylesheets and enhanced JavaScript to the template. You learn about the different types of menus and navigation, and you can try out each one with practical examples in the book. The book shows how to create multiple templates for sections or individual pages in TYPO3 and how you can make a new template completely from scratch for a newsletter. Just as importantly, you learn how to update the editing experience and impress your clients with a custom backend. Finally, you will learn how to specialize for browsers and internationalize your TYPO3 site with simple template updates.
What this book covers
Chapter 1, Getting Started provides an introduction to TypoScript and the overall methods of building templates in TYPO3 from the beginning up to the present. The chapter introduces a new extension for building templates, TemplaVoila!, and walks readers through building their first template from HTML to TYPO3 integration.
Chapter 2, Enhancing Your Template with CSS covers the different ways of integrating stylesheets into a TYPO3 site and the advantages or disadvantages of each method. The chapter concludes by looking at the built-in classes in TYPO3 that can be used to style individual elements like even and odd rows in a table or a list.
Chapter 3, Adding Custom Template Fields gives an introduction to data structures in TemplaVoila templates and walks readers through an example of adding new fields for a banner and a datestamp to the existing template.
Chapter 4, Creating Flexible Menus covers the different types of navigation that can be created in TYPO3 templates. The chapter explains the concepts of building menus with TypoScript and walks through complete examples of text-based menus, graphic menus, and special "breadcrumb" menus.
Chapter 5, Creating Multiple Templates goes through different examples of templates that can be built based on the existing TemplaVoila template data like templates with sidebars for additional content. The chapter concludes by walking through the process of creating special print-friendly page templates that can be loaded automatically when a visitor wants to print content from a TYPO3 site.
Chapter 6, Creating a Template from Scratch walks readers through building a complete template from scratch from the HTML and data structure to a finished template with custom data fields. Up until now, the book has been extending the template that was automatically generated in the first chapter, but this chapter shows how to build a custom template from scratch without the assistance of any wizards or starter templates.
Chapter 7, Customizing the Backend Editing covers the different ways to make the TYPO3 backend easier to use for editors by customizing the options available and making the layout and styles match the frontend more closely. It starts by showing how to customize the text editor to match the design and branding of a TYPO3 site more by removing unnecessary options and adding styles that match the overall design. After that, the chapter walks readers through modifying the backend page layouts with columns and headings to mimic the frontend design of a site.
Chapter 8, Working with Flexible Content Elements introduces one of the most powerful and useful technologies in TemplaVoila, flexible content elements. Flexible content elements allow developers to create new content types utilizing the power of TemplaVoila for specialized purposes such as displaying contact information or product ads consistently across a site. The chapter explains the main concepts and walks readers through multiple examples.
Chapter 9, Creating a Mobile Website covers everything that you need to know to create a mobile version of a TYPO3 site. The chapter talks about detecting mobile browsers and devices using TypoScript, customizing the TypoScript elements for mobile devices, and creating a separate mobile template. The chapter ends by showing how to use TypoScript to automatically redirect to a special mobile site when necessary.
Chapter 10, Going International goes through all the steps to make a TYPO3 site run with multiple languages and localizations and shows why TYPO3 is so ideally suited to international websites. The chapter covers translating content, creating a menu of language options, and building special TemplaVoila templates for different languages.
Chapter 11, Building Websites with the TemplaVoila Framework covers the new TemplaVoila Framework and looks at how it can help developers build sites faster and with less effort by using a repeatable workflow and common tools. Frameworks, cleaner coding, and rapid development are all themes that TYPO3 is moving towards as it develops for the future, and this chapter gives developers a head start by demonstrating the TemplaVoila Framework.
What you need for this book
In order to get the most out of this book, the reader will need some basic web development experience and a text editor for HTML and CSS. None of the examples use difficult HTML or CSS, but a basic understanding of the core concepts is necessary to build proper TYPO3 templates. In addition, readers will need a new TYPO3 installation based on the requirements in Chapter 1, Getting Started to run the examples in this book.
Who this book is for
If you are a developer, designer, or a site builder who wants to get the most out of TYPO3, whether you are building multiple websites for clients or optimizing their company's site, then this book is for you. It is written for new or experienced users at all levels, but some basic experience with TYPO3 editing and installation is expected.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book – what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books – maybe a mistake in the text or the code – we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
Chapter 1. Getting Started
I was introduced to TYPO3 in 2006, when I started working at a ministry that was using static pages exported out of Dreamweaver. As a lazy programmer who strives for automation, I knew we needed a real content management system. We needed a full solution that was in Open Source, could grow with us, and allowed quick and easy template modifications as our goals and design ideas changed. We looked at a lot of options, but finally settled on TYPO3 after talking to some other developers I respected. They convinced me it was worth the initial effort of learning a whole new CMS (Content Management System) to have the customizability and extensibility that only TYPO3 could offer. I'm happy to say that we rebuilt that site in TYPO3 without ever looking back, but I'm a little embarrassed to admit that it took us years to learn all the possible customizations and extensions that we could use to change how templates work for our frontend users and backend editors.
My goal in this book is to show just how easy it is to build powerful, extensible websites and get you started on that next major website that you're just waiting to build. We're going to step through creating templates, building menus, updating the backend, making mobile sites, going international, and more.
Because TYPO3 has become so powerful and modular, there are often more than a few templating methods that can yield the same results. There are alternative (and possibly better) methods to many of the templating examples in this book, but I have tried to choose the easiest or most powerful techniques in each case to get a site up and running as quickly as possible. If you want to dive deeper into any particular topic after finishing this book though, I recommend continuing to learn through the online documentation at http://typo3.org/documentation/ and the other TYPO3 books from Packt Publishing http://www.packtpub.com/books?keys=typo3&x=0&y=0.
This first chapter is going to walk you through setting up a test site to experiment and play with for the rest of the book. Even if you have a site currently running on TYPO3, I recommend setting up a fresh test site as described. With a test site, we can all start with a blank template to build on, and I really don't want anyone breaking a live site when we test different menu systems or internationalization later on.
In this chapter you will:
Basic requirements
In order to follow the tutorials in the book, there are a few requirements:
Introducing TemplaVoila!
As you can see, this made very large HTML templates that had to be manually edited for TYPO3. The markers were one more step for designers to learn if they were moving into TYPO3 development. The TypoScript process also added more training and complexity for new developers who were trying to pick up TYPO3. Luckily for us, Kasper Skårhøj and Robert Lemke went on to create a new template extension called TemplaVoila!. This added more flexible page elements to replace the earlier "columns" that defined sections in TYPO3 pages. It also introduced a more intuitive backend editing experience and, more importantly, Flexible Content Elements. Flexible Content Elements allow us to reuse custom blocks of HTML, and are a key technology in building websites with TYPO3.
In TemplaVoila, the designers or developers create basic HTML templates without any extra comments or markers. TemplaVoila maps the dynamic content fields, or Content Elements, we want use in our pages to elements in our HTML template using a TemplaVoila Template Object. The first time we set up a site with TemplaVoila, we can run the TemplaVoila Wizard to help us automatically create the new content fields and map them to our HTML template.
Although not required to build all templates in TYPO3, TemplaVoila is highly recommended for its flexibility and more advanced templating techniques such as Flexible Content Elements, backend layout customization, and custom template fields. For that reason, we will be using TemplaVoila for the tutorial examples throughout this book.
Installing TemplaVoila
TemplaVoila is a TYPO3 extension, so we can install it through the Extension Manager in the TYPO3 backend.
If you just installed TYPO3 with the dummy package and finished the setup wizard, you can get to the backend of TYPO3 at http://<your domain>/typo3/ (where <your domain> represents your own testing domain). If you are using a server running on your machine with XAMPP or MAMP, then you can probably get to your site at http://localhost/typo3/.
After we've logged in, we can follow these steps to install TemplaVoila:
Creating a basic HTML template
Now that we have TemplaVoila installed, we are almost ready to go through the wizard and create our first TYPO3 pages. First, we need to create a basic HTML template. In other content management systems, you don't often start by creating a template from scratch; normally you would just find an existing one that you liked enough, and then you would edit the CSS and HTML to make it match your vision. TYPO3 allows us much more flexibility and freedom by making it easy to create our own templates from scratch or use the HTML/CSS files from our designers.
Now we're going to create a basic HTML template to get started. As we'll be doing all of our design work in CSS and TYPO3, we just need a "barebones" template that gives us areas to map our content and menus. Normally, we would get the HTML and CSS files at the same time from our web designers, but we are going to wait until the next chapter to integrate the CSS design. Here is the code for our HTML template:
We've already said that TemplaVoila doesn't need any extra markup or comments, but we do have some requirements. As TemplaVoila is mapping TYPO3 content to our HTML elements, all of the HTML code must be completely valid with beginning and end tags. In addition, there are certain kinds of tags that we need:
The root tag
All TemplaVoila template objects must have a "root" tag as an overall container for mapping. This can be any kind of enclosing tag; if we only wanted to use one section of a larger template, for example, we could use a div section. For this example, though, we are using the entire body of the HTML template, so we need body tags.
The menu area
We also need a container for the menu and the submenu sections, so we have added list tags for both menus with unique ID attributes or menu-area and submenu-area. These will serve as the containers for our dynamic menus, which will be filled in later through TypoScript.
The content section
Finally, we have our content section that will be used to display the actual TYPO3 page content that we care about. For more complex templates, we would probably have more than one content section, but one container is a good place to start, and is all we need for the wizard.
Now that we have created our basic HTML template, we need to save it where TemplaVoila will find it. In order for TemplaVoila to find our template without problems, we must create a directory named templates under the fileadmin/ directory of your new TYPO3 installation. Once you have created the directory, save a copy of our new HTML template in it as template.html. The name is not required to be template.html, but throughout this tutorial it will be referred to as such.
Creating your first template with the TemplaVoila Wizard
Now that TYPO3 is setup, TemplaVoila is installed, and we have an HTML template to start with, we can run the magical TemplaVoila Wizard to create a whole site in just a couple of mouse clicks. I know this section has a lot of pages for a couple of mouse-clicks, but it's important to understand what we're clicking on this for the first time.
If you log in to the backend of TYPO3 right now, you will see we have a website with absolutely no pages. When we go through the wizard, it will perform three tasks:
We are ready to start, so go ahead and choose the TemplaVoila module in the left frame to enter the New site wizard as shown in the following screenshot:
Selecting the HTML template
The first thing we need to do is select our HTML template. As we only have one HTML file in the fileadmin/templates/ directory, the only choice will be our new file, template.html. Click on [Choose as Template].
Configuring the new site
Once we click on Start wizard now! we are looking at a screen where we can set basic information for our website. The name of our website is required to establish a unique name for our website, but the URL of the website is not required. Running the wizard will create a new editor in the backend, so the username field is required. In the example below, I have named this user editor. The values that we fill in here are used to start adding content to the database, set our URL in TypoScript, and create a new user, but all of these settings can be easily changed later if necessary. Once you've filled in required information, click on Create new site.
Mapping the template
The screenshot that we just saw is just an introduction screen for the wizard with an animation to explain the mapping process. Click on the Start the mapping process button near the bottom of the page.
Now that we are starting the mapping process, we are presented with the default TemplaVoila editing pages. Make sure you are on the Mapping tab.
This page is the heart of TemplaVoila mapping. You'll notice that this page has five columns, and understanding them now will introduce you to some of the TemplaVoila concepts, and will save you from frustration later on.
Data elements
Each template field is referred to as a Data Element in the mapping section of TemplaVoila. Basically, every template section that will be replaced with TYPO3 data (menus, content elements, and so on) is considered a data element in our template. Each template in TemplaVoila uses a special Data Structure object to define all of the data elements such as Main Content Area or Main menu that will be available for mapping. When we are creating TemplaVoila templates from scratch, we must define data elements by creating a data structure. We are going to be editing data structures to add our own data elements in Chapter 3. This first time, though, we are going to use the data structure from the wizard because it already includes all the data elements we need.
Mapping instructions
The next column, Mapping Instructions, is a simple text area for notes in the data structure. The mapping instructions are not binding, but they are used as plain instructions from the creators of the data structure (the TemplaVoila creators, in this case) to the template object mappers (that is you and me, the users of the wizard). We can see, for example, that the default Data Structure includes instructions to map the Main menu element to …the HTML container element where you want the automatically made menu items to be placed.
HTML-path
Once we have mapped an element, the mapped tag will show up in the HTML-path column along with the mode, as we saw with the root data element discussed earlier. The "mode" of a data element refers to inner and outer mapping. If a data element is mapped with INNER selected, then the HTML tag from the template will remain untouched, and the TYPO3 content will go inside it. In OUTER mode, the tag will be replaced by the TYPO3 content. We don't need to worry about changing the mode yet, but it can be handy in special circumstances when we want TYPO3 to add in its own tag and class information.
Action
The action column simply holds the buttons for mapping, re-mapping, and changing the mode of a data element.
Mapping rules
The rules, as the name implies, are the technical restrictions or allowances that the data template creators have written into the structure. In this first template, the rules will only allow the root data element to be mapped to a body tag, but they allow any of the other data elements to be mapped to almost any container tag. The main content area can even be mapped to paragraph and header tags, if we so desire. As an example, TemplaVoila will not allow us to choose a span tag in the mapping windows for the main content area, because it is not allowed in the set of rules. As developers, we will normally allow mapping to most HTML containers like the example discussed earlier, but it can be helpful to be more restrictive to avoid unintended mappings.
Starting to map
Now that we understand what's possible on the mapping page, we can start mapping the elements. We're going to map the main content area first, so go ahead and click on the Map button in the main content area row. This will take us to the mapping screen, and we can choose an editing mode from the Mapping Window drop-down. Mode: Exploded Visual will show the rendered view of the template with clickable areas for mapping, or we can choose Mode: HTML Source to navigate through the HTML source code. For our purposes, we can map in the exploded visual mode. To map the correct content tag, we'll just click on the div button with the content ID (circled in the following screenshot). If we hover over the div button, we can see the class, ID, and full path so we can identify it better:
After we have chosen the mapping target, the next page prompts us to specify whether we are using INNER or OUTER mapping before we set the changes in the database. We will choose the default INNER mapping from drop-down in the action column because we do not want the div to be replaced with TYPO3 content; we want our TYPO3 content to go inside of the div tag. If we chose OUTER mapping, then the generated TYPO3 content would replace the div tags instead of just the content inside the tags. Now we can click on Set to save our mapping to the database, and the wizard will take us back to the main mapping section.
We've now successfully mapped our first element! I'll give you a minute to celebrate, because you deserve it. You now officially have all the skills you need to complete the rest of this section, and I'll just be here with a little bit of guidance.
Mapping the rest of our elements
Our next step is mapping the main menu, and it will work exactly as you'd expect. Go ahead and click on the Map button in the Main Menu row of the mapping page. We are going to choose the tag with the ID menu-area for the main menu, and choose the inner mapping mode. Remember to click on Set
