Feeling much more enthusiastic today, as last night I studied two chapters of @Robert Meyer's "Praxiswissen Typo3 Version 6.0": chapter 3 "Das Backend kennenlernen" and chapter 4 "Das Praxisbeispiel vorbereiten". I got through about half of the fifth chapter, "TypoScript in der Praxis" before going to sleep.
Translation: @Robert Meyer's "Typo3 in practice" has been like a beacon of light through the gloom for me. "Getting familiar with the backend" was review, but "preparing the practical project" once again gave me hope that I will soon be programming something useful. Namely he describes, in an acutal step-by-step manner, how to set up a Typo3 website for a fictional snowboarding school with the following features:
- Layout in HTML and CSS, with dynamic elements written in TypoScript
- Two dynamically-generated menus: one single-level text menu overhead and one double-level graphical menu on the left-hand side
- A dynamically-generated grafical trailer, based on the site currently being browsed
- A dynamically-generated information area, based on current site, with last 3 most current news items
- Dynamically-generated news-items
- A search function with the ability to search PDF and Word documents available through the site
- A dynamically-generated sitemap
- Bilinguality: each page of the site should be available in both English and German versions
- Print-versions of every page
- A breadcrumb-type display from which the user can always infer where they currently are within the site structure
- Time-dependent greeting ("Good Morning", "Good Afternoon" or "Good Evening")
- A protected area for authenticated users
- A user-friendly backend interface for site-editors
- Later - replacement of HTML templates with templates created by TemplaVoila
This practical project covers the basics of most Typo3 sites and gives me a concrete structure around which I can organise my learning. I'm so excited!
First steps: downloading and installing the dummy-site and source from Typo3, as well as configuring, was incredibly easy after the hellish first-run with the introductory package. After logging in to the new backend, under "File" - "Filelist", I then uploaded the directories "css", "fonts" and "css" under "fileadmin", as instructed by the tutorial. The necessary image and css-files were available for download from the site for the book. Instead of downloading the html template with TypoScript already written, I downloaded only the static html template and made the changes demonstrated in the tutorial by hand, in order to get a feel for TypoScript "marks" in template construction.
Now it's time to build the navigation structure. In order to make a menu-tree that is as flexible as possible (for editors to supplement with additional pages), it's necessary to create a top-level menu item as a "helper page" for each menu that should appear in the website. In this case, we have two menus - one menu overhead, and one on the left-hand side. These top-level "helper pages" will not be seen by the user; rather, they serve as constructs on which to hang things (like templates, or other properties), which will be then be inherited by all sub-pages in the menu.
Because we want to avoid duplicating code, we will attach these two helper-pages not directly to the root page itself (to which templates can not be directly attached), but to a third helper site, directly attached to the root, from which both menu helper-pages will inherit. It is with this top helper page that we will associate the template to be inherited by each menu helper page and, in turn, their respective sub-pages.
Not only should these three helper-pages not be visible to the user, they should also not be callable to the user. In order to enable this, we need to set the types of these pages from "standard" to "shortcut". This ensures that, should the user call these pages explicitly (by ID), the user will be forwarded to a site that is OK to see: in this case, the homepage. I found out, though, that disabling the visibility of the root page will cause an error in the front end. I reverted it back to "visible", which allowed me to continue with the tutorial and also try out the various TypoScript examples provided by the author.
To elaborate on yesterday's puzzlement about WHERE to write TypoScript:
On the left-hand side navigation, click on "Template" under "WEB". Now click on a site you want to modify: in my case, this was the root document. A page will appear on the right-hand side with a dropdown at the top left corner of the page. From this dropdown, pick the selection "Info/Modify". Now click on the "pencil" symbol next to the word "Setup". A page will appear called "Template tools". Here, there is a textbox where you can write TypoScript! Here is a very simple example:
page = PAGE
page.10 = TEXT
page.10.value = Hello World!
After writing this TypoScript, you can save by clicking on the disk-symbol on top of the page, and then on the symbol of what looks like a page with an eye over it.
It's that simple. A real, step-by-step set of tasks that a Typo3 learner can go through, one by one. Meyer's book even illustrates these instructions with screenshots, pretty much making the example idiot-proof.
Back to the project: the integration of the static html template (with TypoScript in certain areas) is also done via TypoScript, namely:
# Default PAGE object:
page = PAGE
# Define output for typeNum=0, the default type.
page {
page.config.doctype = html5
#Metatags
meta.author = Robert Meyer, Martin Helmich
meta.description = Hier steht eine Beschreibung
#integrate HTML Template
10 = FILE
10.file = fileadmin/vorlage.html
}
When I look at the generated html code for this page, I see correctly-formatted HTML tag for HTML 5 as well as meta-tags for "author" and "description". There is, however, a problem, and that is that the html template has its own html and body tags, which leads to a doubling of these tags in the source code, i.e., incorrect HTML. Meyer goes on to explain how to solve this problem: namely, we need to work with "Teilbereiche", or... part-parts? Sub-parts, maybe. In order to do this, we need to insert a TEMPLATE object with TypoScript. This TEMPLATE object receives a string from the FILE object and can use its property, "workOnSubpart", in order to extract the part within the html template that we have designated as being such. The code of this designation within the html template looks like this:
<!-- ###DOKUMENT### begin -->
<!-- ###DOKUMENT### end -->
with HTML code between these two designations.
Here's the TypoScript code we need to write in "Setup" text area (as described above):
# Default PAGE object:
page = PAGE
# Define output for typeNum=0, the default type.
page {
page.config.doctype = html5
#Metatags
meta.author = @Robert Meyer, @Martin Helmich
meta.description = Hier steht eine Beschreibung
#integrate HTML Template
10 = TEMPLATE
10 {
template = FILE
template.file = fileadmin/vorlage.html
workOnSubpart = DOKUMENT
}
}
With the TypoScript PAGE object function "includeCSS", you can include a stylesheet uploaded previously into fileadmin/css:
page {
...
#include css stylesheets
includeCSS {
screen = fileadmin/css/style.css
screen.title = display
screen.media = screen
}
...
}
which results in the inclusion of the following link in the HTML source-code:
<link rel="stylesheet" type="text/css" href="fileadmin/css/style.css?1384858913" media="screen" title="display">
It's only 3pm and I've accomplished more today up to this time than I did the entire day yesterday. @Robert Meyer has just become my new Typo3 hero.
Replacing the "marks" within the html template is as easy as calling the "marks" property (method, actually) within the PAGE element and setting its object type and its value:
page {
...
10 {
...
marks {
DATUM = TEXT
DATUM.value = 19. 11. 2013
}
}
}
The mark "DATUM" can be found in the HTML template within "div" tags as
###DATUM###
Later, the hard-coded value for the date will be replaced with a dynamic value, made possible by the use of TypoScript functions. TypoScript functions can also be used for, among other things, reading values from fields in the database or getting POST and GET values. In order to do this, the property of the mark needs to be "data" instead of "value". The syntax for creating a dynamic date in TypoScript shares similarities with the syntax for formatting a date with the PHP date() function:
page {
...
marks {
DATUM = TEXT
DATUM.data = date:d.m.Y
}
...
}
For the rest of the day, I worked through chapter 6 - working with dynamic images in Typo3. Unfortunately, about 30% of the example code didn't work. Some of the hints for fixes for -older- versions of Typo3 worked for me, even though the version of Typo3 that I have is newer than that in the book. I know that there is little point in posting these questions on the Typo3 forum. Instead, I'm going to move on to the next chapter tomorrow, about setting up dynamic navigation.
I accomplished so much more today and feel accordingly energetic and optimistic. Thank you, @Robert Meyer!
No comments:
Post a Comment
Play nicely!