Zum Inhalt springen

Lightbox in eigene Extension integrieren

Erstellt am 7. Juni 2013 · 4 Antworten · letzte Antwort am 7. Juni 2013

Tags: ViewHelper, Bilder, Frage

3dknut ·

#angry# Hallo alle zusammen,
ich bin gerade dabei, in meine eigens gebastelte Galerieextension eine Lightbox zu integrieren. Da die Bilder mit einem Wasserzeichen angezeigt werden, übergebe ich die einzelnen Bilder als cObject an Typoscript und bekomme von da die kombinierte Variante zurück.
Im Fluid sieht der Testaufruf so aus und funktioniert auch:

<f:cObject typoscriptObjectPath="img" data="uploads/tx_testapp/{image.imagename}" />

Und der dazugehörige Typoscript Code:

img = IMAGE
img {
    file = GIFBUILDER
    
    file {

      XY = 635,635
      format = png
      quality = 88
      
      10 = IMAGE
      10 {
        file.import.current = 1
        file.maxH = 635
        file.maxW = 635
      }
      20 = IMAGE
      20.file = fileadmin/templates/images/mandala/watermark.png
      20.mask = fileadmin/templates/images/mandala/watermark.png
    }
  }
}

Allerdings gibt es nun ein Problem. In Fluid erstelle ich per "f:link.page" den Link zum großen Bild.

                                                                         <f:link.page pageUid="{f:cObject(typoscriptObjectPath:'img',data:'uploads/tx_testapp/{image.imagename}')}" rel="lightbox">
    //- img2 ist das kleine Bild  
    <f:cObject typoscriptObjectPath="img2" data="uploads/tx_testapp/{image.imagename}" />
</f:link.page>

Ich versuche daher den Bildpfad des großen Bildes per "cObject" an den uri.image-Viewhelper zu übergeben. Leider wird der Pfad, der im href stehen müsste, leer angezeigt.

<a href="" rel="lightbox">
   <img width="150" height="350" alt="test" src="typo3temp/GB/testbild_04_97f1848d4f_96113ec2cc.png">
</a>

Ich hatte darauf hin noch versucht, den inline notierten cObject Teil noch in einen f:uri.image Viewhelper zu packen. Leider ist mir diese Verschachtelung nicht gelungen.

Hat jemand eine Idee, wie die Verschachtelung richtig sein muß oder gibts vieleicht ne andere Lösung ???
Danke schon mal.

Unbekannter Benutzer ·

Versuchs mal so:

<f:link.external uri="{f:cObject(typoscriptObjectPath:'img',data:'uploads/tx_testapp/{image.imagename}')}" defaultScheme="" rel="lightbox">
    //- img2 ist das kleine Bild  
    <f:cObject typoscriptObjectPath="img2" data="uploads/tx_testapp/{image.imagename}" />
</f:link.external>
3dknut ·

😉 Vielen Dank für die schnelle Antwort.
Leider wird dabei nicht nur der Pfad mit Bild übernommen, sondern der gesamte Img Tag.

<a href="<img src="typo3temp/GB/testbild_watermark_ce7176d852.png" width="635" height="635" alt="">" rel="lightbox">
    <img width="150" height="350" alt="" src="typo3temp/GB/testbild_3_2a8a428d85_af2b40177e.png">
</a>

Vieleicht muss doch irgendwie der uri.image viewhelper noch mit eingebastelt werden.

Unbekannter Benutzer ·

ah sorry, hab ich nicht drauf geachtet, du musst natürlich dann ein cObject IMG_RESOURCE benutzen anstatt IMAGE, d.h. einfach sowas:

img_res < img
img_res = IMG_RESOURCE

und dann im Viewhelper statt
typoscriptObjectPath:'img'
typoscriptObjectPath:'img_res'

Ich würde übrigens der Übersichtlichkeit halber vorschlagen nicht toplevel zu benutzen sondern sowas wie lib.img oder besser noch lib.gallery.img

3dknut ·

😃 Supi...
nun funktioniert es so wie es soll. Ich glaube mal, das Du mir ne Menge an Zeit gespart hast.
Man sieht wieder mal. Der Teufel liegt im Detail.

Nochmals vielen vielen Dank und ein schönes Wochenende.