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
}

Set background image from an image field.

The following XML contains the TemplaVoila data structure for a page/fce (flexible content element).

The example shows how to set the background image for a content element, that is specified in an image field that is declared in same data structure.

<field_content type="array">
        <tx_templavoila type="array">
        <title>FCE Content</title>
        <sample_data type="array">
            <numIndex index="0">FCE Content</numIndex>
        </sample_data>
        <eType>ce</eType>
        <TypoScript><![CDATA[

10 = COA

10.10 = TEXT
10.10.field = field_image
10.10.wrap = <div class="spa_example" style="background:url(/uploads/tx_templavoila/|) right bottom no-repeat;">

10.20= RECORDS
10.20.source.current=1
10.20.tables = tt_content

10.30 = TEXT
10.30.value = </div>
        ]]></TypoScript>

        —-
        —-
        —-
        !!! here comes remaining standard templavoila tags for content element field!!!!
        —-
        —-

</field_content>
<field_image>
        —-
        —-
        —-
        !!! here comes standard templavoila tags for image field!!!!
        —-
        —-

        <TCEforms>
                <config>
                    <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>Icon Image</label>
        </TCEforms>

          —-
        —-
        —-
        !!! here comes remaining standard templavoila tags for image field!!!!
        —-
        —-

</field_image>

Language menu seperator for sr_languagemenu

The code below is used to get a language menu seperator for sr_languagemenu as shown in the picture below:

capture10-17-2008-4.41.21 PM

CODE:

10  < plugin.tx_srlanguagemenu_pi1
10 {
    links.stdWrap.split {
        token = {$plugin.tx_srlanguagemenu_pi1.token}
        wrap =  |   |*|  <span class="SPC2"> &nbsp;&#124;&nbsp; | </span> |*|    <span class="SPC3"> &nbsp;&#124;&nbsp; | </span>  
    }
}

In the above code &#124; is the HTML Character Code for pipe character ( | )

The SPAN tag, and SPAN Classes are optional and solely meant for code readability!!!

How to set ATagParams for menu items (except for some pages)

This code may be useful when you may wish to have some extra parameter to all anchor tags in menu items, the code even shows how you can avoid these parameters for some selected pages.

This code may be useful when you may wish to have some extra parameter to all anchor tags in menu items, the code even shows how you can avoid these parameters for some selected pages.

The code below creates this link:

<a rel=”moodalbox” href=”pagelink” >page title</a>

For pages with uid 10, 23 the link will be generated as follows:

<a href=”pagelink” >page title</a>

To get this kind of menu write the following typoscript in the Setup section:

lib.atl_lefttop = COA
lib.atl_lefttop.10 = HMENU
# Level 1
lib.atl_lefttop.10 {
stdWrap.ifEmpty.wrap = &nbsp;
1 = TMENU
1 {
wrap = <ul>|</ul>
expAll = 1
NO.wrapItemAndSub = <li>|</li>

NO.ATagParams.cObject = TEXT
NO.ATagParams.cObject {
value = rel=moodalbox
/*
moodalbox should not be applied for the uid specified here
*/
if {
value = 10,23
isInList.field = uid
negate = 1
}
}

ACT < NO
ACT.wrapItemAndSub = <li class=”act”>|</li>

CUR < NO
CUR.wrapItemAndSub = <li class=”cur”>|</li>
}

}

# level 2 3 and 4 use same settings as sown above
2< .1
3< .2
4< .3
}