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

Fr:TemplaVoila

From TYPO3Wiki
Jump to: navigation, search

Il s'agit d'un sujet HOT

notice - Draft

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

<< Back to Extension manuals page

[edit]


Contents

Erreur de rendu en utilisant le TypoScript dans TV

La DS (Data Structure) est écrite en XML; elle doit donc respecter les règles de formatage du XML. Le TypoScript (TS) n'est pas en XML; il est ainsi possible de créer du code TS qui invalide la structure XML et génère des erreurs de rendu frontend.

TemplaVoila

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

Pour résoudre ce problème, utiliser cette construction dans le XML de la DS :

<TypoScript><![CDATA[
...TypoScript original...
]]></TypoScript>

La section CDATA demande à l'analyseur XML de considérer le TypoScript comme des données texte (plain text); ce qui signifie qu'à l'intérieur des sections CDATA, vous pouvez utiliser directement les caractères '&' (et commercial), '<' (inférieur à) et '>' (supérieur à). Dans les sections texte qui ne sont pas en CDATA, ils entreraient en conflit avec l'analyseur XML, ce qui génèrerait des erreurs de syntaxe et d'autres problèmes.

Parfois, vous n'aurez même pas de message d'erreur. L'exemple suivant sera tout simplement ignoré :

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

À cause du slash dans </h3>, l'analyseur XML va planter. C'est pour cela que la bonne pratique consiste à toujours utiliser des CDATA autour de vos sections TypoScript dans les DS :

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


Ajouter des attributs alt et title aux images, permettre leur dimensionnement et faire des liens, en utilisant des champs TypoScript

C'est faisable facilement car vous pouvez accéder à tous les champs définis dans la DS en TypoScript. Si vous remplacez la définition de l'image dans la DS après avoir mappé un champ de l'image avec le code qui suit, vous pourrez ajouter un texte pour le titre, un texte alternatif, un lien sur l'image, ainsi que des valeurs pour les dimensions de l'image. La balise image sera générée avec ces valeurs.

TS TypoScript:
            <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>Image (fichier)</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>Texte alternatif</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>Texte du titre (title)</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>Lien</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>Hauteur</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>Largeur</label>
                </TCEforms>
            </field_imagewidth>

Utiliser GIFBUILDER en prenant d'autres champs TV fields comme paramètres

L'exemple suivant montre comment utiliser GIFBUILDER dans un élément TV de type image avec deux autres éléments (un champ texte et un champ lien) en tant que paramètres de configuration.

Créer les champs TV suivants et sauvegarder le gabarit TV :

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

À présent, éditer la Data Structure. Remplacer les contenus de la balise field_img1_image <typoscript> avec le code ci-dessous.

À noter :

  • Seul l'élément image est mappé dans le gabarit HTML. Les autres éléments sont utilisés en tant que paramètres par GIFBUILDER.
  • À cause de leur portée dans le code, les champs TV ne sont pas visibles depuis GIFBUILDER, parce que stdWrap n'a aucune connaissance de TV.
  • Penser à placer les sections en TypoScript dans des <![CDATA[ ... ]]>, sinon le XML ne sera pas valide (le caractère "<" pose problème).
 <TypoScript><![CDATA[
 # Récupère la valeur du champ TV "field_img1_title"
 temp.imgtitle = TEXT
 temp.imgtitle.field = field_img1_title
 
 # Récupère la valeur du champ TV "field_img1_subtitle"
 temp.imgsubtitle = TEXT
 temp.imgsubtitle.field = field_img1_subtitle
 
 20 = IMAGE
 
 # Fait le lien cliquable
 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
   # Transfère la valeur du champ TV "field_img1_title"
   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
   # Transfère la valeur du champ TV "field_img1_subtitle"
   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>

Image obtenue :

Gifbuilderdemo.png

-=-=-=-= LA SUITE EST EN ANGLAIS : À TRADUIRE =-=-=-=-

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

Here are a few things taken from the mailing list archives... k-fish

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

This is not too different, if you consider one simple trick. If you create the DS and TO, you will need to 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:

#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:

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!)

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:

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:

page.headerData.10 = TEXT
page.headerData.10.value = <!--[if...] [endif]-->

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
/*
  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 = intval($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 = intval( $page_is_cur ?  $row['tx_templavoila_to'] : 
                                      ( $row['tx_templavoila_next_to'] ?  $row['tx_templavoila_next_to'] : $row['tx_templavoila_to'] ) 
              );
    $page_uid = intval($row['pid']);
    $page_is_cur = false;
  }
  return $to_uid;
}
?>
  • Then add this to your TSsetup (adapt/add css stylesheet names and TO UIDs):
includeLibs.myUserFunctions = fileadmin/scripts/ts_user_functions.php

lib.headerCSS_TO_2col = TEXT
lib.headerCSS_TO_2col.value (
  <link href="/fileadmin/templates/css/central_2col.css" rel="stylesheet" type="text/css" >
)
lib.headerCSS_TO_3col = TEXT
lib.headerCSS_TO_3col.value (
  <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 = <!--[if...] [endif]-->
  • 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:



                              <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:

<HSC type="integer">1</HSC>

and

<label>My Textfield</label>

and change them to:

<HSC type="integer">0</HSC>

and 

<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 :

<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:

 lib.tt_content < tt_content
 <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):

<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:

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

[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)

 [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:

<html>
<head>
  <title>Test</title>
</head>
<body>
<div id="content">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:

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:

10= RECORDS
10.source.current=1
10.tables = tt_content
10.wrap = <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->

change the last line to look like this:

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:

[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:

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:
<T3DataStructure>
    <ROOT type="array">

by:

<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:
<T3DataStructure>
    <ROOT type="array">

by:

<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
<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):
# defining the default language
config.sys_language_uid = 0
config.language = fr
config.locale_all = fr_FR
#config.htmlTag_langKey = fr

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

# Fench 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:
<ROOT type="array">
   <tx_templavoila type="array">
         <title>ROOT</title>
         <description>Select ...</description>
   </tx_templavoila>

by:

<ROOT type="array">
    <tx_templavoila type="array">
         <title>ROOT</title>
         <description>Select ...</description>
         <langOverlayMode>ifBlank</langOverlayMode>
     </tx_templavoila>

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

Liens vers d'autres ressources

  1. Futuristic Template Building: https://typo3.org/documentation/document-library/doc_tut_ftb1/
  2. Video-driven Tutorials for beginners (en allemand) : 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 (en allemand): http://www.alnovi.de/nc/developer/wiki/typo3/templavoila/keyword/Flexible%20Content%20Element/
  5. TV and typoscript (en allemand): http://www.alnovi.de/nc/developer/wiki/typo3/templavoila/keyword/TemplaVoila%20TS/