[TYPO3-dev] css_styled_content makes wrong markup

[Uschi Renziehausen]

Hi Ron,

Dr. Ronald P. Steiner wrote:
> Hello Uschi,
> 
> could you please share this TS-code that switches from
> <a id="c22"></a>
> to
> <div class="csc-textpic csc-textpic-intext-right-nowrap" id="c22">
> ?
> 
> greetings
> 
> Ron

Unfortunately I cannot come up with that one right away, because I used 
a different approach for my project. In that project, I am using the 
object path tt_content.stdWrap.innerWrap.cObject, which is normally used 
to evaluate the frame field. I am combining the two with the background 
thought that it might be a good idea to have each CE wrapped (xml wise 
in general, like that section element in xhtml 2 which appealed to me at 
first sight), and I do use custom 'Frames'. I also evaluate space 
before/after here, because I need it in my project. But the general 
approach should be also applicable to tt_content.image.20.layout, which 
is a CASE object as well. Below you find the code. Hope it makes sense ...

What I did:

/**
  * @description	Clear the default id handling
  *
  * Normally css_styled_content outputs the following code in front of 
every CE:
  * <a id="c50"></a>, where 50 is the uid of the CE in the original 
language. In case a
  * translated CE is displayed, we get the two empty <a>-elements, the 
first having the
  * id attribute set to the uid of the translated record:
  * <a id="c51"></a><a id="c50"></a>
  *
  * @see	tt_content.stdWrap.innerWrap.cObject.10
  */
tt_content.stdWrap.dataWrap >
tt_content.stdWrap.prepend >

	
/**
  * @description	Clear the default evaluation of section_frame
  *
  * By default, css_styled_content uses the path 
tt_content.stdWrap.innerWrap.cObject
  * as a CASE to evaluate the field section_frame. We clear it to get 
one appropriate
  * DIV with all necessary styling information.
  * Evaluation of section_frame is done in 
tt_content.stdWrap.innerWrap.cObject.20
  *
  * @see tt_content.stdWrap.innerWrap.cObject.20
  *
  */						
tt_content.stdWrap.innerWrap.cObject >


/**
  * @description Clear the standard evaluation of spaceBefore and spaceAfter
  */    	
tt_content.stdWrap.spaceBefore >
tt_content.stdWrap.spaceAfter >
tt_content.stdWrap.space >

/**
  * @description	Evaluate uid of content element and store in register:ceId
  */	
tt_content.stdWrap.innerWrap.cObject = COA
tt_content.stdWrap.innerWrap.cObject.10 = LOAD_REGISTER
tt_content.stdWrap.innerWrap.cObject.10 {
	ceId = TEXT
	// If translated CE has to be displayed show the translated uid, else 
the original uid
	ceId.data = field:_LOCALIZED_UID // field:uid
}


/**
  * @description	Evaluate spaceBefore and spaceAfter and store in 
register:ceStyles
  */	
tt_content.stdWrap.innerWrap.cObject.11 = LOAD_REGISTER
tt_content.stdWrap.innerWrap.cObject.11 {
	
	ceStyles.cObject = COA
	ceStyles.cObject {
		1 = TEXT
		1.fieldRequired = spaceBefore
		1.data = field:spaceBefore
		1.noTrimWrap = |margin-top:|px; |
		
		2 = TEXT
		2.fieldRequired = spaceAfter
		2.data = field:spaceAfter
		2.noTrimWrap = |margin-bottom:|px; |
	}
}
	

/**
  * @description	Wrap styles (if any) in style="|"
  * @see tt_content.stdWrap.innerWrap.cObject.11
  *
  */
tt_content.stdWrap.innerWrap.cObject.12 = LOAD_REGISTER
tt_content.stdWrap.innerWrap.cObject.12 {
	ceStyleAttr = TEXT
	ceStyleAttr {
		data = register:ceStyles
		noTrimWrap = | style="|" |
		required = 1
	}	
}


/**
  * @description	Wrap each CE in an appropriate DIV
  *
  * What we need is:
  * a) id set to uid of the CE prefixed with c: c123
  * b) a class for the chosen section frame
  * c) a common class for all colorboxes. This comes in handy to style 
margins and paddings for our colorboxes at once
  * d) a style attribute for margin-top and margin-bottom according to 
editors input into
  *	  spaceBefore and spaceAfter
  * e) additionally each CE has a class ce-section (Do we need this? Not 
really,
  *	   but might come in handy?
  *
  * @see tt_content.stdWrap.innerWrap.cObject.10 (ceId)
  * @see	tt_content.stdWrap.innerWrap.cObject.11 (ceStyles)
  * @see	tt_content.stdWrap.innerWrap.cObject.12 (ceStyleAttr)
  */

tt_content.stdWrap.innerWrap.cObject.20 = CASE
tt_content.stdWrap.innerWrap.cObject.20  {
	insertData = 1
	key.field = section_frame
	
	default = TEXT
	default.value = <div id="c{register:ceId}" class="ce-section" 
{register:ceStyleAttr}>|</div>
	default.insertData = 1
	
	35 = TEXT
	35.value = <div id="c{register:ceId}" class="ce-section colorbox 
cscheme1" {register:ceStyleAttr}>|</div>
	35.insertData = 1
	
	40 = TEXT
	40.value = <div id="c{register:ceId}" class="ce-section colorbox 
cscheme2" {register:ceStyleAttr}>|</div>
	40.insertData = 1
	
	45 = TEXT
	45.value = <div id="c{register:ceId}" class="ce-section colorbox 
cscheme3" {register:ceStyleAttr}>|</div>
	45.insertData = 1
	
	50 = TEXT
	50.value = <div id="c{register:ceId}" class="ce-section colorbox 
cscheme4" {register:ceStyleAttr}>|</div>
	50.insertData = 1
}