

When i stumbled upon this one, i thought that it would be neat to have this function in TYPO3. Since this works just by adding CSS classes to the image, there is no need to touch the image processing done by TYPO3
My solution:
I created a simple extension with the Kickstarter, added 3 fields to the tt_content table / the content element "Image" / "Text with image" and then I extended the image/texpic configuration with TypoScript.
In the Kickstarter i filled in the basic fields and then I added the 3 additional fields I needed to the tt_content table.
To make it simple, I set as value for the options in the select fields, the CSS class with the corresponding option.
After this was done, the extension code can be viewed with "view result" and written with "write".
Now some finetuning:
In the file ext_tables.php the following line
t3lib_extMgm::addToAllTCAtypes("tt_content","tx_t3wimagereflections_reflection;;;;1-1-1, tx_t3wimagereflections_reflection_height, tx_t3wimagereflections_reflection_opacity");
,
is responsable for showing the new fields for every new content element that is created.
It would be nice to have these options only for "Images" and "Text with images", so we replace this line with the following:
$GLOBALS['TCA']['tt_content']['palettes']['7']['showitem'] .= ',tx_t3wimagereflections_reflection, tx_t3wimagereflections_reflection_height, tx_t3wimagereflections_reflection_opacity';
Additionally I would like to have a static TypoScript file, with the standard configuration for this extension.
To accomplish this, I added following line to the end of ext_tables.php:
t3lib_extMgm::addStaticFile($_EXTKEY,'static/','Image reflections');
Thereby I can create a setup.txt/constants.txt in the folder static, which afterwards can be included under "include static" when editing a template record.
Following TypoScript i put into setup.txt
# Reflection for images # Backup original image configuration temp.pic<tt_content.image.20 tt_content.image.20> tt_content.image.20=COA # Register with the reflection data if "add reflection" is checked tt_content.image.20.10=LOAD_REGISTER tt_content.image.20.10.reflect.cObject=COA tt_content.image.20.10.reflect.cObject.wrap=class="|" tt_content.image.20.10.reflect.cObject.stdWrap.if.isTrue.field=tx_t3wimagereflections_reflection tt_content.image.20.10.reflect.cObject.10=TEXT tt_content.image.20.10.reflect.cObject.10.noTrimWrap=| | | tt_content.image.20.10.reflect.cObject.10.value=reflect tt_content.image.20.10.reflect.cObject.20<tt_content.image.20.10.reflect.cObject.10 tt_content.image.20.10.reflect.cObject.20.field=tx_t3wimagereflections_reflection_height tt_content.image.20.10.reflect.cObject.30<tt_content.image.20.10.reflect.cObject.10 tt_content.image.20.10.reflect.cObject.30.field=tx_t3wimagereflections_reflection_opacity # Import original image configuration and add the register tt_content.image.20.20<temp.pic temp.pic> tt_content.image.20.20.1.stdWrap.insertData=1 tt_content.image.20.20.1.params = align="top" {register:reflect} #Adjust text with pic temp.textpic<tt_content.textpic.20.text tt_content.textpic.20 =< tt_content.image.20 tt_content.textpic.20.20.text<temp.textpic temp.textpic> # The used javascript file is inserted in the head tag # Small problem: If the used page object is not called page this part doesn't work, but I'm not aware of a solution to solve this in a universal way with ts page.headerData.53=TEXT page.headerData.53.insertData=1 page.headerData.53.data=PATH:EXT:t3w_image_reflections/javascript/reflection.js page.headerData.53.wrap=<script type="text/javascript" src="|"></script>
Naturally i have copied the file reflection.js into the javascript folder.
In the backend I have now the following additional options, when creating a "image" or "text with image" record.

The result looks like this:

Download as finished t3x file here


Comments (0)