Translations
Info
All page names need to be in English.
en da  de  fr  it  ja  km  nl  ru  zh

TemplaVoila

From TYPO3Wiki
Jump to: navigation, search

This is a HOT topic.

notice - Draft

Change the {{draft}} marker to {{review}} when you need a reviewer for text and TypoScript. info

This is a document in progress. << Back to Extension manuals page

[edit]


Contents

Error in output when using TS in TV

The DS (Data Structure) is encoded in XML and thus must comply to XML rules. TypoScript (TS) is not XML; therefore, it is possible to create TS that invalidates the XML structure and generates errors in the output.

TemplaVoila

ERROR:
Couldn't find a Data Structure set for table/row "pages:15".
Please select a Data Structure and Template Object first. 

To get around this problem, use this construct in Data Structure XML (DS):

XML / HTML:
 <TypoScript><![CDATA[
 ...original typoscript...
 ]]></TypoScript>

The CDATA section instructs the XML parser to consider the TypoScript as character data (plain text); that means: Inside CDATA sections, you can use unencoded ampersands '&' and the < (less than) and > (greater than) signs. In non-CDATA text sections, they would otherwise conflict with the XML parsing and thus generate syntax errors or other failures.

Sometimes you won't even get error messages. The following example just will be ignored, because the slash in </h3> will confuse the XML parser.

TS TypoScript:
10 = COA
10 {
  10 = TEXT
  10 {
    current = 1
    typolink.parameter.field = field_link_bigheadline
    required = 1
    wrap = <h3>|</h3>
  }
}

It's good practice to always use CDATA around TemplaVoila TypoScript sections:

XML / HTML:
<TypoScript><![CDATA[
10 = COA
10 {
  10 = TEXT
  10 {
    current = 1
    typolink.parameter.field = field_link_bigheadline
    required = 1
    wrap = <h3>|</h3>
  }
}]]>
</TypoScript>

Adding alt and title tags to images and allow image linking and scaling via width - height fields

This can be achieved easily because you can access all fields defined in the DS with TypoScript. If you replace the image definition inside the DS after mapping an image field with the following code, you will be able to add a title text, alt text, an image link and values for image-width and -height and the image tag will be rendered accordingly.

XML / HTML:
            <field_image type="array">
                <tx_templavoila type="array">
                    <title>miniteaser image</title>
                    <sample_data type="array">
                        <numIndex index="0"></numIndex>
                    </sample_data>
                    <eType>image</eType>
                    <TypoScript><![CDATA[
                      10 = IMAGE
                      10.altText.field = field_alttext
                      10.titleText.field = field_titletext
                      10.file.import = uploads/tx_templavoila/
                      10.file.import.current = 1
                      10.file.import.listNum = 0
                      10.file.width.field = field_imagewidth
                      10.file.height.field = field_imageheight
                      10.stdWrap.typolink.parameter.field = field_link]]>
	            </TypoScript>
                </tx_templavoila>
                <TCEforms type="array">
                    <config type="array">
                        <type>group</type>
                        <internal_type>file</internal_type>
                        <allowed>gif,png,jpg,jpeg</allowed>
                        <max_size>1000</max_size>
                        <uploadfolder>uploads/tx_templavoila</uploadfolder>
                        <show_thumbs>1</show_thumbs>
                        <size>1</size>
                        <maxitems>1</maxitems>
                        <minitems>0</minitems>
                    </config>
                    <label>miniteaser image</label>
                </TCEforms>
            </field_image>

            <field_alttext type="array">
                <tx_templavoila type="array">
                    <title>alt</title>
                    <sample_data type="array">
                        <numIndex index="0"></numIndex>
                    </sample_data>
                    <eType>input</eType>
                    <proc type="array">
                        <HSC type="integer">1</HSC>
                    </proc>
                </tx_templavoila>
                <TCEforms type="array">
                    <config type="array">
                        <type>input</type>
                        <size>20</size>
                        <checkbox>0</checkbox>
                        <default>0</default>
                    </config>
                    <label>Alternativ Text</label>
                </TCEforms>
            </field_alttext>
            
            <field_titletext type="array">
                <tx_templavoila type="array">
                    <title>title</title>
                    <sample_data type="array">
                        <numIndex index="0"></numIndex>
                    </sample_data>
                    <eType>input</eType>
                    <proc type="array">
                        <HSC type="integer">1</HSC>
                    </proc>
                </tx_templavoila>
                <TCEforms type="array">
                    <config type="array">
                        <type>input</type>
                        <size>20</size>
                        <checkbox>0</checkbox>
                        <default>0</default>
                    </config>
                    <label>Titel Text</label>
                </TCEforms>
            </field_titletext>

            <field_link type="array">
                <type>attr</type>
                <tx_templavoila type="array">
                    <title>linktext</title>
                    <sample_data type="array">
                        <numIndex index="0"></numIndex>
                    </sample_data>
                    <eType>link</eType>
                    <TypoScript><![CDATA[
                      10 = TEXT
                      10.typolink.typolink.parameter.field = field_link]]>
                    </TypoScript>
                    <proc type="array">
                        <HSC type="integer">1</HSC>
                    </proc>
                </tx_templavoila>
                <TCEforms type="array">
                    <config type="array">
                        <type>input</type>
                        <size>15</size>
                        <max>256</max>
                        <checkbox></checkbox>
                        <eval>trim</eval>
                        <wizards type="array">
                            <_PADDING type="integer">2</_PADDING>
                            <link type="array">
                                <type>popup</type>
                                <title>Link</title>
                                <icon>link_popup.gif</icon>
                                <script>browse_links.php?mode=wizard</script>
                                <JSopenParams>height=300,width=500,status=0,menubar=0,scrollbars=1</JSopenParams>
                            </link>
                        </wizards>
                    </config>
                    <label>image link</label>
                </TCEforms>
            </field_link>
            <field_imageheight type="array">
                <tx_templavoila type="array">
                    <title>height</title>
                    <sample_data type="array">
                        <numIndex index="0"></numIndex>
                    </sample_data>
                    <eType>input</eType>
                    <proc type="array">
                        <HSC type="integer">1</HSC>
                    </proc>
                </tx_templavoila>
                <TCEforms type="array">
                    <config type="array">
                        <type>input</type>
                        <size>4</size>
                        <eval>int</eval>
                        <checkbox>0</checkbox>
                        <range type="array">
                          <upper>400</upper>
                          <lower>0</lower>
                        </range>
                        <default>0</default>
                    </config>
                    <label>height</label>
                </TCEforms>
            </field_imageheight>
            <field_imagewidth type="array">
                <tx_templavoila type="array">
                    <title>width</title>
                    <sample_data type="array">
                        <numIndex index="0"></numIndex>
                    </sample_data>
                    <eType>input</eType>
                    <proc type="array">
                        <HSC type="integer">1</HSC>
                    </proc>
                </tx_templavoila>
                <TCEforms type="array">
                    <config type="array">
                        <type>input</type>
                        <size>4</size>
                        <eval>int</eval>
                        <checkbox>0</checkbox>
                        <range type="array">
                          <upper>300</upper>
                          <lower>0</lower>
                        </range>
                        <default>0</default>
                    </config>
                    <label>width</label>
                </TCEforms>
            </field_imagewidth>

Using Gifbuilder with other TV fields as parameters

The following example shows how to use GIFBUILDER inside a TV image element with two plain input elements and a link element as parameters.

Create the following TV fields and save the TV template:

field_img1_title
  maping type=[not mapped]
  editing type=Plain input field
 field_img1_subtitle
  maping type=[not mapped]
  editing type=Plain input field
 field_img1_link
  maping type=[not mapped]
  editing type=link field
 field_img1_image
   maping type=element
   editing type=image field
   map it to the HTML template

Now, edit the Data Structure. Replace the contents of the field_img1_image <typoscript> tag with the code snippet below.

Things to note:

  • It is only the image element that is mapped in the HTML template. The other elements are used in GIFBUILDER as parameters.
  • Because of scope, the TV fields are not visible inside GIFBUILDER, because stdWrap does not have any knowledge about TV.
  • Remember to enclose the Typoscript sections in <![CDATA[ ... ]]>, or the XML won't be valid. It is the "<" that is the problem.
XML / HTML:
  <TypoScript><![CDATA[
  # get the value of a TV field:
  temp.imgtitle=TEXT
  temp.imgtitle.field=field_img1_title
  
  #get the value of a TV field:
  temp.imgsubtitle=TEXT
  temp.imgsubtitle.field=field_img1_subtitle
  
  20 = IMAGE
  # make the link clickable
  20.stdWrap.typolink.parameter.field = field_img1_link
  
  20.file = GIFBUILDER
  20.file {
    XY = 184,121
  
    10 = IMAGE
    10.file.import= uploads/tx_templavoila/
    10.file.import.current = 1
    10.file.import.listNum=0
    10.file.width= 184
    10.offset=10,10
  
    20 = TEXT
    #transfer the values of the TV field
    20.text < temp.imgtitle
    20.offset = 10,100
    20.niceText = 1
    20.align=left
    20.fontSize= 14
    20.fontFile = t3lib/fonts/verdana.ttf
    20.fontColor = black
  
    30 = TEXT
    #transfer the values of the TV field
    30.text < temp.imgsubtitle
    30.offset = 10,115
    30.niceText = 1
    30.align=left
    30.fontSize= 10
    30.fontFile = t3lib/fonts/verdana.ttf
    30.fontColor = black
  }
  ]]>
  </TypoScript>

Here is the resulting image:

Gifbuilderdemo.png

Frontend admin panel with TemplaVoila

To enable the Admin Panel in TemplaVoila webs (ed: What does "webs" mean?), use the following TS in your admins TSconfig:

TS TypoScript:
admPanel {
   hide = 0
   options.overridePageModule = web_txtemplavoilaM1
}

Information from the mailing list archives

Retrieving content from a field_* of a certain page in TypoScript

In case you need to get content from a certain TV field from a different page (the CEs that are referenced) you can use this TypoScript:

TS TypoScript:
renderPage < styles.content.get
renderPage = USER
renderPage {
     userFunc = tx_templavoila_pi1->tvSectionIndex
     indexField = field_myfieldname
     select.pidInList = 123
}

added by benni. on 2012-05-15. Thanks to Oliver Hader for finding this isue.

Using the (lastupdate|randomimage|...) extension with TemplaVoila

To do this, insert fields with editing type Typoscript Object Path. This will give you a reference to lib.whatever in the resulting DS.

Now you can prepare the extension output just as if you were doing a traditional TS template, and the assign that to the lib.whatever object. Here is an example from a thread about the Random Image extension:

TS TypoScript:
 # Constants
 random_path = fileadmin/path/to/images/
 
 # Setup
 temp.randomImg = USER_INT
 temp.randomImg {
  userFunc = tx_ccrandomimage_pi1->main
  path = {$random_path}
  fileExt = jpg,jpeg,gif,png
  renderObj = COA
  renderObj {
  10 = IMAGE
  10.file = ###FILE_1###
  }
 }
 lib.topphoto < temp.randomImg

See https://typo3.org/documentation/mailing-lists/english-main-list-archive/thread/64630/ for the thread.

This might help to overcome the problem of custom TS getting deleted by editing a DS: If all you need in the DS is lib.whatever, because the actual custom TS is elsewhere...

What is yet unclear, is whether this works the other way around as well: Accessing TS from the template record's setup field from inside your DS... Some info might be hidden here: Explanation about TypoScript in https://typo3.org/documentation/document-library/templavoila/Introduction-5db5ec2252/

TemplaVoila GIFBUILDER fontcolor from selectorbox?

I want to have the fontcolor of a gifbuilder object rendering one field come from another unmapped selector box field. What is the typoscript to do this?

I have tried:

TS TypoScript:
 10.fontColor = field_colorChoice
 10.fontColor.field = field_colorChoice
 10.fontColor.data = field:field_labelcolor

and various attempts to set the value with LOAD_REGISTER and read it as a constant, but I haven't succeeded.

I know the templavoila field is working properly, because I can render it with a TEXT object


Christian Jul Jensen answered on this:

10.fontColor.field = field_colorChoice

It looks like you can access the values of TV-fields in normal TS templates now, so the following lines about the scope don't apply anymore (correct me if I'm wrong).

This should work _if_ within the the TVDS.

The scope of the TV fields are kind of tricky, the fields are not available from within your normal TStemplate, actually they are only available from the same level (ie. you can not access fields within a section from a field outside of the section) within the TVDS.

I consider this a designproblem in the TVext. I planned to do some brainstorming on how it could be done better, after making a bigger project with TV where I found it annoying, but forgot about it again. I'll see if I can get that done, and let Kasper and Robert know about it.


It's definitely not working, though 10.text.field = field_colorChoice is working, so it seems the field is in scope. It is on the same level...and the typoscript is all inside the TVDS. My goal with this website is actually to do the whole thing with templaVoila & no programming, but by now the html guy is ready to kill me :)

I noticed that in TSref it does not say that fontColor is a standard wrap, but in the source code it seems to be run through standard wrap.


Again Christian: I think you need to do something like this (UNTESTED!)

TS TypoScript:
 10 = TEXT
 10.field = field_fontColor
 
 20 = IMAGE
 ...
 20.10 = TEXT
 20.10.fontcolor < 10

I think I used a trick like this and made it work, but I can't find it right now.


But this didn't work as well (see https://typo3.org/documentation/mailing-lists/english-main-list-archive/thread/63593/ for the thread).

Error when editing page header I

I see this error when I edit my page header (in the Content field).

Data Structure ERROR: No source value in fieldname "tx_templavoila_ds"

What would be the course and how can I resolve it?

This also happens if a page is created first and then TemplaVoila is installed.


It seems there is some dev/debug code in TemplaVoila that omits this fake error. It goes away when you assign the sysFolder containing the TO/DS records to the field "General Record Storage page" in the root page Page header.

Error when editing page header II

This problem also occurred in my new Typo3 installation:

  • New Typo3 v3.7.0 installation
  • Imported and installed TemplaVoila v0.3.0
  • Attempt to create a new page

In this case it was a little bit more serious, since you also got an PHP error and could not create a new page at all. There was an additional error message:

Errors:
2: SQL error: 'Unknown column 'tx_templavoila_ds' in 'field list
(pages:NEW40d1e44005282)

The problem was that I had forgotten to give ALTER privileges to my database user! So, if you get error messages like "supplied argument is not a valid MySQL result resource" check out your database:

  1. Go to the Install tool (the Install module)
  2. Choose "2: Database Analyser"
  3. Click on the "COMPARE" link after "Update required tables"
  4. If you see that some SQL commands with checkboxes by them go ahead and run them.
  5. If the same SQL commands keep appearing, check the permissions of your database user (e.g. in phpmyadmin outside of Typo3, database mysql, table db or user, field alter_priv - should be set to Y).

More information about this problem can be found in the mailing lists:

Reusing content elements automatically

This is not strictly TV, but as TV offers a function to reference objects I include this here. The mentioned function is not really suited for placing elements from one page on all pages.


I dropped a few posts last weeks in search for a solution for repeating content elements like footer text in TemplaVoila. I also noticed that I was not the only one questioning for that, and that there were no direct answers. Well, this is a solution. It works, but has a thing to be carefull about: like all modifications you make to a DS (DataStructure), the lines are replaced by the defaults when you save the DS later on.


I do this instead:

TS TypoScript:
 5 = CONTENT
 5 {
  table = tt_content
  select.orderBy = sorting
  select.pidInList=40
 }
 10= RECORDS
 10.source.current=1
 10.tables = tt_content
 15 = CONTENT
 15 {
  table = tt_content
  select.orderBy = sorting
  select.pidInList=41
 }

This way I'm still able to insert content elements on pr page basis. And then this i 'wrapped' in two pages with repeated content elements.

Adding custom code to page header

I've been working on a site that uses some IE conditional comments () for CSS stylesheet inclusion. When mapping the header fields from the template in TemplaVoila, I cannot select these to be put in the generated header. Is there a way to do this with TV or other templating methods without resorting to other advanced (custom PHP perhaps) methods?


You can still use the Typoscript headerData:

TS TypoScript:
 page.headerData.10 = TEXT
 page.headerData.10.value = &lt;!--[if...] [endif]--&gt;

If you use the above page.headerData the resulting conditional CSS links are always included before any CSS stylesheets that are mapped as header elements in TV. This can be disastrous for your CSS layout. (IMPORTANT NOTE: This has been changed since TV v1.3.7! Since that version TV includes its headers as the FIRST members of page.headerData, which makes the following solution obsolete in most cases!)

So you will probably want to include all of your CSS files using page.headerData. This again may lead to the problem that you need to switch CSS files depending on differing TemplateObjects – which is easy in TV, but not that simple using TS...

Here's how to do it:

  • Save the following PHP function to /fileadmin/scripts/ts_user_functions.php
PHP script:
 <?php
 /*
   user_getActiveTO()
 
   Return the UID of the Template Object that is active for the current page.
   This TO can either be a record of the current page itself or inherited from 
   a parent page (db table 'page', fields 'tx_templavoila_to' and 'tx_templavoila_next_to').
 */
 function user_getActiveTO($content, $conf) {
   $to_uid = 0;
   $page_uid = (int)$GLOBALS['TSFE']->id;
   $page_is_cur = true;
   
   while ($page_uid && !$to_uid) {
     $query = $GLOBALS['TYPO3_DB']->SELECTquery(
             'pid, tx_templavoila_to, tx_templavoila_next_to',
             'pages',
             'uid=' . $page_uid,
             '',
             '');
     $res = $GLOBALS['TYPO3_DB']->sql(TYPO3_db,$query);
     $row = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($res);
     $to_uid = (int)($page_is_cur ?  $row['tx_templavoila_to'] : 
                                       ($row['tx_templavoila_next_to'] ?  $row['tx_templavoila_next_to'] : $row['tx_templavoila_to']));
     $page_uid = (int)$row['pid'];
     $page_is_cur = false;
   }
   return $to_uid;
 }
  • Then add this to your TSsetup (adapt/add css stylesheet names and TO UIDs):
TS TypoScript:
 includeLibs.myUserFunctions = fileadmin/scripts/ts_user_functions.php
 
 lib.headerCSS_TO_2col = TEXT
 lib.headerCSS_TO_2col.value (
   &lt;link href="/fileadmin/templates/css/central_2col.css" rel="stylesheet" type="text/css" >
 )
 lib.headerCSS_TO_3col = TEXT
 lib.headerCSS_TO_3col.value (
   &lt;link href="/fileadmin/templates/css/central_3col.css" rel="stylesheet" type="text/css" >
 )
 
 page.headerData.10 = CASE
 page.headerData.10 {
   key.postUserFunc = user_getActiveTO
   # ATTENTION!:  TEMPLATE OBJECT UIDs (1,2,...) IN THIS CASE ARRAY MUST MATCH EXISTING TOs (see List module -> Storage Folder to get the TO UIDs)
   1 < lib.headerCSS_TO_2col
   2 < lib.headerCSS_TO_3col
   default < lib.headerCSS_TO_2col
 }
 
 page.headerData.20 = TEXT
 page.headerData.20.value = &lt;!--[if...] [endif]--&gt;
  • Enjoy! :) --Jyps 11:30, 7 August 2008 (CEST)

Hardcoded links getting relative path prefix

I have started to use templavoila and encountered this problem. In static part of html template I have a few hardcoded links (index.php?id=11) which all get prefixed with /fileadmin/template/main.

Solution :

In order to have hardcoded links in your page templates, you must follow those 2 rules :

1 / the path to the file should be absolute, thus defined from the website root and not be relative to the page template location.

2 / a leading '/' must appear at the begining of the path.

If those 2 rules are fullfilled, Typo3 will not modify your link.

A typical hardcoded link would look like :

<img src="/fileadmin/templates/site1/img/logo.gif" />



Click-to-enlarge in Flexible Content Element

A lengthy discussion with a good end is at https://typo3.org/documentation/mailing-lists/english-main-list-archive/thread/48451/


Here is how I obtain enlarge image in Flexible contents, There is some code you have to add in typoscript for the image:


XML / HTML:
                              <field_image type="array">
                                <tx_templavoila type="array">
                                    <title>Image to enlarge</title>
                                    <sample_data type="array">
                                        <numIndex index="0"></numIndex>
                                    </sample_data>
                                    <eType>image</eType>
                                    <TypoScript><![CDATA[
	10 = IMAGE
	10.file.import = uploads/tx_templavoila/
	10.file.import.current = 1
	10.file.import.listNum = 0
	10.file.maxW = 85

###################################
### BEGIN code to enlarge image ###
###################################
10.imageLinkWrap = 1
10.imageLinkWrap {
  bodyTag = <body style="background-color:#fff;">
  wrap = <a__NOSPAM href="javascript:close();"> | </a>
  width = 800m
  height = 600m
  effects=
  JSwindow = 1
  JSwindow {
    newWindow = 0
    expand = 17,20
    }

  enable = 1
  typolink.parameter.field=image_link
  typolink.extTarget = _blank
}
#################################
### END code to enlarge image ###
#################################

                         ]]></TypoScript>
                                </tx_templavoila>
                                <TCEforms type="array">
                                    <config type="array">
                                        <type>group</type>
                                        <internal_type>file</internal_type>
                                        <allowed>gif,png,jpg,jpeg</allowed>
                                        <max_size>1000</max_size>
                                        <uploadfolder>uploads/tx_templavoila</uploadfolder>
                                        <show_thumbs>1</show_thumbs>
                                        <size>1</size>
                                        <maxitems>1</maxitems>
                                        <minitems>0</minitems>
                                    </config>
                                    <label>Image to enlarge</label>
                                </TCEforms>
                            </field_image>

Enabling RTE in FCEs

This is documented here: https://typo3.org/documentation/document-library/doc_core_api/columns_fieldnam-10/

Basically you just have to map a field of the type "Text area for bodytext" and save the TO/DS. Then switch to the list module and edit the created DS.

Find the lines:

XML / HTML:
<HSC type="integer">1</HSC>

and

XML / HTML:
<label>My Textfield</label>

and change them to:

XML / HTML:
<HSC type="integer">0</HSC>

and

XML / HTML:
<label>Miniteaser Text</label>
<defaultExtras>richtext[*]:rte_transform[mode=css]</defaultExtras>

This will enable all possible buttons in the RTE. Of course you could also enable only certain buttons :

XML / HTML:
<defaultExtras>richtext[cut|copy|paste|formatblock|bold|italic|underline|left|center|right|orderedlist|unorderedlist|outdent|indent|link|image|line|chMode]:rte_transform[mode=css]</defaultExtras>


Enabling RTE in FCEs (additional comment)

This one works for me. But you need this additional line in you TS template:

TS TypoScript:
  lib.tt_content < tt_content
XML / HTML:
  <field_text type="array">
    <tx_templavoila type="array">
      <title>Tekst</title>
      <description>Map to the text</description>
      <sample_data type="array">
        <numIndex index="0">Det her er den tekst der skal stå og som A11 selv skal skrive.</numIndex>
      </sample_data>
      <eType>input</eType>
      <proc type="array">
       <HSC type="integer">0</HSC>
      </proc>
      <TypoScript>
      <![CDATA[
      20 < lib.tt_content.text.20
      20  {
        field >
        current = 1
      }
      ]]>
      </TypoScript>
    </tx_templavoila>
    <TCEforms type="array">
      <config type="array">
        <type>text</type>
        <cols>48</cols>
        <rows>5</rows>
      </config>
      <label>Tekst</label>
      <defaultExtras>richtext[*]:rte_transform[mode=ts_css]</defaultExtras>
    </TCEforms>
  </field_text>

Enabling RTE in FCEs (further additional comment)

Ralf Rings suggested an alternate solution in this mailing list thread that requires no extra TS in the main TS template of the site. Modify your data structure as follows (take special note of the <typoscript> and <defaultExtras> elements):

XML / HTML:
<field_body type="array">
  <tx_templavoila type="array">
    <title>Body</title>
    <eType>text</eType>
    <TypoScript>
      <![CDATA[
        10 = TEXT
        10.current = 1
        10.parseFunc = < lib.parseFunc_RTE
      ]]>
    </TypoScript>
    <proc type="array">
      <HSC type="integer">0</HSC>
    </proc>
  </tx_templavoila>

  <TCEforms type="array">
    <config type="array">
      <type>text</type>
      <cols>48</cols>
      <rows>5</rows>
    </config>
    <label>Body</label>
    <defaultExtras>richtext[*]:rte_transform[flag=rte_enabled|mode=ts_css]</defaultExtras>
  </TCEforms>
</field_body>

Creating a print-version with TV

https://typo3.org/documentation/mailing-lists/english-main-list-archive/thread/110096139/ Matthew : This link is broken, any idea what it was called so I can update it?

Maybe this one: http://www.l-base.de/TYPO3-forum.97+M55ecc1109b2.0.html

Plaintext newsletter with DirectMailer and TV

First you should already know how to create a HTML newsletter using TV. This is almost self-explanatory if you know how to set up a traditional Newsletter using MTB. You just have to replace the page.xx TS for MTB with the call to the TV main method.

But to get plaintext newsletters work with TV is a little bit tricky. But here is a guide how you get this done. Mainly what we do is to use the print-version of a TV page as plaintext page created by using the static template lib.alt_plaintext. But see youreself:

First edit your TS-template for the newsletter. You will most probably have something there like:

TS TypoScript:
 page = PAGE
 page.typeNum = 0
 page.10 = USER
 page.10.userFunc = tx_templavoila_pi1->main_page

First include the "plugin.alt.plaintext (99)" Static template into your TS template. You do this in the field "Include static:"

Then add the following TS code above the "page = PAGE" line

TS TypoScript:
 [globalVar = GP:print > 0]
   tt_content < lib.alt_plaintext.renderObj
 [end]

This will instruct T3 to use the plaintext rendering object when the print version is requested. Now also add the followin TS code below the page.10.userFunc line (below the last "page." line)

TS TypoScript:
  [globalVar = GP:print > 0]
    config.disableAllHeaderCode = 1
  [end]

This instructs T3 to disable the generation of the HTML <head> and <body> section. Now all you have to do is to make a print version of a HTML file. But this HTML file is somewhat special as it just contains the really required tags and the rest is just plaintext. Such a HTML template will look like the follwing:

XML / HTML:
 <html>
 <head>
   <title>Test</title>
 </head>
 <body>
 &lt;div id="content"&gt;CONTENT</div>
 
 ----------------------------------------------------------
 Should you want to unsubscribe or change your subscription
 use the following link:
 http://www.mysite.com/index.php?id=UID_OF_NEWSLETTER_PAGE&cmd=edit&aC=###SYS_AUTHCODE###&rU=###USER_uid###
 </body>
 </html>

Replace the "www.mysite.com" URL with the URL of your site, probably add the correct path to the T3 installation and change the "UID_OF_NEWSLETTER_PAGE" to the correct value of the page where the newsletter plugin is located. Then save this file with an .html ending to the fileadmin and map it with TV. .html is required for TV for recognizing it as mappable file.

Create a single field "field_content" and assign it to contain Content Elements. Then map the root-element to the <body> tag. But always map it INNER so you don't get the body tag in the resulting plaintext newsletter. Then map the "field_content" field to the "<div id="content">CONTENT</div>" but this time outer so we this time replace the whole <div> tag. Again this will result in not having any HTML in the output.

IF you did everything correctly you will be able to view this page and add a &print=1 variable to the URL and you will get a plaintext only version of page. As the content-type is still text/html there are no line breaks but this doesn't hurt because the content-type is set explicitly in the plaintext mails.

Now the last thing you will have to do is to go to the Direct-Mailer configuration and instruct the mailer to fetch the plaintext version of the page not by appending "&type=99" but by "&print=1" to the URL.

Now you should at least be able to fetch a newsletter page and send it to yourself and you will receive it in plaintext and HTML when you have modules_sys_dmail_html enabled (HTML version of newsletter enabled). But notice that some mailclients make it hard to view the plaintext message included if there is a HTML part. And if you have the HTML mode of your tt_address entry disabled then you will receive a text-only version of the mail.

One thing you will notice is that the links in the plaintext messages don't work. They get redirected to some strange example.com URL. You can fix this by adding the following TS to your TS template:

TS TypoScript:
 plugin.alt.plaintext {
   siteUrl = http://www.mysite.com/PATH/TO/TYPO3/
 }

but I have to say that I don't know wheter to put it in Constants or Setup so I always put it in both :)

It also seems as there are some problems with line endings getting eaten up by some mail clients when the message is sent in BASE64. But possibly that has to do with encoding conversions on the tested mailservers.

If you don't want those <!--TYPO3SEARCH_begin--> in your plaintext newsletter (which you probably really don't want...) you have to edit your Templavoila XML-Data structure of your newsletter template (the HTML-version!). For every ContentElement-type section you find something like this:

TS TypoScript:
 10= RECORDS
 10.source.current=1
 10.tables = tt_content
 10.wrap = &lt;!--TYPO3SEARCH_begin--&gt; | &lt;!--TYPO3SEARCH_end--&gt;

change the last line to look like this:

TS TypoScript:
 10.wrap =

TemplaVoila! FCEs can`t be rendered in plain-text version

Please note that FCEs can`t be rendered with a plain text newsletter set up like described above. Matthew -- seems to be resolved in newer versions.

Until this is solved, you can download the extension svo_tvplaintext and create your plain-text version like this:

TS TypoScript:
[globalVar = GP:print > 0]
page >
page = PAGE
page {
  typeNum = 0  
  config {
    disableAllHeaderCode = 1
  }
  20 = COA
  20 {
    10 = USER
    10.userFunc = tx_templavoila_pi1->main_page
    stdWrap.postUserFunc = tx_svotvplaintext_pi1->user_cleanup
  }
}
[end]


Attention: The extension svo_tvplaintext prepends a hard-coded hostname to all URLs to internal pages, found in class.tx_svotvplaintext_pi1.php on line 58:

$h2t->set_base_url('http://www......');

Make sure to replace this with the domain name associated with your project.


2 level FCEs

It is possible to make a multi-level (only two levels shown in this example) <ul><li> list using Flexible Content Elements (FCE's) which are made available with TV. To start of you need an HTML template file in your fileadmin directory. It should contain a section like this:

<ul>
  <li>Item 1</li>
  <li>
    <span>Item 2</span>
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li></li>
  <li>Item 3</li>
</ul>

When TV is set up correctly (it is when you have a page using TV up and running) you can continue by going to the "File > Filelist" module and clicking on the icon of the file containing the above HTML code and invoke the TV mapper.

You then create a structure like the following:

Showing the DS Structure of a 2-level FCE (could be also nested divs)

You map it like following to the HTML Template:

HTML templated mapped as 2 level FCE

You can see if the different elements are mapped INNER or OUTTER in the upper image. Please keep that exactly and only change it if you know what you are doing !!!

Note the span element around the text in the <li> containing the second <ul> level. It is necessary because you can't map an text block (exactly after HTML DTD: #CDATA block) (only OUTTER would be a valid choice as with an image). So this "invisible" span is required (check that no styles are applied to that <span>)

Afterwards you will get an Flexible Content Element like the following:

Editing the resulting FCE in the BE

Please note that the second level isn't really distingushable from the first level. I will add this as feature request to the bugtracker. But this is not related directly to TV as Flexforms are a feature of TYPO3.


Up/down buttons do not work

The up/down buttons in Web->List mode has no effect in TemplaVoila as they use the "sorting" field, which is not supported under TV. Instead you change the order of the Content-Elements(CE) when you use List-View by clicking the "Edit-Page Header" (Pencil) icon on the very top of the list page. At the bottom of the Page-Header you find the Flexform containing all directly editable properties and also the Content-Areas implemented as select boxes. There you can change the order using the up and down buttons. You can use the "directory-with-arrow" icon to add a new CE as you do when selecting elements for an "insert-records" CE. You can also use the black "+" icon to add more than one CE.

Update (27.11.05): Up/down buttons work in TemplaVoila 1.0

How to get template changes to show

I made a few changes to my template in fileadmin/templates/template.htm and I cannot get the new changes to reflect when I view source of a page again. I tried clearing front-end cache, the cache in typo3conf/ (the 2 places on the admin panel) and I tried uploading the file more than once. What do I do to get the template changes to show?

You have to save your DS/TO again because an already parsed version of the HTML template get's stored in the TO record so it is easier and faster to generate the required pages.

  1. Go to Web>List module.
  2. Go to the sysfolder which contains your DS/TO (which you configured as General Storage Page - GRSP).
  3. Click on the icon of the TO (and only the TO - you shall not click the icon of the DS ... and not those of a possible OT ... or an SD  :) citing Monty Python) Choose "TemplaVoila" from the Context Menu.
  4. Make sure the checkbox "select HTML Header parts" is not checked and that your current mapping get's shown without any errors (that can have happened if you changed major parts of you HTML template). If there are mis-mapped elements you can correct them in this view. You can-not add new fields.
  5. Click the "Save" button at the bottom of the page.
  6. Now check "Select HTML header parts" and verify that checkmarks near header parts are not lost.
  7. Click "Save" if you modify any checkmarks
  8. Click "Clear FE cache"

If you skip step 5, your mapping can be lost completely. Never skip it even if you did not make any changes to the mapping!

TemplaVoila localization

How to change icon for default language

Put this in the Page TS config of root page:

TS TypoScript:
 mod.SHARED {
  defaultLanguageLabel = Deutsch
  defaultLanguageFlag = de.gif
 }

TemplaVoila working with multiple languages

  • Install the extensions:
    • static_info_tables
    • static_info_tables_uksorting
    • sr_static_info (This extension is now merged into the base extension Static Info Tables 2.0.0 (extension key: static_info_tables))
    • ts_language_XX
  • Create the alternative languages needed (do not create the default language here):
    • ROOT -> new -> Languages
  • Create an "Alternative Page Language" for all the pages you want to translate, this is where you will translate the titles of your pages:
    • Contextual menu -> New -> Alternative Page Language
    • or
    • Page -> Language -> Make new translation of this

2 ways to translate.

By having a different content element for each language (using the Localization tab on the green TV Page)

  • THIS is DEPRECATED with TYPO3 3.8.0 !!!

All works OK without this on 3.8.0 with TV 0.4.0


  • Edit your TV xml file for your TEMPLATE, replace:
XML / HTML:
<T3DataStructure>
    <ROOT type="array">

by:

XML / HTML:
<T3DataStructure>
<meta type="array">
<langChildren type="integer">1</langChildren>
<langDisable type="integer">0</langDisable>
</meta>
    <ROOT type="array">
  • Then edit your page header, a selectorbox should appear after the "Content:" line, with CTRL key click on all your languages. You should now see a choice in the Localization tab of the TV page.
  • You can automatically create a copy of all your content for translation in the classical page module/section language -> Copy default content elements [x]

By having the different languages in the same content element (works only with flexible content)

  • Edit your TV xml file for your FLEXIBLE CONTENTS elements, replace:
XML / HTML:
<T3DataStructure>
    <ROOT type="array">

by:

XML / HTML:
<T3DataStructure>
<meta type="array">
<langChildren type="integer">1</langChildren>
<langDisable type="integer">0</langDisable>
</meta>
    <ROOT type="array">
  • Then edit your content element, a selectorbox should appear after the "Content:" line, with CTRL key click on all your languages. Save and you should now be able to write the translation in the same content for all your languages.
  • If you are having trouble viewing the content elements you add when you switch between different languages, try changing the above to
XML / HTML:
<langChildren type="integer">0</langChildren>
  • If you want to keep the same language through the navigation of your website, you need to add this to your template TS setup (replace fr,en and fr_FR,english by the languages you need):
TS TypoScript:
# define the default language
config.sys_language_uid = 0
config.language = fr
config.locale_all = fr_FR
#config.htmlTag_langKey = fr

# Set up the language variable "L" to be passed along with links
config.linkVars = L(0-2)

# French language, sys_language.uid = 0
[globalVar = GP:L = 0]
config.sys_language_uid = 0
config.language = fr
config.locale_all = fr_FR
#config.htmlTag_langKey = fr
[global]

# English language, sys_language.uid = 1
[globalVar = GP:L = 1]
config.sys_language_uid = 1
config.language = en
config.locale_all = english
#config.htmlTag_langKey = en
[global]

# Third language, sys_language.uid = 2
[globalVar = GP:L = 2]
config.sys_language_uid = 2
config.language = xx
config.locale_all = xx_XX
#config.htmlTag_langKey = xx
[global]

This code will add the parameter &L= to all your TS link in your website.


Clear all cache, take a dictionary, brew a few liters of coffee and translate. ;-)


Using the same content elements in any language, if not defined

  • If you would like to use e.g. Images of your Template in any language if the user does not define new ones in the other language, replace this in your TV xml file for your TEMPLATE:
XML / HTML:
<ROOT type="array">
   <tx_templavoila type="array">
         <title>ROOT</title>
         <description>Select ...</description>
   </tx_templavoila>

by:

XML / HTML:
<ROOT type="array">
    <tx_templavoila type="array">
         <title>ROOT</title>
         <description>Select ...</description>
         <langOverlayMode>ifBlank</langOverlayMode>
     </tx_templavoila>
</nowiki></pre>

For more options see: https://typo3.org/documentation/document-library/templavoila/Introduction-5db5ec2252/

Links to other resources

  1. Futuristic Template Building: https://typo3.org/documentation/document-library/doc_tut_ftb1/
  2. Video-driven Tutorials for beginners (german) : http://www.fi-ausbilden.de/blog/2007/07/11/typo3-dynamisierung-mit-templavoila-teil-1/
  3. German Tutorial: http://www.alnovi.de/nc/developer/wiki/typo3/templavoila/
  4. Creating of FCE's (german): http://www.alnovi.de/nc/developer/wiki/typo3/templavoila/keyword/Flexible%20Content%20Element/
  5. TV and typoscript (german): http://www.alnovi.de/nc/developer/wiki/typo3/templavoila/keyword/TemplaVoila%20TS/