[TYPO3-UG Dutch] nieuwsbrief align images

[Loek Hilgersom]

Hoi Jacco,

Als je het echt mooi wilt doen is het hoe dan ook veel werk, maar afhankelijk 
van de situatie en je eigen voorkeuren moet je de keus maken:

1: Met TV heb je inderdaad totale controle over de output, maar je moet ook al 
je content-types (verschillende plaatsing van plaatjes e.d.) zelf maken. In 
sommige situaties juist een uitkomst vanwege die totale controle, maar veel werk 
als je veel opties wilt aanbieden.

2: heb ik zelf nooit geprobeerd voor afbeeldingen, maar je kunt ook de manier 
waarop de RTE code wordt getransformeerd tot op grote hoogte zelf aanpassen. Ik 
heb op deze manier wel vaak inline styles toegevoegd aan headers e.d. voor 
styling van nieuwsbrieven

3: net als Rik heb ik de voorkeur voor text-with-images content elementen. De 
output daarvan kun je omvormen tot iets wat het zelfs in Outlook 2007 redelijk 
doet. Zie mijn TS hieronder, dat kan t/m 3 images per CE verwerken. Wel de 
bijbehorende constanten even goed instellen natuurlijk. Misschien heb je er wat aan.

Groeten,
Loek


temp.images = COA
temp.images {
   wrap = <div style="margin-bottom: 10px">|</div>
   10 = IMAGE
   10 {
     file {
       import = uploads/pics/
       import.field = image
       import.listNum = 0
       width.field = imagewidth

       ## Copy constructed maxW settings from tt_content object
       maxW < tt_content.image.20.maxW
       maxWInText < tt_content.image.20.maxWInText
     }

     stdWrap.required = 1

     border = {$IMAGEBORDERPX}
     # borderCol = {$IMAGEBORDERCOLOR}

     params = borderCol="{$IMAGEBORDERCOLOR}" style="border:{$IMAGEBORDERPX}px 
solid {$IMAGEBORDERCOLOR};"

     altText = TEXT
     altText {
       field = altText
       split.token.char = 10
       split.token.if.isTrue = {$styles.content.imgtext.imageTextSplit}
       split.returnKey.data = register : IMAGE_NUM_CURRENT
     }

     titleText < .altText
     titleText.field = titleText

     longdescURL < .altText
     longdescURL.field = longdescURL

     stdWrap.editIcons = tt_content : image 
[imageorient|imagewidth|imageheight], 
[imagecols|image_noRows|imageborder],[image_link|image_zoom],[image_compression|image_effects|image_frames]
     stdWrap.editIcons.iconTitle.data = 
LLL:EXT:css_styled_content/pi1/locallang.php:eIcon.images

   }
   11 < .10
   11.file.import.listNum = 1
   12 < .10
   12.file.import.listNum = 2

   # caption.editIcons = tt_content : imagecaption[imagecaption_position]
   # caption.editIcons.beforeLastTag=1
   # caption.editIcons.iconTitle.data = 
LLL:EXT:css_styled_content/pi1/locallang.php:eIcon.caption

}

temp.textpic = COA
temp.textpic {

   10 < lib.stdheader

   20 = CASE
   20 {
     key.field = imageorient
     default = COA
     default {
       10 < temp.images
       20 < tt_content.text.20
       20.wrap >
       stdWrap.wrap = {$CBODYWRAP}
     }

     # 0=Above text, center
     0 < .default
     0.10 {
       10.params = borderCol="{$IMAGEBORDERCOLOR}" 
style="border:{$IMAGEBORDERPX}px solid {$IMAGEBORDERCOLOR};"
       11.params = borderCol="{$IMAGEBORDERCOLOR}" 
style="border:{$IMAGEBORDERPX}px solid {$IMAGEBORDERCOLOR}; margin-left:15px;"
       12.params < .11.params
       wrap = <div style="text-align:center; padding-bottom: 10px">|</div>
     }

     # 1=Above text, right
     1 < .0
     1.10.wrap = <div style="text-align:right; padding-bottom: 10px">|</div>

     # 2=Above text, left
     2 < .default
     2.10.wrap = <div style="text-align:left; padding-bottom: 10px">|</div>

     # 8=Below text, center
     8 < .0
     # Swap order of images and text (copy images to cObj 30 and clear 10)
     8.30 < .8.10
     8.10 >

     # 8=Below text, right
     9 < .1
     # Swap order of images and text (copy images to cObj 30 and clear 10)
     9.30 < .9.10
     9.10 >

     # 10=Below text, left
     10 < .2
     # Swap order of images and text (copy images to cObj 30 and clear 10)
     10.30 < .10.10
     10.10 >

     # 17=In text, right (same as 1, except no div container around image-block)
     17 < .1
     17.10 {
       wrap >
       #<div style="text-align:right; float: right; margin-bottom: 10px">|</div>
       10.params = borderCol="{$IMAGEBORDERCOLOR}" 
style="border:{$IMAGEBORDERPX}px solid {$IMAGEBORDERCOLOR}; margin-left:15px;" 
align="right"
       11.params < .10.params
       12.params < .10.params

       # reverse order for right-float
       10.file.import.listNum = 2
       11.file.import.listNum = 1
       12.file.import.listNum = 0
     }

     # 18=In text, left (same as default)
     18 < .default
     18.10 {
       wrap >
       10.params = borderCol="{$IMAGEBORDERCOLOR}" 
style="border:{$IMAGEBORDERPX}px solid {$IMAGEBORDERCOLOR}; margin-right:15px;" 
align="left"
       11.params < .10.params
       12.params < .10.params
     }

     # 26=to the left of text, no text wrapping
     26 < .default
     26.wrap = <table border="0" cellpadding="0" cellspacing="0"><tr>|</tr></table>
     26.10 {
       wrap = <td valign="top" style="{$TEXTSTYLE};"><div 
style="padding-right:15px; line-height:10px;">|</div></td>
       10.stdWrap.wrap = |<br><br>
       10.params = borderCol="{$IMAGEBORDERCOLOR}" 
style="border:{$IMAGEBORDERPX}px solid {$IMAGEBORDERCOLOR};"
       11.stdWrap < .10.stdWrap
       11.params < .10.params
       12.stdWrap < .10.stdWrap
       12.params < .10.params
     }
     26.20.wrap = <td valign="top" style="{$TEXTSTYLE};">|</td>

     # 25=to the right of text, no text wrapping
     25 < .26
     25.30 < .25.10
     25.10 >
     25.30.wrap = <td valign="top" style="{$TEXTSTYLE};"><div 
style="padding-left:15px; line-height:10px;">|</div></td>
   }
}

tt_content.textpic >
tt_content.textpic < temp.textpic