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!

Eure Meinung zu dem Artikel ist gefragt! Schreibt mir ein Kommentar

Hat Euch der Artikel weitergeholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!

Hat Euch der Artikel weitergeholfen oder gefallen? Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!Ich bin freiberuflicher TYPO3-Entwickler, Web-Entwickler und Frontend-Entwickler. Ich arbeite im und für das Web etwas mehr als 12 Jahre. Mehr Infos zu der TYPO3 Internetagentur - INGENIUMDESIGN.

Leave a Reply

2 Kommentare

  1. Moin… ich hätte da mal ne Frage. Ich habe das Problem dass Bilder die per ‚textpic‘ Inhaltselement angelegt wurden, manchmal kleiner im Frontend dargestellt werden als Originalgröße. Dabei werden im Frontend im tags width und height auf andere Werte gesetzt, von denen ich weder weiß wo sie gesetzt werden, noch warum sie gesetzt werden und warum sie gerade auf diese Werte gesetzt werden. Hättest du da evtl. nen heißen Tipp für mich?

Next ArticleTYPO3 - Insert Records bzw. Datensatz einfügen auslesen