Category: typoscript

Changing Menu based on selected Templavoila TemplateObject using TypoScript

TypoScript has so much features that it is indeed impossible to document each and every feature hidden with it. As we start adding extensions the feature list would increase as well.

Consider you have selected a specific Templavoila Template and you wish to have a different type of menu based on the selected template.
In such case it would be easy to change menu styles if the entire menu is enclosed in a separate CSS class.

I have given an example where I am checking for template IDs 10 , 11. If this template is used for current page I am changing it’s class.

lib.mymenu = HMENU
lib.mymenu {
entryLevel = 1
stdWrap.ifEmpty.wrap =  

1 = TMENU
1 {
wrap = <ul>|</ul>
NO.wrapItemAndSub = |</li>
NO.allWrap = <li>|
NO.allWrap {
override = <li class=”alternate_menu”>|
override.if.value = 10,11
override.if.isInList.field = tx_templavoila_to
}
# same way we can configure ACT and CUR as well
ACT = 1
CUR = 1

}

# For second level I would like to change the class of the A Tag
2 < .1
2.wrap = <ul>|</ul>
2.CUR.ATagParams = id=”cur_menu”
2.ACT.ATagParams.cObject = TEXT
2.ACT.ATagParams.cObject {
override = class=”cur_menu_a”
override.if.value = 10,11
override.if.isInList.field = tx_templavoila_to
}
3 < .2

#let us generate the 3rd level only if the page uses the Template of our choice.
3.if {
value = 10,11
isInList.field = tx_templavoila_to
}

}

Not all templates may have a template ID specified, in such case we need to use the sliding feature.
When we use the sliding feature the template id of parent ID is used.
We can do this Like:

isInList.data = levelfield:-1, tx_templavoila_to, slide

Note:
Usually Templates are stored in the Storage Folder, and you can view the Template IDs of Templavoila Template Objects from the list view!

date2cal for mailformplus

In order to set date2cal for mailformplus we need to follow 3 important steps:

1. Include the necessary js and css files

page.headerData.80 = TEXT
page.headerData.80.value (
<script type="text/javascript" src="typo3conf/ext/date2cal/js/jscalendar/calendar.js"></script>
<script type="text/javascript" src="typo3conf/ext/date2cal/js/jscalendar/lang/calendar-en.js"></script>
<script type="text/javascript" src="typo3conf/ext/date2cal/js/jscalendar/calendar-setup.js"></script>
<script type="text/javascript" src="typo3conf/ext/date2cal/js/date2cal.js"></script>
<script type="text/javascript" src="typo3conf/ext/date2cal/js/naturalLanguageParser.js"></script>
<link rel="stylesheet" type="text/css" href="typo3conf/ext/date2cal/js/jscalendar/skins/aqua/theme.css" />

)
# add translations
# French – DEFAULT
page.headerData.90 = TEXT
page.headerData.90.value = <script type="text/javascript" src="typo3conf/ext/date2cal/js/jscalendar/lang/calendar-fr.js"></script>

2. Create the target input box and the calendar trigger button

<input type="text" name="datebox" id="datebox" value="###value_datebox###" tabindex="13" maxlength="16" size="9"/>
<img id="datebox_trigger" alt="Calendar" title="Calendar" style="cursor: pointer; vertical-align: middle;" src="typo3conf/ext/date2cal/res/calendar.png"/>

3. Write the calendar instantiation code using JavaScript
(The id of “inputField” and “button” should match the textbox and trigger button)
NOTE: this code must be executed after the above input boxes are loaded!

<script type="text/javascript">
    Calendar.setup({
        inputField     :    "datebox",      // id of the input field
        ifFormat        :    "%d/%m/%Y",       // format of the input field                   
        align          :    "Bl",           // alignment (defaults to "Bl")
        button         :    "datebox_trigger",   // trigger for the calendar (button ID)
        singleClick    :    true,           // single-click mode
    });
</script>

That’s all now you should be able to view the calendar if you click the image!!!

Dynamically change class attribute of body tag using typoscript

This is a small note about how we can change the class attribute of body tag using typoscript.

# bodyTag
page.bodyTag >

page.bodyTagCObject = TEXT
page.bodyTagCObject.data = levelfield:-1 :, myfeildname, slide
page.bodyTagCObject.wrap = <body class="myclass_|">

Well here I am using a custom field added to pages table. If you wish to use the page id you may try using this code below:

# bodyTag
page.bodyTag >

page.bodyTagCObject = TEXT
page.bodyTagCObject.data = field:id
page.bodyTagCObject.wrap = <body class="myclass_|">

This way you may expect body tags like:
<body class="myclass_1">
<body class="myclass_2">

3 Column Typoscript Graphical Menu

The illustraion shows how to generate a 3 Graphical Menu using Typoscript.
The script is written such that the image will be taken from the media field of page property. If an image is not specified then an image will be generated using it’s page title / navigation title.

spaImageMenu = COA

spaImageMenu {
   1 >
   1 = GMENU
   1.NO {
      altImgResource.import = uploads/pics/
      altImgResource.import.field = media
      altImgResource.import.listNum = 0

      XY = 110,57
      backColor = white
      10 = TEXT
      10.text.field = nav_title // title
      10.offset = 20,30
      allWrap = |*|<tr><td>|</td>||<td>|</td>||<td>|</td></tr>|*|

    }

    wrap = <table width="100%" border="0" cellpadding="0" cellspacing="0" class="mymenu_class">|</table>
}

Setting FCE Header from it’s Content Element Header

This article explains about how to set an FCE header from it’s content element header.

Whenever we create content element from Typo3, we have noticed that each content element can have a header, and we can set various styles for this header, such as from layout 1 to layout 6, and it can even be hidden from front-end. When we set this header for an FCE, we notice that the header will not be present within the FCE content, but it will be outside it!!! We can even create a header within FCE and map it, but an editor may have to either enter the header twice, or he may be confused which one to use.

This code below helps you overcome this and we can make use of the header specified for FCE content element, as the header within our FCE.

Now let us call our FCE field as field_header, and let us define this as a Typoscript Object.

<field_header>
    <tx_templavoila type="array">
        <title>FCE Header</title>
        <sample_data type="array">
            <numIndex index="0">[ FCE Header / Title ]</numIndex>
        </sample_data>
        <eType>TypoScriptObject</eType>
        <TypoScriptObjPath>lib.mypaneltitle</TypoScriptObjPath>                   
        <description>Map to FCE Header container</description>
    </tx_templavoila>               
</field_header>

The above field must be mapped like we do in any FCE Template Object. Now Enter the Typoscript part of this as follows:

lib.mypaneltitle= TEXT
lib.mypaneltitle{
     data = register:tx_templavoila_pi1.parentRec.header
}