Auto-parse Template

Extension Key: automaketemplate

Language: en

Keywords: forEditors, forAdmins, forBeginners, forIntermediates

Copyright 2000-2009, Kasper Skårhøj, <kasper@typo3.com>

Update: 2009-2013, Jigal van Hemert, <support@alternet.nl>

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.org

Table of Contents

Auto-parse Template	1

Introduction	3

Configuration	4

Base properties:	4

->element:	4

->single:	5

Using this to build a site:	8

Introduction

This plugin can be used to read an HTML file, then automatically insert subpart-markers around parts with certain classes/ID's.

There are these objectives:

Allow an CSS based HTML-file including file-references, existing somewhere in fileadmin/.../ to be used directly as template by TYPO3.

Keeping the original template file totally free of HTML-comments (which some editors might filter out by accident) and totally viewable with all references intact.

This extension is demonstrated in the tutorial “Modern Template Building, Part 1”.

Configuration

Base properties:

Property:	Data type:	Description:	Default:
content	cObject	This delivers the content for the parser. Probably a FILE cObject.	
elements.[tag].all elements.[tag].id.[value] elements.[tag].class.[value]	->element	Defines an HTML-element to be wrapped. [tag] name in upper case! All tags defined here should be tags with both open AND closing tags (eg. “A”: <A>....</A>, or “TABLE”: <TABLE ...>....</TABLE>) .id takes precedence over .class which in turn takes precedence over all.	
elements.[tag].rmTagSections elements.[tag].rmSingleTags	list of tags	A list of tags (in lowercase) which will be removed (with content) from the section. See example with the HEAD tag. Use "rmTagSections" only for tags which have an ending tag as well. Use "rmSingleTags" only for tags which does NOT have ending tags (br,hr,img,input,meta,area,embed etc.)	
elements.[tag].str_replace.[key].value elements.[tag].str_replace.[key].replaceWith elements.[tag].str_replace.[key].useRPFunc		Replace strings in block. [key] is any string, number etc, just used to allow multiple str/replace operations. Example: elements.TD.str_replace.10 { value = #996633 replaceWith = blue } This example replaces the color “#996633” in all table cells with “blue” To use a the “preg_replace” function instead, just set elements.TD.str_replace.10.useRPFunc = preg_replace Note that ereg* functions are deprecated in PHP 5.3! Use preg_replace instead. ereg_replace support is removed in the current version of automaketemplate.	
single.[tag].all single.[tag].id.[value] single.[tag].class.[value]	->single	Defines an HTML-tag to be wrapped. [tag] name is in uppercase. All tags defined here should be tags WITHOUT closing tags, eg. “<img....>” or similar. “.single” corresponds to “.elements” but deals only with “single”-tags (like <IMG> or <BR> or <HR>) as opposed to “.elements” which deals with blocks (like <TABLE>....</TABLE>).	
relPathPrefix relPathPrefix.[tag]	string	Prefix to all relative paths in the file. If the .[tag] (uppercase) is specified, then this value will define an alternative path for those tags. Example: relPathPrefix = fileadmin/html/ relPathPrefix.IMG = fileadmin/html/imageset_2/ (so another set of images in the folder “imageset_2” will be used while all other references are kept.)	
getBodyTag	boolean	If set, then body tag is returned from the content, if found.	

->element:

Property:	Data type:	Description:	Default:
includeWrappingTag		If set, the wrapping will occur on the outside of the tag instead of the inside.	
subpartMarker	string	Alternative subpart marker. Default is the id/class attribute value wrapped in triple-#	
doubleWrap	boolean	If set, the tag is wrapped both inside and outside. Inside is default. The outside wrap will be prefixed “_PRE”.	

->single:

Property:	Data type:	Description:	Default:
subpartMarker	string	Alternative subpart marker. Default is the id/class attribute value wrapped in triple-#	

Example

Say you have this TypoScript configuration of the plugin in a template record:

# Plugin configuration:

plugin.tx_automaketemplate_pi1 {

content = FILE

# Filename to template file: (1)

content.file = fileadmin/html/index.html

elements {

# (2)

BODY.all = 1

BODY.all.subpartMarker = DOCUMENT_BODY

# (3)

HEAD.all = 1

HEAD.all.subpartMarker = DOCUMENT_HEADER

HEAD.rmTagSections = title

# (4)

SPAN.class.sitepath = 1

# (5)

TABLE.all = 1

TABLE.all.includeWrappingTag = 1

# (6)

TABLE.class.mainTable_class = 1

TABLE.id.mainTable_id = 1

TABLE.id.mainTable_id.doubleWrap = 1

# (7)

TD.id.header = 1

TD.class.content_column = 1

# (8)

DIV.all = 1

}

# (9)

relPathPrefix = fileadmin/html/

}

This configures the plugin to do the following:

(1) Read the file “fileadmin/html/index.html”

(2) Wrap the (all...) <BODY>-tag with the subpart marker <!-- ###DOCUMENT_BODY### -->

(3) Wrap the <HEAD>-tag with the subpart marker <!-- ###DOCUMENT_HEADER### --> and remove any title-tag + content found herein.

(4) If a <SPAN>-tag with the class-attribute's value set to “sitepath”, then wrap the content with the default subpart-marker (which is <!-- ###sitepath### -->)

(5) All <TABLE> tags with either class or id attribute set should be wrapped in markers

(6) If a particular <TABLE>-tag has the class attribute set to “mainTable_class” then wrap it with <!-- ###mainTable_class### -->. The same if a <TABLE>-tag has the id attribute set to “mainTable_id”, but in this case the table-tag will be wrapped both inside and outside (default is inside). Furthermore if a <TABLE>-tag has both the id and class attributes set to these values the id will take precedence.

(7) If a <TD>-cell is found with id attribute set to “header”, then wrap it.
If a <TD>-cell is found with the class attribute set to “content_column”, then wrap it as well.

(8) All <DIV>-tags with either class or id attribute set will be wrapped on the inside.

(9) All relative paths found in the file will be prefixed with “fileadmin/html/”

So lets look at a real world example. This is the “fileadmin/html/index.html” file:

(All green parts are displaying the interesting parts. All writing in red is my comments here, not a part of the output!)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Template title</title>

<style>

BODY {font-size:12px; font-family: verdana;}

.sitepath {color: blue;}

</style>

</head>

<body bgcolor="#eeeeee">

You are here: <span class="sitepath">First level > Second level > Third level</span><br>

<DIV class="allTheTables">

<table>

<tr><td>Nothing in this table.</td></tr>

</table>

<table class="my-class" id="my-id">

<tr><td>This table has the class, "my-class", and the id, "my-id"</td></tr>

</table>

<table class="mainTable_class">

<tr><td>This table has the class, "mainTable_class"</td></tr>

</table>

<table id="mainTable_id">

<tr><td>This table has the id, "mainTable_id"</td></tr>

</table>

<table class="mainTable_class" id="mainTable_id">

<tr><td>This table has the id, "mainTable_id" AND the class "mainTable_class"</td></tr>

</table>

<table>

<tr>

<td class="header">Content here...</td>

<td id="header">Content here...</td>

<td class="another_header">Content here...</td>

<td id="another_header">Content here...</td>

<td>Content here...</td>

</tr>

</table>

<img src="images/apache_pb.gif" width="259" height="32" border="0" alt="">

</DIV>

<table>

<tr>

<td class="menu_column">

Menu item 1<br>

Menu itme 2<br>

Menu item 3<br>

</td>

<td class="content_column">

<H3>This is a header</H3>

<P>In principio creavit Deus caelum et terram terra

autem erat inanis et vacua et tenebrae super faciem

abyssi et spiritus Dei ferebatur super aquas dixitque

Deus fiat lux et facta est lux et vidit Deus lucem

quod esset bona et divisit lucem ac...</P>

</td>

</tr>

</table>

<form action="../../index.php?id=search_result_page">

<input type="text" name="search_word">

<input type="submit" value="Search now!">

</form>

</body>

</html>

Output: And this is the output from the plugin after parsing the file based on the configuration above:

(My comments in red)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

As expected the <HEAD>-tag was wrapped on the inside with ###DOCUMENT_HEADER###. Notice that the <TITLe>-tag has been removed as well. Typo3 sets the title-tag (along with a lot of additional header-information as needed.)

<head><!--###DOCUMENT_HEADER### begin -->

<style>

BODY {font-size:12px; font-family: verdana;}

.sitepath {color: blue;}

</style>

<!--###DOCUMENT_HEADER### end --></HEAD>

The <BODY>-tag has also been wrapped:

<body bgcolor="#eeeeee"><!--###DOCUMENT_BODY### begin -->

<SPAN>-tags with the class-attribute value set to “sitepath” was configured to be wrapped with the default subpartmarker (which is the value itself surrounded by triple-# marks) thus it has happend.

You are here: <span class="sitepath"><!--###sitepath### begin -->First level > Second level > Third level<!--###sitepath### end --></SPAN><br>

Any <DIV> tag having either id or class attribute set should be wrapped as well:

<DIV class="allTheTables"><!--###allTheTables### begin -->

Just for the record: This <TABLE>-tag has NOT been wrapped in anything because it didn't provide neither id nor class attributes. Therefore no action is taken.

<table>

<tr><td>Nothing in this table.</TD></tr>

</TABLE>

But here something happens. Looking at the TypoScript configuration the values for class and id does NOT match any of the explicitly configured values (which are “mainTable_id” and “mainTable_class”). However <TABLE>-tags in general are instructed to be wrapped if one of these values exists (TABLE.all = 1). In this cas both class AND id exists and therefore the id-attribute takes precedence and so the table is wrapped in ###my-id### markers.

Finally notice that the <TABLE>-tags are wrapped on the OUTSIDE. This is because of the TS configuration “TABLE.all.includeWrappingTag = 1”

<!--###my-id### begin --><table class="my-class" id="my-id">

<tr><td>This table has the class, "my-class", and the id, "my-id"</TD></tr>

</TABLE><!--###my-id### end -->

Now the class attribute matches the specifically configured value “mainTable_class” and is wrapped on the INSIDE (default) accordingly

<table class="mainTable_class"><!--###mainTable_class### begin -->

<tr><td>This table has the class, "mainTable_class"</TD></tr>

<!--###mainTable_class### end --></TABLE>

In this case the id attribute matches the configured value “mainTable_id”. Because “mainTable_id” was configured in TS like this: “TABLE.id.mainTable_id.doubleWrap = 1” the <TABLE>-tags are wrapped both on the inside AND the outside. The outside-wrap is prefixed “_PRE”

<!--###mainTable_id_PRE### begin --><table id="mainTable_id"><!--###mainTable_id### begin -->

<tr><td>This table has the id, "mainTable_id"</TD></tr>

<!--###mainTable_id### end --></TABLE><!--###mainTable_id_PRE### end -->

In this case the exact same thing happens as above. The interesting part is that now the class-attribute did also exist, but we see once again that the id-attribute takes precedence in cases with both values existing.

<!--###mainTable_id_PRE### begin --><table class="mainTable_class" id="mainTable_id"><!--###mainTable_id### begin -->

<tr><td>This table has the id, "mainTable_id" AND the class "mainTable_class"</TD></tr>

<!--###mainTable_id### end --></TABLE><!--###mainTable_id_PRE### end -->

<table>

<tr>

Looking at the TS configuration we see that <TD>-tags are wrapped in case the id attribute matches “header” OR the class attribute matches “content_column”. In these cases only the second <TD> tag from the top matches and is wrapped.

<td class="header">Content here...</TD>

<td id="header"><!--###header### begin -->Content here...<!--###header### end --></TD>

<td class="another_header">Content here...</TD>

<td id="another_header">Content here...</TD>

<td>Content here...</TD>

</tr>

</TABLE>

A most interesting feature is that this images was in the original file references as “images/apache_pb.gif”. Now the file - being a relative reference - is prefixed with “fileadmin/html”. Thus viewing the template file directly with a browser or HTML-editor from the path fileadmin/html/index.html will STILL show the correct image as when the file is used as template for the actual Typo3 page which is viewed from the site root.

<IMG src="fileadmin/html/images/apache_pb.gif" width="259" height="32" border="0" alt="">

<!--###allTheTables### end --></DIV>

<table>

<tr>

This is a real world example where we have a table on a page with a cell for a menu and a cell for page content. Probably we intended both columns to be wrapped on the inside with subpart markers, but only the “content_column” has been wrapped. The obvious error is that in the TS configuration of the plugin, we should have added “TD.class.menu_column = 1” in order to get the menu column wrapped as well. Another option - for the lazy - is to configured TD like this “TD.all=1” - so all TD cells with an id or class attribute would be wrapped.

<td class="menu_column">

Menu item 1<br>

Menu itme 2<br>

Menu item 3<br>

</TD>

<td class="content_column"><!--###content_column### begin -->

<H3>This is a header</H3>

<P>In principio creavit Deus caelum et terram terra

autem erat inanis et vacua et tenebrae super faciem

abyssi et spiritus Dei ferebatur super aquas dixitque

Deus fiat lux et facta est lux et vidit Deus lucem

quod esset bona et divisit lucem ac...</P>

<!--###content_column### end --></TD>

</tr>

</TABLE>

Finally the action-attribute of the <FORM>-tags are just like the src-attribute of image tags analysed for relative paths. In this case the template file might simply refer to the CORRECT search page in Typo3 from it's position in fileadmin/html/. Thus in the original file “../../index.php?....” would be the correct, working path to any Typo3 page, but when parsed, this path would be prefixed as usual with “fileadmin/html/” so that it works from the site-root out-of-the box.

<FORM action="fileadmin/html/../../index.php?id=search_result_page">

<input type="text" name="search_word">

<input type="submit" value="Search now!">

</form>

<!--###DOCUMENT_BODY### end --></BODY>

</html>

Using this to build a site:

This TypoScript configuration of a page object will in addition to the plugin configuration listed above make use of some of the subpart markers in the output of the plugin.

(My comments in red, italics)

# Default PAGE object:

page = PAGE

page.typeNum = 0

This retrieves the <BODY>-tag from the template:

# Getting body tag from template

page.bodyTagCObject =< plugin.tx_automaketemplate_pi1

page.bodyTagCObject.getBodyTag=1

Inserting the <HEAD> section (###DOCUMENT_HEAD### subpart) from the template (without <TITLE>-tag...). Thus all header information in the template file is preserved, including any stylesheet.

# Getting header data from template, but excluding title-tag (see object configuration)

page.headerData.10 = TEMPLATE

page.headerData.10.template =< plugin.tx_automaketemplate_pi1

page.headerData.10.workOnSubpart = DOCUMENT_HEADER

Finally the page content is fetched from the template (###DOCUMENT_BODY### subpart)

# Page content:

page.20 = TEMPLATE

page.20.template =< plugin.tx_automaketemplate_pi1

page.20.workOnSubpart = DOCUMENT_BODY

page.20.subparts {

Here the content of the subpart markers <!-- ###sitepath### --> is substituted with a menu showing the “path” to the current page.

Originally it looked like this:
You are here: <span class="sitepath">First level > Second level > Third level</span><br>
After the parsing of this plugin, it would look like this (markers added):
You are here: <span class="sitepath"><!--###sitepath### begin -->First level > Second level > Third level<!--###sitepath### end --></SPAN>
Now it looks like this (for the rootpage) (subpart section substituted with menu):
You are here: <span class="sitepath"><A HREF="index.php?id=1130" onFocus="blurLink(this);">Auto Template </A></SPAN><br>

sitepath = HMENU

sitepath.special = rootline

sitepath.1 = TMENU

sitepath.1.NO.linkWrap = | >&nbsp; |*||*| |

Here the dummy-content of the table cell with class “content_column” is substituted with the true content of the page:

content_column < styles.content.get

}

Auto-parse Template - automaketemplate	Configuration

9

Auto-parse Template

automaketemplate

forEditors forAdmins forBeginners forIntermediates

The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists.
If your manual is NOT in english, see next tab "language"
----
forEditors (use this for editors / german "Redakteure")
forAdmins (use this for Administrators)
forDevelopers (use this for Developers)
forBeginners (manuals covering TYPO3 basics)
forIntermediates (manuals going into more depth)
forAdvanced (covering the most advanced TYPO3 topics)
see more: http://wiki.typo3.org/doc_template#tags
----

Jigal van Hemert

2009-06-16T23:48:17