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


Haemo, 23-11-06 16:15:
geniale extension.

Bei mir wurde nach der installation war image reflection
aber nicht unter include static vorhanden.

Nachdem ich in die ext_tables.php folgendes am Ende der Datei hinzugefügt haben und die extension dann erneut installiert haben, dann hat es super funktioniert.

t3lib_extMgm::addStaticFile($_EXTKEY,'static/','Image reflections');
Sönke, 29-11-06 09:02:
Hallo,

stimmt. ich musst auch in der ext_tables.php das hinzufügen.

mfg
Ron, 23-03-07 08:19:
Hallo!

Sehr schöne Extension, sieht wirklich klasse aus, auf weißen, grauen und schwarzen Hintergründen. Toll gemacht, danke!!

Ich hab allerdings ein Problem: Wenn ich auf die Fotos Links lege, bzw. "Klick-Vergrößern" aktiviere, erkennt der IE7 leider die Bilder nicht mehr als Links...

"Klick-Vergrößern" funktioniert zwar immer noch (obwohl der Mauszeiger sich nicht verändert), Links auf andere Seiten jedoch gar nicht mehr.

Weißt Du vielleicht eine Lösung?

Viele Grüße, Ron
Pietro, 19-04-07 20:33:
Hi, ich verstehe nciht warum, aber bei mir funzt es einfach nicht. Ich habe die Extension installiert und "Add reflection" aktiviert und auch im "include static" das Teil hinzugefügt, aber nix, ich kriege keine Reflektion im Frontend.

Kann mir jemand einen Tip geben?
Tim, 07-06-07 15:40:
Das gleiche lässt sich auch mit Typoscript realisieren. Hier hab ich den Code gepostet:

http://www.typo3.net/forum/list/list_post//63552/

Leider auch mit dem Problem, dass "Klick-Vergrößern" nicht mehr 100%-ig läuft.

Gruß
Hans, 04-09-07 08:25:
Das Substantiv zu reflektieren ist Reflexion, NICHT Reflektion.
Bitbull, 06-09-07 20:24:
@ Hans: Schön, dass es in der Typo3-Gemeinde auch echte Germanisten gibt (oder heißt das "wahre Germanisten"?).

Deine Korrektur ist jedenfalls wahr (oder sollte ich "richtig" sagen?).

Richtig, aber auch leider SO WAS VON ÜBERFLÜSSIG (oder heißt das "niedrigviskos"?)

Naja, ich denke, alle anderen verstehen das schon richtig.

Glück auf,

Bitbull
Nico, 23-10-07 05:57:
Hallo
Ich krieg es nicht hin nim static Ordner diese Files zu erstellen aus Berechtigungsgründen. Wie seid ihr vorgegangen bei der Installation?
Ich bin noch nicht so fit in Typo3...Merci für die Hilfe!

Nico
Nicole, 15-11-07 12:52:
Schöne Extension! Leider mit drei JavaScript-Fehlern (zumindest auf meiner Installation, habe dort auch die moodalbox.js laufen):

reflection.js:

1. asignment to undeclared variable i
2. asignment to undeclared variable j
3. asignment to undeclared variable doptions

Ist das der Kontext zur moodalbox oder liegt es an reflection.js? Danke für einen Hinweis.

Viele Grüße,
Nicole
Nicole, 15-11-07 12:57:
Kannst Du bitte meine E-Mail-Adresse aus dem Kommentar
darüber hinausnehmen, die sollte eigentlich nicht
veröffentlicht werden, danke.
Danach kannst Du diesen Kommentar auch gern löschen!
Viele Grüße!

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: