

Nachdem ich auf das hier gestoßen bin, dachte ich mir, daß es eigentlich recht nett wäre, diese Funktionen in TYPO3 nutzen zu könnnen. Nachdem das ganze ja, nur eine oder mehrere css Klassen zum Bild hinzufügt, muss man nicht einmal in die Bildverarbeitung von TYPO3 eingreifen.
Mein Lösungsansatz:
Erstellen einer einfachen Erweiterung mit dem Kickstarter, 3 Felder zur tt_content Tabelle bzw. den Inhaltselementen "Text mit Bild" und "Bild" hinzufügen und dann per TypoScript die Definition für image/textpic erweitern.
Im Kickstarter habe ich als erstes die Grunddaten ausgefüllt und dann die Tabelle tt_content um die 3 benötigten Felder erweitert.
Um es mir einfacher zu machen, habe ich den Optionen der beiden Select Boxen für die Höhe und die Transparenz der Reflektion, als Wert die CSS Klasse für die entsprechende Option gegeben.
Nachdem man das erledigt hat, kann die Erweiterung mit "view result" angesehen und mit "write" geschrieben werden.
Nun ein wenig Finetuning:
In der Datei ext_tables.php bewirkt die Zeile
t3lib_extMgm::addToAllTCAtypes("tt_content","tx_t3wimagereflections_reflection;;;;1-1-1, tx_t3wimagereflections_reflection_height, tx_t3wimagereflections_reflection_opacity");
,
dass die neuen Felder in jedem Element, das aus der Tabelle tt_content kommt im Backend angezeigt werden.
Wünschenswert wäre aber, diese Optionen nur bei Bildern und "Text mit Bild" zu haben, deshalb ersetzen wir diese Zeile mit der folgenden:
$GLOBALS['TCA']['tt_content']['palettes']['7']['showitem'] .= ',tx_t3wimagereflections_reflection, tx_t3wimagereflections_reflection_height, tx_t3wimagereflections_reflection_opacity';
Außerdem hätte ich gerne eine statische TypoScript Datei, mit der standard Konfiguration für diese Erweiterung.
Um das zu erreichen füge ich folgende Zeile, ans Ende der ext_tables.php hinzu.
t3lib_extMgm::addStaticFile($_EXTKEY,'static/','Image reflections');
Dadurch kann ich im Verzeichnis "static" eine setup.txt und constants.txt anlegen, die dann unter "include static" beim Editieren eines Templates eingebunden werden kann.
Folgendes TypoScript habe ich in die setup.txt gegeben:
# Reflection for images # Originale Bild Konfiguration speichern temp.pic<tt_content.image.20 tt_content.image.20> tt_content.image.20=COA # Register mit den reflection Daten füllen falls "add reflection" angeklickt 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 # Originale Bildkonfiguration zurückschreiben und das Register hinzufügen 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} # Text mit Bild anpassen 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> # Die Benötigte javascript Datei in den Kopfteil der Seite einbinden # Kleines Problem: Wenn das benutzte page Objekt nicht page heist funktioniert das natürlich nicht, ich kenne aber keine Möglichkeit, wie man das mit ts universell lösen könnte 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>
Natürlich habe ich die Datei reflection.js ins Verzeichnis javascript kopiert.
Im Backend hat man bei "Bild" und "Text mit Bild" jetzt folgende Zusatzoptionen:

Und aussehen tut das dann z.b. so:

Download der Extension als fertige t3x Datei


Kommentare (0)