A simple extension: reflections for images

 / Main / Articles / A simple extension: reflections for images

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.

Extension Manager
Include Static in template

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


Simon, 26-10-06 15:47:
$GLOBALS['TCA']['tt_content']['palettes']['7']['showitem'] = 'image_link, image_zoom, tx_t3wimagereflections_reflection, tx_t3wimagereflections_reflection_height, tx_t3wimagereflections_reflection_opacity';
is not optimal.

Better is:
$GLOBALS['TCA']['tt_content']['palettes']['7']['showitem'] .= ',tx_t3wimagereflections_reflection, tx_t3wimagereflections_reflection_height, tx_t3wimagereflections_reflection_opacity';

Reason: With the first version you will overwrite other extensions configurations.
tobias, 27-10-06 06:24:
you are right, thank you i will replace that line
Rudi, 24-08-09 18:26:
It seems if there is a Problem in Safari 4.0.3. The reflection does not work there. Did you here avout it from others, too?
bobo, 11-11-09 11:10:
see it .nice

Add comment

* - required field

*



*
*

Top 10 Updates

Useful Links geändert am  24-Apr-2013 06:31:20
Nice fonts using Google font API geändert am  20-May-2010 14:36:47
TS-based Searchbox for Indexed Search  geändert am  18-May-2010 16:27:15
TYPO3 SEO geändert am  30-Apr-2010 07:44:22
Search engine friendly graphical headers in TYPO3 geändert am  30-Apr-2010 07:33:44
Creating a simple Infocenter using TYPO3 geändert am  17-Nov-2009 11:12:52
Making the Section Menu work correctly with TemplaVoila geändert am  05-May-2009 10:27:17
Show pages with type "Not in Menu" in a sitemap geändert am  05-May-2009 10:11:17
Implementation of the DHTML menu from brainjar.com  geändert am  01-Feb-2009 13:02:48
Sample DHTML menu geändert am  01-Feb-2009 12:51:25

Latest comments

17-May-2013 10:09:34
Nicolas schrieb: If an extension or orther return a content empty, this solution not working. I not have the...
Wrap only if not empty
22-Apr-2013 12:08:26
morkel schrieb: hi i am new on typ03 and want to open a form on lightbox. when we click on image their a form will...
Using lightbox without extension
04-Mar-2013 13:33:47
Sebastian schrieb: Vergesse das immer wieder. Vielen Dank an dich und an Google :)
Wrap only if not empty
Deutsch
Search: