Category: Typo3

Conditional menu based on menu page-id

Following code gives a nice way to have a custom content element as sub-menu item for each main menu item

lib.customMenu = HMENU
lib.customMenu {
 1 = TMENU
 1  {
        wrap = |

        NO.allWrap = | 
        NO.stdWrap.htmlSpecialChars = 1
        NO.after.cObject = COA
        NO.after.cObject {           
            20 = CASE
            20 {
               key.field = uid
               default = RECORDS
               default.tables = tt_content
               default.conf.tt_content < tt_content
               default.conf.tt_content.stdWrap.innerWrap >               
               
               14 < .default               
               14.source = {$submenu_element_14}
               
               15 < .default               
               15.source = {$submenu_element_15}
               
               16 < .default               
               16.source = {$submenu_element_16}
               
               17 < .default               
               17.source = {$submenu_element_17}
               
            }            
            
        }
        ACT = 1
        ACT.after.cObject < .NO.after.cObject
        ACT.allWrap = |
        ACT.ATagParams = class="act"
        ACT.stdWrap.htmlSpecialChars = 1

        CUR < .ACT
        CUR.ATagParams = class="cur"
    }
}

This code cannot be used as it is, you will need to make sure the DHTML/JavaScript code for the sub menu items are configured accordingly.

Further References:

  1. [TYPO3-english] conditional menu based on menu page-id
    http://lists.typo3.org/pipermail/typo3-english/2009-November/065557.html
  2. [TYPO3-english] Custom class in tmenu according to uid page
    http://lists.typo3.org/pipermail/typo3-english/2010-February/067336.html

Display the value one object only when the other object value is faslse

Hello!

In some cases we want to display the value of object only when the value of the other object is false or null. For this to work we use the typoscript cobject with the negate option.

The Following code depicts how to display the PREVIOUS and NEXT buttons in the typoscript prev/next menu. When using the prev/next menu code the prev button does not appear on the first page and next button on the last. But for some purpose we need to have these buttons but without the link.

The following code helps to solve this problem.

lib.prevNext = COA
lib.prevNext{
1 = TEXT
1.value = PREVIOUS
1.stdWrap.if.negate =1
1.stdWrap.if.isTrue.cObject = HMENU
1.stdWrap.if.isTrue.cObject {
special = browse
special {
items = prev
items.prevnextToSection = 1
prev.fields.title = PREVIOUS
}

1 = TMENU
1.NO {
linkWrap = <div class=”button”> | </div>
stdWrap.htmlSpecialChars = 1
}
}

2 = HMENU
2{
special = browse
special {
items = prev|next
items.prevnextToSection = 1
prev.fields.title = PREVIOUS
next.fields.title = NEXT
}

1 = TMENU
1.NO {
linkWrap = <div class=”button”> | </div>
stdWrap.htmlSpecialChars = 1
}
}

3 = TEXT
3.value = NEXT
3.stdWrap.if.negate =1
3.stdWrap.if.isTrue.cObject = HMENU
3.stdWrap.if.isTrue.cObject {
special = browse
special {
items = next
items.prevnextToSection = 1
prev.fields.title = PREVIOUS
}

1 = TMENU
1.NO {
linkWrap = <div class=”button”> | </div>
stdWrap.htmlSpecialChars = 1
}
}
}

Display the page when it is completely Loaded

Hello All!

The following code helps you to display the contents of the page after it is completely loaded. It uses the JQuery for this purpose.

Initially wrap the whole page in a <div> tag and hide it using CSS.

The HTML code is as follows….
<html>
<title>…..</title>
<body>
<div id=”my_testid”>
.
.
.
.
.
</div>
</body>
</html>

The Css for the div is as follows
#my_testid{
.
.
.
display:none;
}

Now Using the jQuery change the display property when the page is completely Loaded. For this to work we have “window.onload” option in jQuery
<script type=”text/javascript”>
jQuery(document).ready(function(){
window.onload = function (){ jQuery(‘#my_testid’).show(); };
});
</script>

Display Image when both path and file name are in two fields

The following code gives an overview of how to display an IMAGe when 2 fields are involved.
That is one contains the image path “fileadmin/templates/imgs/” and the other field has the image name “mylogo.png”

10 = IMAGE
10 {
    file.import {
         cObject = COA
         cObject {
             10 = TEXT
              10.data = field:image_path
             20 = TEXT
             20.data = field:image_name
         }
    }
}

Hope this helps.

Translate field in FCE

Generally FCE cannot be translated, like normal tables. How we may use two fields like field_fr, field_en, and then display the related info according to the language.

  
EX:
      
10 = COA     
10 {     
    #Translation for primary language (L=0)
    30 = TEXT
    30.field = field_slide_info
    30.stdWrap.wrap = <p>|</p>
    30.if {
        value = 0
        equals.data = gp:L
    }
    #Translation for second language (L=1)
    40 = TEXT      
    40.field = field_slide_info_en      
    40.stdWrap.wrap = <p>|</p>      
    40.if {      
        value = 1      
        equals.data = gp:L      
    }      
}