Eine einfache Extension: Reflektion für Bilder

 / typo3wizard.com / Artikel / Eine einfache Extension: Reflektion für Bilder

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.

Extension Manager
Include Static im Template

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,&nbsp; 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



Comments


Marc, 13-04-08 06:15:
Wer probleme hat sollte sich mal die extension flowgallery anschauen
Da gibts das auch und ist alles sehr simpel aber umfangreich gehalten
Clemens, 25-08-08 17:17:
Das hier:
###Schnipp###
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>
###schnapp###

geht auch einfacher:
###schnipp###
page.headerData.53 = TEXT
page.headerData.53 {
value=<script type="text/javascript" src="{PATH:EXT:PATH:EXT:t3w_image_reflections/javascript/reflection.js}"></script>
insertData=1
}
###schnapp###

just my 2 cents
clemens, 25-08-08 17:19:
äh, natürlich nur einmal mit PATH:EXT:
sorry, copy & paste fehler.

btw: die schrift in diesen kommentaren ist echt winzigwinzigwinzig. und miserabel zu lesen auf meinen 24" screens ....
Andreas, 11-03-09 13:59:
Sehr schöne Extension!

Allerdings auch ein wenig eigenwillig. Integriert in das "Templates für TemplaVoilà,
V 4.0.4" Komplettpaket will es mal, mal will es nicht. In einer Installation klappte es auf Anhieb. In einer zweiten erst, nachdem in der setup-Datei "page=53" auf "page=153" geändert wurde. In einer dritten Installation läßt es sich nur verwenden, wenn die Extension mindestens einmal für ein Bild in der Menüspalte am Ende verwendet wird (siehe hier: www.butzbacher-tafel.de). Problem ist immer, dass die erforderliche Javascript-Datei ansonsten nicht im HEAD eingebaut wird. Löscht man das Bild unten links oder verschiebt es weiter nach oben an eine andere Position funktioniert der Effekt leider nicht mehr.

Schönen Gruß
Andreas
Mischa, 26-03-10 10:10:
Hola,

ich hätte nie gedacht, dass es so einfach ist tt_content so zu erweitern.

Jetzt würde ich diese Funktionalität gerne auch für die Extension tt_news haben. Wie muss dafür nun die setup.txt erweitert werden? Und wie muss die $GLOBALS['TCA']-Zeile aussehen, damit die Checkbox im Reiter "Medien" erscheint?

Gruß,
Mischa

Kommentar hinzufügen

* - Pflichtfeld

*



*
*

Top 10 Updates

Nützliche Links geändert am  24-Apr-2013 06:31:02
Login geändert am  09-Sep-2010 09:31:35
Schöne Schriften mit Google Font API geändert am  20-Mai-2010 14:36:59
TS basierte Searchbox für Indexed Search geändert am  18-Mai-2010 16:26:54
TYPO3 SEO geändert am  30-Apr-2010 07:43:20
Suchmaschinenfreundliche grafische Überschriften in TYPO3 geändert am  30-Apr-2010 07:33:56
Erstellen eines einfachen Infocenters mit TYPO3  geändert am  17-Nov-2009 11:11:22
Funktionierendes Section Menu mit TemplaVoila geändert am  05-Mai-2009 10:42:40
"Nicht im Menü" in Sitemap anzeigen geändert am  05-Mai-2009 10:12:24
Implementation des DHTML Menüs von brainjar.com  geändert am  01-Feb-2009 13:01:36

Latest comments

22-Apr-2016 07:20:42
Stephan schrieb: Perfekt wäre es, wenn man dieses Beispiel für TYPO3 7.x ummünzen könnte.
Einfache Bildergalerie aus dem media Feld
12-Apr-2016 17:05:49
Peter schrieb: habs... Einfach noch 10.renderObj.header.10 = 10.renderObj.textpic.10 = ...
Andere Formatierung für erstes Element in TYPO3
12-Apr-2016 16:36:46
Peter schrieb: Wunderbar, auch wenn der Eintrag schon nen bisschen älter ist... .. klappt soweit T3...
Andere Formatierung für erstes Element in TYPO3
English
Suche: