Category: Typo3

Typoscript to have custom image menus with different image for each page using optionSplit…

I was just curious on how to get a separate image as menu item for each page. Then I found that we can use the optionSplit funtion to do this.

The example shows how to do this.

# Page Menu – a 3rd level menu

lib.pagemenu = COA
lib.pagemenu.10 = HMENU
lib.pagemenu.10.entryLevel = 3

# Level 3

lib.pagemenu.10 {
    stdWrap.ifEmpty.wrap =  
    1 = TMENU
    1 {
        wrap = <div class=”numbers”>|</div>
        expAll = 1
        NO.allWrap.dataWrap = <a rel=”moodalbox” href=”index.php?id={field:uid}”><img src=”1.gif”></a> || <a rel=”moodalbox” href=”index.php?id={field:uid}”><img src=”2.gif”></a> || <a rel=”moodalbox” href=”index.php?id={field:uid}”><img src=”3.gif”></a> || <a rel=”moodalbox” href=”index.php?id={field:uid}”><img src=”4.gif”></a>
        NO.doNotShowLink = 1

        ACT < NO

        CUR = 1
        CUR.allWrap.dataWrap = <a rel=”moodalbox” href=”index.php?id={field:uid}”><img src=”1-mo.gif”></a> || <a rel=”moodalbox” href=”index.php?id={field:uid}”><img src=”2-mo.gif”></a> || <a rel=”moodalbox” href=”index.php?id={field:uid}”><img src=”3-mo.gif”></a> || <a rel=”moodalbox” href=”index.php?id={field:uid}”><img src=”4-mo.gif”></a>
        CUR.doNotShowLink = 1
    }
}

Here I have given some tips on how to use jm_quote.

You may find this extension at: http://typo3.org/extensions/

1. Install the extension

2. Create a sysFolder (ex: Random Quotes)
Let us consider the uid of this sysFolder is 60

3. Create a few records with your quotes.

4. Now you need to inform the jm_quote plugin the uid of the above sysFolder.

This needs to be done in the Typoscript setup as shown below:

plugin.tx_jmquote_pi1 {
    #Sysfolder Page-ID, where the quotes are located.
    pid_list = 60
}

5. Now it is time to get the random quotes on your page.

This can be easily done by assigning the plugin output to the required TypoScript object:

lib.my_header < plugin.tx_jmquote_pi1

That’s all. Now you should see the quotes on the pages. (Make sure to clear FE Cache)

You may include multiple CSS files using the following code:

page.includeCSS {

file1 = fileadmin/templates/project1/css/file1.css
file2 = fileadmin/templates/project1/css/file2.css
file3 = fileadmin/templates/project1/css/file3.css

}

Use this code to include Javascript files:

page.includeJS {

file1 = fileadmin/templates/project1/js/file1.js
file2 = fileadmin/templates/project1/js/file2.js
file3 = fileadmin/templates/project1/js/file3.js

}

Consider you wish to have a CSS specifically for IE 6 and below:

[version= < 7][browser = msie]
page.includeCSS.file4 = fileadmin/templates/prj1/css/ie6fix.css
[global]