CSS styled IMGTEXT - Part4

Categories: Development Created by Ernesto Baschny (cron-IT)
I am glad to announce the following entry in todays TYPO3's ChangeLog: New feature: Merged cron_cssstyledimgtext into CSS Styled Content.Kudos to Ernesto Baschny who did most of the work. Many thanks to Sebastian Kurfuerst for his great support. Great work boys!
Yes, you heard it: cron_cssstyledimgtext is now integrated into css_styled_content and is already "shipping" in TYPO3 4.0 beta2. A lot of work has been done since the last version of my extension and the integration takes the possibilities a step forward.

Some nice things about the integration for those who already know cron_cssstyledimgtext:

1) Of course an additional extension is not needed anymore: You install TYPO3 4.0 beta2, activate css_styled_content, add its static templates,configure the CONSTANTs and you're done!

2) The fields altText, titleText and longdescURL are now fixed part oftt_content in core. So you will have consistent fields to add this information. A migration tool from cron_cssstyledimgtext's fields to the new tt_content fields will be released as soon as 4.0 is out. Meanwhile you can try some basic SQL to "migrate" the fields (note that longdescURL hasn't been in use in my extension):

UPDATE tt_content SET altText = tx_cssstyledimgtext_altText, titleText =
tx_cssstyledimgtext_titleText;

3) The choice to split caption/alt/title/longdescURL by a newline is now configured with one single constant (imageTextSplit). The splitting is now done directly with stdWrap (see TypoScript!), so there are some very nice possibilities with the new .caption solution. Updated docs on that part will follow, but I'm sure our TS-fans (JoH and Co.) will already
play around with them.  ;)

4) The old constant and TS-key captionSplit is marked as OBSOLET but still supported. So migrating from old sites doesn't require any change.

5) Speaking of migration, if you are upgrading from 3.8.1 and are afraidthat the addition will destroy your site, use the "Upgrade Wizard" and set the compatibility mode to 3.8.1: You will get the "good old" table based IMGTEXT. But even there you will be able to enjoy the benefits of the new altText/titleText/longdescURL handling.

6) Now some new good stuff: All XHTML which is outputted can be controlled via TypoScript. There's a nice new ".layout" property which lets you "fine-tune" the general appearance of your Text-with-image CE.
Look:

        layout = CASE
        layout {
                key.field = imageorient
                # above-center
                default = TEXT
                default.value ( 
<div class="csc-textpic
csc-textpic-center
csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div><div
class="csc-textpic-clear"><!-- --></div>
)
....

So you don't like the "
<div class="csc-textpic-clear"><!-- --></div>
" part? You can change it! Or you want to render everything without ANY ? You can do that. Also two new possibilities let you control the wrap around the whole image block:

        imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap"
style="width:{register:totalwidth}px;"> | </div> imageStdWrapNoWidth.wrap = <div class="csc-textpic-imagewrap"> | </div>
|
The first one will be used if a width has to be applied inline for rendering purposes multiple rows of images, centering above and below and if there's a non-splitted caption below the whole image-block). The second one will be used on other situations (single image, etc).7) The CSS positioning methods haven't changed. New is the inside the clearing DIVs, which are there to "enlarge the containing element". Thanks for Oliver Klee for pointing that out.8) The CSS-Class-Names are different! Now they are CSC-compliant, so please note the changes:  csi-textpic   changed into   csc-textpic  csi-*         changed into   csc-textpic-*9) The CSS solution is not the right one for everyone. So if you want to turn it off but don't want 3.8.1-compatibility-mode, simply:  tt_content.image.20 = IMGTEXT  tt_content.textpic.20 = IMGTEXTSo I think that's it for now. I invite everyone to try it out, to see what else we can improve.