Many doubts about TYPO3 template system - content-management-system

I am very new in TYPO3 (I came from Joomla and WordPress) and I am having difficulties in understanding how templates are handled in TYPO3 (it seems to me that the situation is more complex in TYPO3 than it is in Joomla and in WordPress).
I have installed and I am testing this version of TYPO3 introductionpackage-6.1.3.zip
In Joomla and in WordPress a template simply is an HTML structure (which are marked in the various areas of the page where the CMS modules will be placed) and the related CSS settings.
In TYPO3 it seems to me that the situation is very different or am I wrong?
At this moment I am reading this section of the official documentation that references the default template of the TYPO3 Introduction Package: http://docs.typo3.org/typo3cms/GettingStartedTutorial/Templates/Index.html
The difference between static content and dynamic content of a website created using a CMS is pretty clear to me (this is not different from any others CMS like Joomla or WP)
Dynamic content: is something that is dynamically created by the CMS (executing some queries) as a menu (it look into a DB table and then a script renders the menu on the page)
Static content: is something that is fixed as the title of the website or a background image
Until now I think that it is pretty clear for me but I have many doubts when the documentation speaks about the Template Record as a way to implement the previous principle.
Here: http://docs.typo3.org/typo3cms/GettingStartedTutorial/Templates/%28%28generated%29%29/Index.html
it says that:
This is a control element that instructs TYPO3 how to handle a certain
branch of the page tree.
In particular with this image it shows how to modify these template records for the Introduction Package Template (Introduction Package is also the name of the template provided with this package or what?):
Then on this section on the documentation it says:
If you edit the template "Introduction Package" you will see that most
fields are empty. For each website you need a TypoScript template on
the ROOT level, in this case that is the "Introduction Package"
template. The TypoScript configuration of a website can be quite long
therefore it is possible to make many small TypoScript templates that
get included in the main template. For better maintenance, all
TypoScript of the Introduction Package has been put into the folder
'Typoscript Templates'. The only thing the "Introduction Package"
template does is to include the "ROOT" template that in turn includes
other templates.
And this is totaly obscure for me: I have understood that TypoScript is a configuration language that can be used to configure the frontend (so I think that I can use it to configure how my page will appear) but I can't understand the following assertions:
What does this mean: For each website you need a TypoScript template on the ROOT level, in this case that is the "Introduction Package" template ? I have installed TYPO3 Introduction Package and I have only a web site !!! What is the ROOT level of the website? Is it the Welcome to TYPO3 node in the List section Tree? So in pracatice I am assigning a specific template to the root of a website and this is used in all subnodes (all the pages as Home, About TYPO3, Features, etc)?
What does it mean when it says: For better maintenance, all TypoScript of the Introduction Package has been put into the folder 'Typoscript Templates'. Where is this folder? I don't have it.
What does it mean when it says: The only thing the "Introduction Package" template does is to include the "ROOT" template that in turn includes other templates.?
Tnx so much
Andrea

The root level of your website is the page called Home. It also has the globe instead of a normal page icon, because the flag Use as root page is set in the page properties under behavior.
When you access a page in TYPO3 CMS, then it will walk up the rootline until it finds a root page with a template record. In this case, it is indeed a record called Introduction Package, but what is more important, is that this is a record of the type template.
OK, so far we have found a template for your request. Now TypoScript comes into play. On a normal request, the template engine will search for an object named page which is (usually) of the type PAGE. Thus the most simple template is:
page = PAGE
page.10 = TEXT
page.10.value = <h1>Hello World</h1>
Which just prints Hello World on your website.
What happens next depends on your template approach chosen (marker base, automaketemple+marker, templavoila, fluid, fedext, ...). That means that TYPO3 CMS does not just have one template approach (or one kind of template), but is extensible and very flexible, as you can combine them.
In the Introduction Package uses the automaketemplate+markers approach. This includes a ready HTML template, automatically creates blocks based on certain rules and then replaces those blocks with dynamic content.
OK, where do you find the configuration for this?
The actual template file is fileadmin/default/templates/introduction_package_site_structure_template.html.
The TypoScript configuration is in fileadmin/default/TypoScript. There you can find a file called setup.ts. It includes all other TypoScript files. There are various folders, e.g. menu for the menu definition, block for the dynamic blocks, etc.
The configuration of automaeketemplate is in Extension/AutomakeTemplate/setup.ts.
The sections defined with the help of automaketemplate are replaced in Page/setup.ts.
The full TypoScript defines a tree structure of objects with their configuration. You can view the full parsed template with either the Template Analyzer or the TypoScript Object Browser which you find in the template tools in the dropdown select box on top of the module.
The separation of the TypoScript into several files is done by the purpose of the configuration inside the files. This is meant for easy maintenance and not for easy learning. You can always use the Template Analyzer to see the full template that is generated out of the fragments and the TS Object Browser to see what kind of configuration tree this results in.
This might sound a bit difficult at first, especially compared to the primitive template systems of other products, however it gives you great possibilities that are yet easy to maintain, even if you do major updates.

It is great to see that people decide to use TYPO3. In my point of view the biggest difference to WordPress, Drupal...
is the strict separation between HTML and dynamic logic, witch can be TypoScript/userFunc or Fluid logic...
and even this makes TYPO3 so powerful. nothing against WordPress, Drupal... ect. but to use PHP in templates is especially for updates a dangerous thing to do.
I am always impressed whats possible with TYPO3. "I cant do it" is not valid for TYPO3. TYPO§ always has a way.
It is indeed a hard way through to learn all the corners of TYPO3 but it is worth.
Keep doing it and you will succeed
Ludwig

Great to hear you also wanna use TYPO3 as a CMS.
To understand the TYPO3 CMS better, i think you can better begin from scratch, meaning download the source + dummy package and install it on your server, or maby download a wamp package.
Currently I use Fluid to build my templates. For the part outside TYPO3 its much like Joomla, just create one or more HTML files, with some special markers.
The other parts, which are in TYPO3, may be some more difficult now, and it would take a lot of time to explain that here, so i'll refer to a tutorial made by Thomas Deuling:
http://thomas.deuling.org/2011/06/create-a-complete-typo3-website-by-using-the-fluid-template-engine/
You might wanna join the TYPO3 mailing list for italy, found at http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-ug-italy.
Furthermore, the TYPO3 website is filled with documentation, although sometimes out of date its still usefull. Also you might wanna take a look at the TYPO3 certified integrator program. There you can find all the basics to become a master at TYPO3.
Please feel welcome to the community, TYPO3 is inspiring people to share!
Kind regards,
Jeroen

Hi i wrote a little starter ts time ago.. maybe helps you
Remember in TYPO3 there are many ways to solve things!..
gl
Setup:
config {
baseURL = http://www.bla.com/
prefixLocalAnchors = all
meaningfulTempFilePrefix=1
doctype=xhtml_trans
htmlTag_langKey=de
remove_defaultJS=external
inlineStyle2TempFile=1
disablePrefixComment = 1
linkVars=L
sys_language_uid=0
language=en
locale_all = en_EN.UTF-8
xmlprologue = none
}
page = PAGE
page.typeNum = 0
page.bodyTag=<body>
page.10=TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/templates/template.html
workOnSubpart = DOCUMENT
subparts {
CONTENT=COA
CONTENT.10<styles.content.get
}
}
File: template.html
<!-- ###DOCUMENT### -->
<!-- ###CONTENT### -->CONTENT<!-- ###CONTENT### -->
<!-- ###DOCUMENT### -->

Related

TYPO3 page only shows "HELLO WORLD!"

I started to learn how to use TYPO3 because I want to create a FAQ page. So I created a very simple page:
But if I view the page, then i only get "HELLO WORLD!". What am i doing wrong?
Did i missed some steps? Where can i get started the best way?
I use TYPO3 8.1.2 btw.
First of all: You have done nothing wrong.
TYPO3 has it's own configuration language: TypoScript.
You have to tell the system in TypoScript what should be rendered in the frontend. The default is a simple TypoScriptSnippet that only prints out the text HELLO WORLD.
I looks something like this:
page = PAGE
page.10 = TEXT
page.10.value = WELLO WORLD
You can find the configuration of your page in the Template module in the backend in the field "Setup". You can either change the TypoScript directly in there or use external files and include them.
You have to understand at least the basics of TypoScript and Templating in TYPO3 to make the content you create in the backend appear in the frontend. If you learn from sources in the internet, try to avoid the old ones.
If you need more help, please feel free to join the TYPO3 community at slack (https://forger.typo3.org/slack), where you can ask any kind of TYPO3 related questions. We will happyly hep you to get started.
you just need to add template typescript code.
or other best way is the use the template by install the template from the pre distribution option.
Go to file extension and select from drop down "Get Preconfigured distribution" option and install from their list of available template.
After install successfully you can see page add/edit option have web icon, inside them you can create new page,
It will show page content on view.

Creating a new page template in Typo3

I'm using Typo3 for the first time and have been asked to update a site built on it.
Making changes to existing templates so far has been OK since they were mainly CSS changes or replacing images. Now though I need to create a couple of new page templates.
What's the easiest way to go about this? The existing site has a home.html and layout.hmlt in the fileadmin directory. Do I need to create a new html file there, if so how do I use this as a new template for some of my pages?
I'm coming from a mainly WordPress background in terms of CMS (I've nearly given in a recoded the site as a WordPress site since I think it would be quicker at this stage) but I'd really prefer to figure this out.
Any suggestions would be greatly appreciated as I'm pulling my hair out trying to read through the documentation and getting nowhere. The site is using Typo3 version 4.4.6
Thanks!
How you add a new template to your page depends on how templating is handled. Sadly TYPO3 has a poor templating out of the box, so there is most likely an extension that does the job on your site.
Probably one of these:
automaketemplate
templa_voila
flux & fluidpages
Check if one of these extension is installed and add a new page template according to the extensions manual or specify your question afterwards.
Edit:
If plain TYPO3 was used, you'll find something like
page = PAGE
page.10 = TEMPLATE
page.10 {
file = fileadmin/myTemplate.html
}
in your Typoscript. You can add tmplate files like the ones that are already there. To use a different template on a page, you have to replace the page.10.file with the template you want to use. This can be done with a new template record (crated in backend via the template module). But this is a rather anoying procedure to change the template, because you have to create each time you want to change the page template for a page and its children. That is why mostly extensions are used for this.
The out of the box situation gets better with newer TYPO3 versions but in 4.4.6 there are no Backend Layouts that could be uses for a template switch ot something like that.
In Addition to change the mere file you have to adjust the subparts or marker that are filled with the content. You'll find that configured in your TypoScript as well

What is "Fluid powered TYPO3" and is it recommended?

What is to be understood by "Fluid powered TYPO3" (as stated by http://fedext.net/) and what are its benefits for the integration?
Are there other modern templating approaches for TYPO3 6.x that would be best practice to switch to now?
I don't understand the different systems that are around at the moment and I need some clarification.
The background of the question, what I am looking for:
Don't use Templavoila
Keep it simple, little coding overhead
That's why I still use markers!
Enable Custom content items in the backend like FCEs in TV
Foment "structured content" approach in TYPO3: predefined inputs and detailed rendering vs. "Anything goes" like in css_styled_content
And what about https://github.com/Ecodev/bootstrap_package ? Is it recommendable?
Although this question is fairly old by now (I didn't see it until now) and you probably already found out more about what Fluid Powered TYPO3 offers:
The features you ask for (TV-style FCEs, low coding overhead and especially the last one which is more regarding the process than the tool) are exactly what Fluid Powered TYPO3 is all about:
We provide simple ways to get page and content templates recognised by TYPO3 and made available to use by the site's content editors.
We use a common API approach (which is built on top of TYPO3's TCA/TCEforms) which you can use in both page and content templates to add custom fields (as an example: create a field to set the color of the site's header or configure a content element to have a blue background, and so on).
We use Fluid which is (as Michael already stated) a superb rendering engine.
But this is just a small part of the possibilities you have with the extensions (currently there are 20 - no, really, 20) which all provide different feature sets: there's the ViewHelper library VHS which you can use with any type of Fluid template, there's fluidpages, fluidcontent and fluidbackend which lets you place template files in a recognised path and made available to use without further hassle, there's view which lets you use overlay paths for plugin templateRootPaths (example: override only one template file from EXT:news without having to copy all template files from EXT:news). There's builder which can generate extensions, ViewHelper unit test classes, test your Fluid templates and more. There's tool which contains a range of Extbase Service-type classes that you can use in your own Extbase plugins. There's fluidwidget which is a great base for complex Fluid Widgets. You've got side utilities like *extbase_realurl* which can generate automatic realurl rules for any Extbase plugin. And there's schemaker which can let you create your own XSD schemas for your own ViewHelpers (or any version of for example fluid itself, or VHS, or flux etc.).
And there is more than this. Simply put, we offer you every tool you need to create every type of site, template or plugin. Our tools have one primary focus: efficiency.
It sounds like a huge mouthful but it isn't as complicated as it seems. Usually you will start off by using three or four of the extensions and their purpose is quite clear: Flux allows you to add the form fields which content editors use to configure content, pages and plugin instances; VHS provides a large number of multipurpose VieWHelpers to use whenever you need more than just those included with Fluid. And then one or both of fluidcontent and fluidpages which are -very- simple in that all they do is allow you to use template files as content elements or page templates.
There is quite a bit to get used to - this is true of any framework - but we spent a lot of effort on making the API the same across the line, which means anything you learn in one context (for example page templates) you can use in others (like content templates and backend modules).
If you want to save time and be consistent when creating content, pages and plugins, Fluid Powered TYPO3 (which is the umbrella name for all those twenty-something extensions) will do exactly that for you.
I can recommend taking a few minutes to read the new tour I published on fedext.net - the URL is http://fedext.net/tour/form-api.html - it primarily speaks to developers who've touched on Extbase and Fluid earlier, but even if you're used to "just" working with TYPO3 the main points should make sense.
And if you need more details than this you are welcome to find us on Github or on IRC (#typo3 on Freenet). We're always happy to help new users.
Cheers,
Claus aka. NamelessCoder
Fluid offers a much cleaner approach of dividing template logic from display logic and controller logic. Your result will be structured much better when using the possibilities fluid and the mentioned extensions like vhs provide (like layouts and partials).
The usage is actually very simple but can still be combined with the oldschool marker approach (you can do things like <f:cObject typoscriptObjectPath="lib.marks.MAIN-MENU"/>). If you need more flexibility in the backend like in TV, you (of course) have to code some things yourself.
The easiest way is to use an extension which is created by modelling it in the backend to fit your custom needs, but you can also adjust the rendering of pages and/or default content elements by using typoscript and the fields given (like pages.layout, header_layout, section_frame and so on).
So you always have the choice between detailed inputs (extbase extension objects) and using the TYPO3 default things like page properties and RTE config in combination with some typoscript magic (css_styled_content).
So as a conclusion I strongly recommend using fluid templates and additional extensions like vhs as they provide a lot of (additional) power and reusable templates while still let you use markers if you want to. Personally, I also prefer to enhance or limit the RTE in the backend in favor of writing too much special code for an FCE-like result.
BTW: There are very good autocomplete features by using the DTDs/XSDs from fedext.net in your IDE which made my template programming much faster (like 25%).

Which template system should I use in Typo3?

Up to now, I used to use template auto-parser. I like the fact I can modify any element of the template using typoscript, without altering the initial HTML file. I also like the fact that I can render the html template directly in a web browser, filling it with dummy elements to see examples of menus and content elements. Finally, with the new backend templates, i now can place content elements anywhere on a grid, in a way that mimics the real aspect of the website.
I know there is also TemplaVoila. I never took the time to learn it. My feeling is that it is less compatible with some extensions, but maybe I am wrong.
Now, there is fluid, that will be used in the next version of Typo3. While it is clear that it is better using it that using template markers, I don't really understand why I should be better using Fluid than using template auto-parser or TemplaVoila. What I dislike is the fact it requires to modify the html template with special tags, meaning that either the web designer has to know Fluid, or the Typo3 integrator has to modify templates from the designer each time a modification is performed.
My question is: should I migrate form template auto-parser to Fluid for my website template? What are the benefits of using Fluid? Why should it be better? What template system should I use with Typo3?
As long as TypoScript does not support objects, the benefits of FLUIDTEMPLATE over template auto-parser are only a few. So there is no need to migrate.
But IMHO there are some arguments to switch to fluid:
more and more extensions will use fluid, so it will help you to learn fluid
you can use an ide with code-completion for fluid (it is just XML!)
fluid is really powerfull, you can have f.e. if statements which checks for empty content
some day TypoScript will support objects as well
But for extension developement, it is totally different. In an Extension, i would allways prefere using FLUID. You do not have to deal with template things inside your extension anymore. Just pass the data to fluid and things which concern the view will be done in your template.
Whever you choose, it should be something based on Fluid - this will allow you to be extremely versatile and it makes the implementation less important than the template, which is quite good.
I myself am the creator of the "Fluid Powered TYPO3" framework (formerly known as FED) and would of course recommend that you take a look at what this framework can do for you - it's capable of great things, not the least of which is saving you a lot of time while at the same time allowing you to create even more consistent templating for pages and content - and even backend modules.
And we're always happy to help new users. We are currently in the process of improving our documentation, but you can already find many fully up-to-date guides on our Github page - https://github.com/FluidTYPO3 - the repository called "documentation" is the place we will store all the documentation.
You may want to have a look at http://fedext.net http://fluidtypo3.org - especially the "Tour of features" which tries to explain the point of Fluid Powered TYPO3 in as few words as possible. After that, the examples from the documentation will give you a much clearer picture of what Fluid Powered TYPO3 can do for you.
We focus on efficiency always - we've tried to do all the heavy lifting so that you really can just sit down and begin creating page templates. We took a lot of inspiration from TemplaVoila but there is no more re-mapping of content and things like this: when you change your templates, that change is immediately reflected, which makes it very nice to work with in iterations and do things like continuous delivery and -integration.
Hopefully this helps!
Cheers,
Claus aka. NamelessCoder
You could also argue, that adding special tags like
<f:section name="typo-content">
<div id="content">This is where the designer intended content to go</<div>
</f:section>
Could assist your designer while doing a redesign to know where you "mapped" your content elements to. This is neither the case with autoparser nor with TemplaVoila. So if the designer moves stuff around you probably get your templates back and they still work without any modifications.

TYPO3 - HTML RTE frontend rendering is not working

I have the latest version of TYPO3, and the data I entered in the RTE is not rendered properly in the frond end (in site).
So for example <p>asdf</p> will show as it is in frond end.
I googled it and tried with some RTE default configuration changes, but that did not work well.
Please try with some basic testing first.
Create a new site on root level (directly below the globe). Create one content element with all text and styles you want to test.
Create a new Typoscript template for this site and put the following in the setup section:
page = PAGE
page.10 < styles.content.get
Make sure to include CSS Styled content inside the static template section.
Now watch your page page in frontend. Does it work?
Otherwise try step 0. and create a new (admin) backend user first.
Most likely you have either a strange transformation rule inside your RTE config in backend (UserTS or PageTS) or you have some kind of htmlspecialchar definition for your frontend rendering.
Please post something of the following basic Typo3 configuration settings and/or tell us if you use something of that:
You Upgraded from an older Typo3 version? Than it could be, that some configuration is missing.
Root Template or Site Template inside Typo3 Backend you can create or edit one, when you click in the most left menu on "Template"
If you choose "Create Template for new site" button the most basic Typo3 Typoscript * is automatically created
# Default PAGE object:
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!
Do you have such an TS (= Typoscript) tested? TEST IT and tell us if it works!!!
Does this work for you?
(Typo3's own configuration language - both a blessing and a curse - can be so easy and so painful - most laughful description i ever read, you can found on hatetypo3.blogspot.de "spaghetti code festival")
Don't miss include "CSS styled content" (it's in the form "edit whole template -> Includes)
But if you don't have include this, normally no site content is displayed in the frontend.
Another way is to include basic TS configuration in one or mor separate files. To get the files working, you have to referce them by this snippet in a Site Template in the BE
<INCLUDE_TYPOSCRIPT: source="FILE: yourfile">
# BTW I saw that it is common to place the file in a dir like
/fileadmin/ts/yourtyposcriptfile.ts
So give us this info or ask for more, if i miss something.