"Wer" generiert/rendert eigentlich die folgenden Elemente?

Hallo!

Ich komme einfach nicht weiter bei meinem leidigen Problem mit den Image Captions.
Siehe Beitrag hier

Mir ist einfach nicht klar "WER" eigentlich diese dl/dt/dd Tags generiert und wo ich da eingreifen kann?
Habe ein einfaches Beispiel aus der TS-Ref verwendet um einfach mal eine Caption zu bauen und mit einem Link zu versehen...

tmp.caption < tt_content.image.20.caption.1
tmp.caption {
  10 = TEXT
  10.value = test
  10.typolink {
    title = caption
    parameter.cObject = IMG_RESOURCE
    parameter.cObject.file = fileadmin/image01.jpg
    parameter.cObject.file.maxW = 600
    parameter.cObject.file.maxH = 600
    ATagParams = rel="lightbox[mySet]"
  }
}

tt_content.image.20.caption.1 >
tt_content.image.20.caption.1 < tmp.caption

#tt_content.image.20 {
#  imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap">|</div>
#  imageStdWrapNoWidth.wrap = <div class="csc-textpic-imagewrap">|</div>
#  imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn">|</div>

  #caption.1.typolink.parameter {
  #  typolink = 1
  #  field=image_link
  #  extTarget=_blank
  #  listNum.stdWrap.data=register : IMAGE_NUM_CURRENT
  #} 
  
#  rendering {
#    dl {
#      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow">|</div>
#      noRowsStdWrap.wrap =
#      oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###">|</dl>
#      imgTagStdWrap.wrap = <dt>|</dt>
#      editIconsStdWrap.wrap = <dd>|</dd>
      
      #caption {
      #  required = 1
      #  wrap = <dd class="csc-textpic-caption">|</dd>
      #}
#    }
#  }
#}

Aber auch das funktioniert nicht?! Wie und vor allem WO kann ich die Caption überschreiben um daraus einen Link zu machen?
Zur Info:
Ich verwende Perfect Lightbox2 - muss ich da eingreifen oder beim Renderung von tt_content?

Ich raff's nicht???
Danke
montharon

Schau doch einfach mal mit dem Template Analyzer ins css_styled_content - dort wirst du fündig. Und spätestens dann ist auch klar, was wie zu überschreiben ist.

einpraegsam.net schrieb

Schau doch einfach mal mit dem Template Analyzer ins css_styled_content - dort wirst du fündig. Und spätestens dann ist auch klar, was wie zu überschreiben ist.

Genau da wollte ich ja eingentlich ansetzen mit:

tt_content.image.20.caption.1 {
  typlink {
    ...
  }
}

Siehe Template Analyzer

1890:   caption {
1891:     1 = TEXT
1892:     1 {
1893:       field = imagecaption
1894:       required = 1
1895:       parseFunc =< lib.parseFunc
1896:       br = 1
1897:       split.token.char = 10
1898:       split.token.if.isPositive = {$styles.content.imgtext.imageTextSplit} + {$styles.content.imgtext.captionSplit}
1899:       split.returnKey.data = register : IMAGE_NUM_CURRENT
1900:     }
1901:   }

In der Ausgabe sehe ich aber trotzdem nur ein
<dd class="csc-textpic-caption">Test<br /></dd>

Irgendwas überschreibt mir alles wieder?!

Edit:
Und dies hier habe ich auch schon probiert:

tt_content.image.20 {
  imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap">|</div>
  imageStdWrapNoWidth.wrap = <div class="csc-textpic-imagewrap">|</div>
  imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn">|</div>

  caption.1.typolink.parameter {
    typolink = 1
    field=image_link
    extTarget=_blank
    listNum.stdWrap.data=register : IMAGE_NUM_CURRENT
  }

Danke
montharon

Mahlzeit!

Bin jetzt so weit:

tt_content.image.20 {
  imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap">|</div>
  imageStdWrapNoWidth.wrap = <div class="csc-textpic-imagewrap">|</div>
  imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn">|</div>

  caption.1.override.if.isTrue.field = image_zoom
  caption.1.typolink {
    parameter.override.cObject = IMG_RESOURCE
    parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
    parameter.override.cObject.file.maxW = {$plugin.perfectlightbox.lightBoxMaxW}
    parameter.override.cObject.file.maxH = {$plugin.perfectlightbox.lightBoxMaxH}  
    parameter.override.if.isTrue.field = image_zoom
    parameter.override.if.isFalse.field = image_link
  }
 
  rendering {
    dl {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow">|</div>
      noRowsStdWrap.wrap =
      oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###">|</dl>
      imgTagStdWrap.wrap = <dt>|</dt>
      editIconsStdWrap.wrap = <dd>|</dd>
      
      caption {
        required = 1
        wrap = <dd class="csc-textpic-caption">|</dd>
      }
    }
  }
}

Allerdings wird der Caption Link IMMER angezeigt - was ich nicht will - soll nur kommen wenn auch wirklich eine Caption da ist - und zweitens habe ich hier die Parameter für Lightbox noch nicht drinnen...

Danke
montharon

So, nun ein paar Stunden später bin ich so weit:

tt_content.image.20 {
  imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap">|</div>
  imageStdWrapNoWidth.wrap = <div class="csc-textpic-imagewrap">|</div>
  imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn">|</div>

  caption {
    required = 1
    1.override.if.isTrue.field = image_zoom
    typolink {
      parameter.override.cObject = IMG_RESOURCE
      parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
      parameter.override.cObject.file.maxW = {$plugin.perfectlightbox.lightBoxMaxW}
      parameter.override.cObject.file.maxH = {$plugin.perfectlightbox.lightBoxMaxH}  
      parameter.override.if.isTrue.field = image_zoom
      parameter.override.if.isFalse.field = image_link
     
      userFunc = tx_perfectlightbox->useGlobal
    }
  }
  
  rendering {
    dl {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow">|</div>
      noRowsStdWrap.wrap =
      oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###">|</dl>
      imgTagStdWrap.wrap = <dt>|</dt>
      editIconsStdWrap.wrap = <dd>|</dd>
      
      caption {
        required = 1
        wrap = <dd class="csc-textpic-caption">|</dd>
      }
    }
  }
}

Ich habe jetzt schon die Links auf der Seite - auch die Paramater für die Lightbox sind gesetzt.
Allerdings ist der Link der Caption nicht richtig, und zeigt IMMER auf das selbe Bild?!

Kann mir jemand helfen?
DANKE
montharon

Hi Montharon,
ja, das Problem habe ich auch. Mit

...
parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
...

sagen wir ja auch genau das: Setze Link auf das LETZTE Bild dieses Contents...

Das Problem ist schlicht, dass wir mehr als ein Bild einsetzen wollen, aber nur das letzte ansprechen können...
#angry#
Hast Du schon einen Ansatz?
Grüße Liz

Hi Montharon,
also, ich habe eine etwas andere Ausganssituation, daher kannst du das nicht 1:1 übernehmen, aber wenn du einen Moment draufschaust, siehst du, wo du ansetzen musst.

Hier die Umsetzung für eine Lupe unter JEDEM Bild, mit Link.

Wichtig wird es bei IMG_RESSOURCE...

tt_content.image.20 {
  caption {
    1 {
      required >
      prepend = IMAGE
      prepend {
        if.isTrue.field = image_zoom
        wrap = <span class="picClickEnlarge">|</span>
        file = fileadmin/templates/image-click.png
        imageLinkWrap = 1
        imageLinkWrap {
          enable = 1
          typolink {
            parameter.cObject = COA
            parameter.cObject {
              10 = IMG_RESOURCE
              10.file {
                 import = uploads/pics/
                 import.field = image
                 import.listNum.stdWrap {
                    data = register:IMAGE_NUM
                 }
              }
            }
            # Add the "rel" attribute needed to activate the lightbox effect.
            ATagParams = rel="lightbox"
            ATagParams.override = rel="lightbox[sb{field:uid}]"
            ATagParams.insertData = 1
            ATagParams.if.isTrue.field = image_zoom
          }
        }
      }
    }
  }
}

Das funktioniert jetzt (auch wenn bei zwei Reihen Bildern, die Reihenfolge lustig wird).

Sag mal, ob dir das hilft, bzw. falls ja: bitte post des TS. Merci.

Grüße
Liz

Hallo und guten Morgen Liz!

Also, erst einmal VIELEN herzlichen Dank für deine Antwort!
Ich habe dein Script-Schnipsel als Ausgangspunkt verwendet und bin zu folgendem Code gekommen:

tt_content.image.20 {
  caption {
    1 {
      required = 1
      override.if.isTrue.field = image_zoom
      typolink {
        parameter.listNum.stdWrap.if.isTrue.field = image_link
        parameter.override {
          cObject = IMG_RESOURCE
          cObject.file {
            import = uploads/pics/
            import.field = image
            import.listNum.stdWrap {
              data = register:IMAGE_NUM
            }
            maxW = {$plugin.perfectlightbox.lightBoxMaxW}
            maxH = {$plugin.perfectlightbox.lightBoxMaxH}
          }
          if.isTrue.field = image_zoom
          if.isFalse.field = image_link
        }
        ATagParams = rel="lightbox"
        ATagParams.override = rel="lightbox[sb{field:uid}]"
        ATagParams.insertData = 1
        ATagParams.if.isTrue.field = image_zoom
      }
    }
  }
}

Das funktioniert auch prächtig, ausser dass die Captiom IMMER angezeigt wird,
also auch wenn gar keine beim Bild hinterlegt ist!
Jetzt habe ich aber ehrlich gesagt grosse Verständnisprobleme mit den ganzen override's
und required's usw., deshalb würde ich den Code gerne Zeile für Zeile besprechen?!
Ich weiss, da fehlt's bei mir schon bei den Grundlagen 🙁

tt_content.image.20 {
  caption {
    1 {
      required = 1

Required würde in dem Falle bedeuten, dass wenn die Caption leer ist, alle darauf
folgenden Befehle ignoriert/abgebrochen werden, oder wie ist das?

override.if.isTrue.field = image_zoom

Überschreibe was?, wenn das Feld image_zoom in der Datenbank gesetzt wurde

typolink {
        parameter.listNum.stdWrap.if.isTrue.field = image_link
        parameter.override {

Spätestens jetzt steig ich aus. Erstens kann ich mir der Beschreibung in der TSRef
nix anfangen und zweitens was hat das da mit dem typolink zu tun?
Und was bitte macht eigentlich das override GENAU?

          cObject = IMG_RESOURCE
          cObject.file {
            import = uploads/pics/
            import.field = image
            import.listNum.stdWrap {
              data = register:IMAGE_NUM
            }
            maxW = {$plugin.perfectlightbox.lightBoxMaxW}
            maxH = {$plugin.perfectlightbox.lightBoxMaxH}
          }
          if.isTrue.field = image_zoom
          if.isFalse.field = image_link
        }
        ATagParams = rel="lightbox"
        ATagParams.override = rel="lightbox[sb{field:uid}]"
        ATagParams.insertData = 1
        ATagParams.if.isTrue.field = image_zoom

Das ist mir eigentlich klar, bis auf if.isTrue.field = image_zoom und
if.isFalse.field = image_link Werden dann die die davor stehenen Befehle
ignoriert, oder wird da ein Feld gesetzt? Und dann wäre da noch das insertData
Was macht das? Heisst das, dass {field:uid} eingesetzt wird?

Witzig - ich bin seit 13 Jahren hauptberuflich in der Softwareentwicklung tätig
und habe schon mehrere Programmiersprachen gelernt, aber Typo3 stellt mich
von der Syntax her immer noch mächtig auf die Probe. Irgendwas will mir da nicht einleuchten 😉

Danke
montharon

Hi montharon,
also, ich habe dein TS mal bei mir eingesetzt und das funktioniert, wie es soll: Ist eine Caption da, dann wird diese auch Lightbox-verlinkt, ist keine da, dann ist auch kein Lightbox-Link unterhalb des Bildes da. Der Link vom Bild auf die Lightbox ist natürlich noch aktiv, mit dem haben wir hier nix gemacht - ist das das Prob?

:o

??

Grüße
Liz

Hi Liz,

nein, bei mir funktioniert's eben nicht?! Die Caption ist IMMER da und heisst dann irgendwie
/uploads/pic/....

So funktioniert's dann auch bei mir witzigerweise:

tt_content.image.20 {
  imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap">|</div>
  imageStdWrapNoWidth.wrap = <div class="csc-textpic-imagewrap">|</div>
  imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn">|</div>

  caption {
    1.override.if.isTrue.field = image_zoom
    typolink {
      parameter.listNum.stdWrap.if.isTrue.field = image_link
      parameter.override {
        cObject = IMG_RESOURCE
        cObject.file {
          import = uploads/pics/
          import.field = image
          import.listNum.stdWrap.data = register:IMAGE_NUM
          maxW = {$plugin.perfectlightbox.lightBoxMaxW}
          maxH = {$plugin.perfectlightbox.lightBoxMaxH}  
        }
        if {
          isTrue.field = image_zoom
          isFalse.field = image_link
        }
      }
      ATagParams = rel="lightbox"
      #tx_perfectlightbox_imageset
      #tx_perfectlightbox_presentation
      ATagParams.override = rel="lightbox[sb{field:uid}]"
      ATagParams.insertData = 1
      ATagParams.if.isTrue.field = image_zoom
    }
  }
  
  rendering {
    dl {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow">|</div>
      noRowsStdWrap.wrap =
      oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###">|</dl>
      imgTagStdWrap.wrap = <dt>|</dt>
      editIconsStdWrap.wrap = <dd>|</dd>
      
      caption {
        required = 1
        wrap = <dd class="csc-textpic-caption">|</dd>
      }
    }
  }
}

Wenn ich so schreibe, funktioniert's NICHT...

tt_content.image.20 {
  imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap">|</div>
  imageStdWrapNoWidth.wrap = <div class="csc-textpic-imagewrap">|</div>
  imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn">|</div>

  caption {
    1 {
      override.if.isTrue.field = image_zoom
      typolink {
        parameter.listNum.stdWrap.if.isTrue.field = image_link
        parameter.override {
          cObject = IMG_RESOURCE
          cObject.file {
            import = uploads/pics/
            import.field = image
            import.listNum.stdWrap.data = register:IMAGE_NUM
            maxW = {$plugin.perfectlightbox.lightBoxMaxW}
            maxH = {$plugin.perfectlightbox.lightBoxMaxH}
          }
          if {
            isTrue.field = image_zoom
            isFalse.field = image_link
          }
        }
        ATagParams = rel="lightbox"
        #tx_perfectlightbox_imageset
        #tx_perfectlightbox_presentation
        ATagParams.override = rel="lightbox[sb{field:uid}]"
        ATagParams.insertData = 1
        ATagParams.if.isTrue.field = image_zoom
      }
    }
  }

  rendering {
    dl {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow">|</div>
      noRowsStdWrap.wrap =
      oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###">|</dl>
      imgTagStdWrap.wrap = <dt>|</dt>
      editIconsStdWrap.wrap = <dd>|</dd>

      caption {
        required = 1
        wrap = <dd class="csc-textpic-caption">|</dd>
      }
    }
  }
}

Man beachte das
caption {
1 {
...
...

Komisch?!

Danke
montharon

Hi Montharon,

Dass bei fehlender Caption, dann der Bildname+Link gezeigt wird, das ist hier auch so, aber nur, wenn ich die Caption nicht auf require=1 habe.

Noch mal zu Deinen Beispielen, da war ich zu schnell mit "das ist komisch" Denn, das hier:

...
  caption {
    1.override.if.isTrue.field = image_zoom
    typolink {
      parameter.listNum.stdWrap.if.isTrue.field = image_link
      parameter.override {
...

ist was anderes als das da:

...
  caption {
    1 {
      override.if.isTrue.field = image_zoom
      typolink {
        parameter.listNum.stdWrap.if.isTrue.field = image_link
        parameter.override {
...

im zweiten Beispiel klammerst du alles in die 1. Also auch den typolink etc. Klärt sich damit der Nebel?

Ansonsten müsst ich mal gucken...

Grüße
Liz

Hallo Liz,

also du hast ja geschrieben, dass du mein Typoscript getestet und die Caption nicht immer angezeigt bekommen hast? Sehe ich das richtig?

Ich habe sämtliche Versuche unternommen die Caption zu unterdrücken und habe an den unterschiedlichsten Stellen das require = 1 eingebaut - ohne Erfolg, z.B.:

  caption {
    required = 1
    1 {
      required = 1
      override.if.isTrue.field = image_zoom
      typolink {
        parameter.listNum.stdWrap.if.isTrue.field = image_link
        parameter.override {
          cObject = IMG_RESOURCE
          cObject.file {
            import = uploads/pics/
            import.field = image
            import.listNum.stdWrap.data = register:IMAGE_NUM
            maxW = {$plugin.perfectlightbox.lightBoxMaxW}
            maxH = {$plugin.perfectlightbox.lightBoxMaxH}
          }
          if {
            isTrue.field = image_zoom
            isFalse.field = image_link
          }
        }
        ATagParams = rel="lightbox"
        #tx_perfectlightbox_imageset
        #tx_perfectlightbox_presentation
        ATagParams.override = rel="lightbox[sb{field:uid}]"
        ATagParams.insertData = 1
        ATagParams.if.isTrue.field = image_zoom
      }
    }
  }

Mir ist schon klar, dass es ein Unterschied ist ob ich alles in die 1 klammere oder nicht.
Mein Problem ist nur, dass ich nicht weiss, was richtig ist?
Ich dachte es wäre logisch alles in das 1 zu klammern, aber anscheinend liege ich da falsch?!
Wie ist es nun richtig?
Und WOHIN muss ich das required setzen?

Und dann habe ich noch folgendes Problem?
Lightbox Parameter

Irgendwie muss ich das noch schaffen, dann funktioniert alles perfekt und nach meinen Vorstellungen!

VIELEN DANK Liz!
montharon

Hi Montharon,
zur Hölle mit dem required.#evil#
Ich habe gerade folgendes getestet:

TYPO3 4.3.1:
tt_content.image.20.caption.1.required = 1
funkt, an aus wiedewillst

TYPO3 4.3.2:
tt_content.image.20.caption.1.required = 1
funkt, an aus wiedewillst

TYPO3 4.3.3:
tt_content.image.20.caption.1.required = 1
funkt nicht, ist immer 0
wasndasfürnbug!?!?

Bitte gib mal Info, mit was Du da arbeitest - Merci.
Falls sonst noch jemand mit liest: kann man das bestätigen?
Grüße Liz

Hi Liz,

ich arbeite hier mit 4.3.3
Strange was du da schreibst....

Zurück zum Problem:
Was wäre denn nun richtig? Du weisst schon, das Ding mit dem 1 unde den Klammern...

Kannst du mir bei der anderen Sache auch noch Tipps geben?
Rel Paramter

VIELEN LIEBEN DANK!
montharon

Hi Montharon,
shit happens... Das Script von dir, das ich eingefügt hatte und wo ich dich fragte, was denn los sei - gehtdoch, das ist richtig. Also:

...
tt_content.image.20.caption.1.required = 1
...

ISSOKE. Geht halt grad net in 4.3.3...

Das mit den Lightbox-Parametern würd ich spontan mal so versuchen:

# anstatt
...
ATagParams.override = rel="lightbox[lb{field:uid}]"
# sowas wie
ATagParams.override = rel="lightbox[presentlb{field:uid}]"
...

tell me if that works - merci

Grüße Liz

Hallo Liz,

ATagParams.override = rel="lightbox[presentlb{field:uid}]"

Das ist schon richtig, nur setzt du da für JEDEN Link ja das "presentlb....." und das ist nicht richtig
Man muss da unterscheiden denke ich, also so:
Siehe einfach meinen anderen Beitrag unten...
Params

Danke
montharon