How to check if a Templavoila Template (TO) is used or not?

This is often a very confusing task for most people, including myself in the beginning.

Using this simple step, it would however be easy to find out whether the TO is used or not.

1. Set to list view from web menu.

2. Now select the Storage folder where Templavoila Templates are Stored.

3. Enable the Clipboard, and make sure clipboard 2 is selected.

4. Now can see some numbers at the extreme right side of each, these numbers indicate the number of times the TO is being used.

Move the Mouse over the numbers, and you can even see the uid of a few of them.

That’s all.

Image From File Field of page as Menu Item!!!

The following code creates a rollover menu usng the two images specified in the file properties check my other blog entry on how to specify file field to a page.

 

objIgmTextMenu = COA
objIgmTextMenu.10 = HMENU
objIgmTextMenu.10.maxItems = 3
objIgmTextMenu.10.1 =  GMENU
objIgmTextMenu.10.1 {
    NO = 1
    NO {       
            altImgResource.import = uploads/media/
            altImgResource.import.field = media
            altImgResource.import.listNum = 0
        }
        RO < .NO
        RO = 1
        RO.altImgResource.import.listNum = 1   
      }
}

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
}

How to view/alter Photoshop keyboard shortcuts?

This example shows how to add a keyboard shortcut for showing/hiding active layer.

1. Edit menu, select "Keyboard Shortcuts", or press Alt+Shift+Ctrl+k.
2. Find the layers menu, and far down you’ll see the line for "Hide Layers".
3. Select it, and press the shortcut you would like for this feature, for instance Alt+Shift+Ctrl+h.
4. Click "Accept", then "OK".
That’s it, now your shortcut should work.

You can even take an overview of all shortcuts… in order to do this just click on the summarize button in the keyboard shortcuts and menus wizard.

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:

CODE:

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

In the above code | is the HTML Character Code for pipe character ( | )

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

Good resource for Web Programming

1. Typoscript:
   http://www.typo3wizard.com/en/snippets.html
   This site has lots of useful Typoscript code.
2. ISO Country Code Listing
3. Dummy text generator in various languages!!!
   http://www.lipsum.com/
4. A good resource on TypoScript Conditional Statements
   http://wiki.typo3.org/index.php/TSrefConditions

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.

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
}

Menu with separate Image for Each Page using optionSplit

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 = &nbsp;
    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
    }
}