Bildgröße Clickenlarge,...

aschweti · 21. April 2010 00:25

Hallo Leute,

es geht um die Clickenlarge-Funktion im RTE und das ich keine Möglichkeit finde das Pop-Up-Bild (Lightbox) größenmäßig zu beschränken, wie das ja auch bei Bildern in "Text/Bild"-Inhaltselementen problemlos möglich ist.

Folgende Konfiguration:

-TYPO3 4.3.3
- Statisches Template "Clickenlarge Rendering (rtehtmlarea) aktiviert
- Extension "kj_imagelightbox2" installiert (v. 2.0.2)
- Extension "rtelightbox" installiert (v. 2.0.1)

Lightbox an sich funktioniert problemlos, aber das Bild wird in der Größe angezeigt, wie es hochgeladen wurde. Wenn sich die Größe nicht irgendwie beschränken läßt, bleibt nur die Option dem Kunden zu sagen, dass er die Bilder offline vorbereiten muss, was natürlich den üblichen TYPO3-Komfort komplett zerstört 😢

Wäre toll, wenn das jemand gelöst hat und mir "das Geheimnis" verrät 😃

Danke und viele Grüße,

Alex

aschweti · 21. April 2010 00:34

Ach so,... vielleicht noch als Anmerkung:

In der Doku von rtelightbox steht...

Dimensions of image in lightbox

You can define the maximum width and hight of the
image in the lightbox via TypoScript Constants:

styles.content.imgtext.linkWrap.width = 800m
styles.content.imgtext.linkWrap.height = 600m

Das greift aber leider nicht. Nicht nur in den Constants getestet, sondern vorsichtshalber auch im Setup.

Alex

mhworx · 21. April 2010 07:17

Hi !

hast du es im setup deiner seite ( root) eingetragen?
oder nur in der extension selber?

Michael

aschweti · 21. April 2010 13:10

Hi!

im Setup, bzw. in den Constants im root.

VG Alex

m00re · 13. Mai 2010 17:09

Ich habe exakt das gleiche Problem.

PS: Es scheint kein Lightbox Problem zu sein, da die Bilder auch ohne Lightbox zu groß sind.

aschweti · 13. Mai 2010 17:27

Das heißt beim Klickvergrößern im RTE, aber ohne Lightbox? Wäre ja immerhin mal ein neuer Hinweis.

Ich konnte das Problem leider nach wie vor nicht lösen und mußte den Kunden, einen absoluten "Non-Techi", in IrfanView "schulen" und ihm erklären, dass das tolle TYPO3 da leider buggy ist und der derzeit einige Weg die lokale Bearbeitung ist. Sehr unbefriedigend 😢

Bin sonst ein uneingeschränkter TYPO3-Befürworter, diesen Bug kann ich beim Kunden aber nur schwer "schönreden" 😉

lisardo · 11. Januar 2011 22:39

Hallo,

ich habe das gleiche Problem. Nach allem was ich bisher gefunden habe, kann das auch nicht mehr funktionieren, zumindest nicht mehr seit Version 4.3 von TYPO3. Der RTE erstellt bei Click-Enlarge nicht mehr direkt ein Bild in der richtigen Größe, sondern ruft eine Funktion auf:

index.php?eID=tx_cms_showpic&file=uploads%2FRTEmagicP_bildname.jpg& ...

dabei übergibt er die Größenparameter der neuen Bildes am Ende. Heisst, das Bild wird erst beim Aufruf in die richtige Größe gebracht, durch die Systemextension tx_cms_showpic.
rtelightbox ruft aber das Bild direkt auf, ohne den Umweg über tx_cms_showpic - und damit bekommt man automatisch das Originalbild, nicht ein verkleinertes. Das ist ein Designfehler. Entweder wurde das in rtelightbox noch nie berücksichtigt, oder rtehtmlarea hat irgendwann das Handling von ClickEnlarge verändert.

Ich denke, ohne eine überarbeitung der Extension ist das Problem nicht lösbar. rtelightbox muss ebenfalls die tx_cms_showpic aufrufen.

Gruß
Peter, TYPO3 @ lisardo (Augsburg)

lisardo · 11. Januar 2011 23:06

Nun ja, ein bisschen Recherche und ausprobieren und man kommt auf eine Lösung ... :_)

OK, als erstes das hier in die Constants:

lightbox.width = 800m
lightbox.height = 800m

das wird die maximale Größe des Bildes. Einfach in die Root irgendwo in die Constants schreiben und beliebige Zahlen einsetzen.

Danach gehts im Setup weiter:

lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink{
	parameter.dataWrap >
	parameter.cObject = IMG_RESOURCE
	parameter.cObject.file.import.data = parameters:origFile
	parameter.cObject.file.maxW = {$lightbox.width} 
	parameter.cObject.file.maxH = {$lightbox.height}
	ATagParams >
	ATagParams = rel="lightbox[lb{field:uid}]"
	ATagParams.insertData = 1
}

Das funktioniert jetzt für die perfectlightbox - und gefunden habe ich es hier (Danke Thomas!).

Damit es auch in den anderen Lightboxen funktioniert, fehlt aber das hier noch, auch noch ins Setup rein:

[globalVar = LIT:{$plugin.rtelightbox.automaticDetection} = 1] && [globalString = TYPO3_LOADED_EXT|wsclicklightbox|type = /(.+)/]
lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagParams = rel="lightbox[c{field:uid}]"
[globalVar = LIT:{$plugin.rtelightbox.automaticDetection} = 1] && [globalString = TYPO3_LOADED_EXT|pmkslimbox|type = /(.+)/]
lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagParams = rel="lightbox[sb{field:uid}]"
[globalVar = LIT:{$plugin.rtelightbox.automaticDetection} = 1] && [globalString = TYPO3_LOADED_EXT|jq_fancybox|type = /(.+)/]
lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagParams = class="jqfancybox" rel="fancybox{field:uid}"
[globalVar = LIT:{$plugin.rtelightbox.automaticDetection} = 1] && [globalString = TYPO3_LOADED_EXT|jquery_thickbox|type = /(.+)/]
lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagParams = class="thickbox" rel="gallery{field:uid}"
[globalVar = LIT:{$plugin.rtelightbox.automaticDetection} = 1] && [globalString = TYPO3_LOADED_EXT|jq_lightbox|type = /(.+)/]
lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagParams = class="lightbox" rel="lightbox[{field:uid}]"
[globalVar = LIT:{$plugin.rtelightbox.automaticDetection} = 1] && [globalString = TYPO3_LOADED_EXT|perfectlightbox|type = /(.+)/]
lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagParams = rel="lightbox[lb{field:uid}]"
[globalVar = LIT:{$plugin.rtelightbox.automaticDetection} = 1] && [globalString = TYPO3_LOADED_EXT|perfectlightboxjquery|type = /(.+)/]
lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagParams = rel="lightbox[lb{field:uid}]"
[globalVar = LIT:{$plugin.rtelightbox.automaticDetection} = 1] && [globalString = TYPO3_LOADED_EXT|kj_imagelightbox2|type = /(.+)/]
lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagParams = rel="lightbox[presentation{field:uid}]"
[globalVar = LIT:{$plugin.rtelightbox.automaticDetection} = 1] && [globalString = TYPO3_LOADED_EXT|pmkshadowbox|type = /(.+)/]
lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagParams = rel="shadowbox[sb{field:uid}]"
[globalVar = LIT:{$plugin.rtelightbox.automaticDetection} = 1] && [globalString = TYPO3_LOADED_EXT|slimbox|type = /(.+)/]
lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagParams = rel="lightbox[lb{field:uid}]"
[globalVar = LIT:{$plugin.rtelightbox.automaticDetection} = 1] && [globalString = TYPO3_LOADED_EXT|jquerylightbox|type = /(.+)/]
lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagParams = rel="lightbox"
[globalVar = LIT:{$plugin.rtelightbox.automaticDetection} = 1] && [globalString = TYPO3_LOADED_EXT|rzcolorbox|type = /(.+)/]
lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagParams = class="rzcolorbox" rel="rzcolorbox[cb{field:uid}]"
[globalVar = LIT:{$plugin.rtelightbox.automaticDetection} = 1] && [globalString = TYPO3_LOADED_EXT|rzlightbox|type = /(.+)/]
lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagParams = rel="lightbox-{field:uid}"
[global]

Ein bisschen viel, aber man kann sich ja die Zeilen raussuchen, die zur verwendeten Ligtbox passen.

Gruß
Peter, TYPO3 @ lisardo (Augsburg)

sportline105 · 12. Januar 2011 13:23

eine möglichkeit wäre auch, die maximale bildgröße in der css datei festzulegen:

img {max-width: 900px; max-height: 900px;}

Da sich dies aber auf alle bilder auswirkt, muss man z.b. für den header eine andere größe angeben:

.header img {max-width:1000px !important;}

so hab ich das zumindest bei mir gelöst😉

aschweti · 12. Januar 2011 13:28

Ersteinmal Danke lisardo für Deine Mühe!

Leider funktioniert die Lösung bei mir nicht. Es geht ein Popup auf mit einer Info, dass der Server nicht gefunden werden konnte, was logisch erscheint, da der Link mit "http://www.domain.tldindex.php" beginnt, also ein Slash zwischen der tld und dem Dateinamen "index.php" zu fehlen scheint.

Zudem frage ich mich, was genau folgende Zeile in Deinem TS Code macht...

parameter.cObject.file.import.data = parameters<img src="typo3conf/ext/mm_forum//res/smilies/icon_eek.gif" alt="icon_eek.gif" />rigFile

Was hat das Popup mit der Extension mm_forum zu tun, die zudem bei dieser Präsenz garnicht installiert ist?

Danke und viele Grüße,

Alex

aschweti · 12. Januar 2011 14:29

Hi sportline105,

zumindest bei der "kj_imagelightbox2" verkleinert das zwar das Bild, die "Lightbox" darum bleibt allerings in der Größe unverändert, womit das Ergebnis wirklich unschön aussieht. Keine Ahnung, ob das bei anderen Lightbox-Extensions, z.B. bei Dir, zu besseren Ergebnissen führt?

Viele Grüße,

Alex

sportline105 · 12. Januar 2011 15:05

ich benutze die rzcolorbox. dort funktioniert es. daher auch mein tipp. per typoscript kam ich nicht zum erfolg, deswegen der umweg über css. ansehen kannst du es dir HIER

das design lässt sich durch 5 statische templates auch verändern8-)

aschweti · 12. Januar 2011 15:15

Danke für den Tipp! Sieht auf jeden Fall wesentlich besser aus, als bei der "kj_imagelightbox2".

Problematisch ist natürlich bei Deiner Lösung, das in jedem Fall das große Bild geladen werden muss, da das Bild via CSS ja nur runterskaliert wird.

Wenn es nicht nur um die eigene Seite geht, sondern diese am Ende des Tages in die Hände eines Kunden/Fremdredakteurs gegeben wird, kann das natürlich problematisch sein.

Trotzdem ist Deine Lösung immerhin ein brauchbarer "Fallschirm" ;-)

Nochmals Danke und viele Grüße,

Alex

sportline105 · 12. Januar 2011 15:19

ein unschönes problem gibt es da aber leider beim internet explorer 8 und früher 🙁 und zwar wird das bild in der originalgröße angezeigt, und nicht im passenden verhältnis skaliert#paralyzed#

lisardo · 12. Januar 2011 16:30

aschweti schrieb
Leider funktioniert die Lösung bei mir nicht. Es geht ein Popup auf mit einer Info, dass der Server nicht gefunden werden konnte, was logisch erscheint, da der Link mit "http://www.domain.tldindex.php" beginnt, also ein Slash zwischen der tld und dem Dateinamen "index.php" zu fehlen scheint.

Zudem frage ich mich, was genau folgende Zeile in Deinem TS Code macht...
parameter.cObject.file.import.data = parameters<img src="typo3conf/ext/mm_forum//res/smilies/icon_eek.gif" alt="icon_eek.gif" />rigFile
Was hat das Popup mit der Extension mm_forum zu tun, die zudem bei dieser Präsenz garnicht installiert ist?

Ups, ist mir gar nicht aufgefallen. Das ist ein Fehler von dem Quelltext-Parser in diesem Forum hier. Ein Doppelpunkt mit einem folgenden o wird nämlich ein Smiley ... ganz blöd, wenn es in einem Quelltext passiert, dann sieht man nämlich anstatt Doppelpunkt-o den Quelltext des Smiley-Icons ... :o

Also nochmal den Quelltext hier:

lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink{
	parameter.dataWrap >
	parameter.cObject = IMG_RESOURCE
	parameter.cObject.file.import.data = parameters:  origFile
	parameter.cObject.file.maxW = {$lightbox.width} 
	parameter.cObject.file.maxH = {$lightbox.height}
	ATagParams >
	ATagParams = rel="lightbox[lb{field:uid}]"
	ATagParams.insertData = 1
}

Aber Achtung: die beiden Leerzeichen nach parameters: in der 4. Zeile müssen raus.

Also so müsste auch die URL passen; bei mir funktioniert es, siehe das Bild in der rechten Spalte.

Gruß
Peter, TYPO3 @ lisardo (Augsburg)

aschweti · 12. Januar 2011 16:37

Hi Peter,

das ist allerdings unglücklich gelöst vom mm_forum-Editor.

Nun funktioniert alles perfekt und die Lösung ist natürlich "the way to go" 😃

Danke Dir, you are the man!!!!

Alex

stevee · 1. Februar 2012 02:34

Hallo zusammen
Falls Ihr das noch nicht gesehen habt, ich habe den Autor der Extension "rtelightbox" auf den Code und die Lösung hier auf der Seite aufmerksam gemacht und er hat das inzwischen eingebaut resp. korrigiert!

Nun funktionieren endlich alle Lightboxen im RTE wie gewünscht und verkleinern die Bilder!
Besten Dank nochmals 😃