TYPO3 6.2.x – IMAGE auslesen

Mit der neuen TYPO3 Version 6.2.x hat sich im Bereich Bilder/IMAGE auslesen einiges im typoscript- und Datenbankaufbau geändert.

Daher hier eine neue Lösung wie Ihr den IMAGE Tag auslesen könnt:

Hier einmal die Beschreibung für den Tag IMAGE, da es hier einige Änderungen für responsive Bilder gibt! Daher sollte sich jeder mal die Anleitung anschauen: http://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Image/Index.html

Auch den Tag FILES sollte sich jeder einmal genauer anschauen, dort gibt es auch ein Beispiel wie Ihr ein Bild aus einem Datensatz auslesen könnt: http://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Files/Index.html

Hier ein Beispiel, wie man aus einen Datensatz das Bild ausliest, mein Beispiel ist in einem HMENU/TMENU und daher ohne UID ! Falls Ihr von einem bestimmten Datensatz ein Bild auslesen wollt, müsst Ihr hier eine UID angeben (siehe FILE Bsp.):

#IMAGE
        5=FILES
        5{
          
          references{
            table=tt_content
            fieldName=image
          }
          
          renderObj=IMAGE
          renderObj{
            wrap=<div class=“wine-item-image-wrap“>|</div>
            file{
              treatIdAsReference=1
              #width = 470c
              #height = 470c
              #maxW = 470c
              #maxH = 470c
              import.data=file:current:publicUrl
            }
            altText.data=file:current:title
            emptyTitleHandling=useAlt
            layoutKey=default
            layout{
              default{
                element=<imgsrc=“###SRC###“###PARAMS######ALTPARAMS######BORDER######SELFCLOSINGTAGSLASH###>
                source=
              }
              srcset{
                element=<imgsrc=“###SRC###“srcset=“###SOURCECOLLECTION###“###PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###>
                source=|*|###SRC######SRCSETCANDIDATE###,|*|###SRC######SRCSETCANDIDATE###
              }
            }
            
            sourceCollection{
              small{
                width=200
                srcsetCandidate=600w
                mediaQuery=(max-device-width:600px)
                dataKey=small
              }
              smallRetina{
                if.directReturn=1
                width=200
                pixelDensity=2
                srcsetCandidate=600w2x
                mediaQuery=(max-device-width:600px)AND(min-resolution:192dpi)
                dataKey=smallRetina
              }
            }
          }
          
          
        }
        #END IMAGE

Den Punkt “Layout” am besten in der Docu IMAGE einmal genau durchlesen. Ich werde dazu noch mal eine genaue Anleitung schreiben, falls Ihr Interesse habt.

Schriebt mir Eure Lösungen gerne zu dem Thema in die Kommentare!