[TYPO3-english] how to create dynamic css class based on a counter

[jochem nabuurs]

JoH asenau wrote:
>> On a website i'm developing, a teaser with portfolio items will be
>> shown. I've got to reproduce the following HTML with typoscript for
>> it:
> 
>> stdWrap.dataWrap = <div id="tabs-{field:uid}" class="block
> block-grey">|</div>
>> This works partially. What i'd like to do is replace
>> id="tabs-{field:uid}" for a counter.
> 
> replace {field:uid} with {cObj:parentRecordNumber} and you're done.
> 
> HTH
> 
> Joey
> 

Joey, you made my day! It even works when selecting content at random 
:-) Whoohoo

Is there any reference about the use of {...} parameters, so i can look 
up all possible parameters. I presume that cObj: parentRecordNumber 
isn't the only one...

If it's ok, I'd like to ask a related question (otherwise i'll post a 
new one). This is the HTML i've posted before, but with an addition:

...
(Navigation)
<ul id="tab-menu">|</ul>
	<li><a href="#tabs-1">|</a></li>
	<li><a href="#tabs-2">|</a></li>
	<li><a href="#tabs-3">|</a></li>
</ul>
...
(Content)
     <div id="tabs-1" class="block block-grey">
`        ...
     </div>
     <div id="tabs-2" class="block block-grey">
         ...
     </div>
     <div id="tabs-3" class="block block-grey">
         ...
     </div>
...


I've now got the following code to accomplish this:


// Portfolio items
lib.portfolioSelect = CONTENT
lib.portfolioSelect {
	table= tt_news
	select {
         // Select only CE from a specific sysfolder/page
         pidInList = {$portfolio.pid_list}

         // Select random content element
         orderBy = datetime DESC
	}
}

temp.portfolioContent = CONTENT
temp.portfolioContent =< lib.portfolioSelect
temp.portfolioContent {
	// Renders the content as an image with text
	renderObj = COA
   	renderObj{

             // Wrap element in totality
             stdWrap.dataWrap = <div id="tabs-{cObj:parentRecordNumber}" 
class="block block-grey">|</div>

             // Image
     		5 = IMAGE
     		5 {
                 file {
                     import = uploads/pics/
                     import.field = image

                     //width = 186c
                     //maxWidth = 186c
                 }
             }

             // Title
             10 = TEXT
             10 {
                 field = title
                 wrap = <h4>|</h4>
             }

             // Content
             12 = COA
             12 {
                 1 = TEXT
                 1 {
                     field = bodytext
                     parseFunc < lib.parseFunc_RTE
                     wrap = <p>|</p>
                     crop = 200|...|1
                     if.isFalse.field = image
                 }

                 2 < .1
                 2.crop = 100|...|1
                 2.if.negate = 1
             }

             // Link to detail page
             20 = TEXT
             20.typolink.parameter = {$portfolio.singlePid} _top 
read-more  "Lees verder"
		}
	}
}

// Use select statement from the above,
// but generate different output
temp.portfolioNavigation = CONTENT
temp.portfolioNavigation =< lib.portfolioSelect
temp.portfolioNavigation {

     stdWrap.outerWrap = <ul id="tab-menu">|</ul>

     renderObj >
     renderObj = COA
     renderObj {

         stdWrap.dataWrap = <li><a 
href="#tabs-{cObj:parentRecordNumber}">|</a></li>

          // Link
         10 = TEXT
         10.field = title
     }
}

temp.portfolioHomepage = COA
temp.portfolioHomepage {
     wrap (
         <div id="portfolio" class="item span-6">
             <h2>Uit ons portfolio</h2>
             <div id="tabs">|</div></div>
     )

     5 < temp.portfolioNavigation
     10 < temp.portfolioContent
}



This works like a charm (thanks Joey) but the select is called twice.
I was wondering if this has an inpact on performance (sql query executed 
twice?) and if the TS above could be improved, F.E. to render the 
content in 1 renderObj. Now i've split it up into a navigation section 
and a content section because I couldnt figure out how to fit it into 1 
renderObj without changing the order of the htmloutput (i figured- 
renderObj represents 1 row).

Thanks in advance for any help!