[Frage] f:uri.image und f:image Problem [Gelöst]

  • mimii mimii
    Jedi-Ratsmitglied
    0 x
    577 Beiträge
    1 Hilfreiche Beiträge
    13. 10. 2017, 14:51

    Hallo ins Forum,

    wie krieg ich den Bildpfad in in den <source>? Mein Fluid sieht so aus
    [code]...
    <div class="carousel-inner">
    <f:for each="{carouselImg}" as="carouselImage" iteration="i">
    <f:if condition="{i.isFirst}">
    <f:then>
    <div class="carousel-item active">
    </f:then>
    <f:else>
    <div class="carousel-item">
    </f:else>
    </f:if>
    <picture>
    <source srcset="???" media="(min-width:2000)" />
    <source srcset="???" media="(min-width:1400)" />
    <source srcset="???" media="(min-width:0px)" />
    <f:image image="{carouselImage}" class="d-block w-100 img-fluid" alt="{fileReference.alternative}"/>
    </picture>
    </div>
    </f:for>
    </div>
    ...
    [/code]
    Es handelt sich um einen Slider der auch funktioniert, derzeit aber nur mit dem Bild, das über <f:image...> ausgegeben wird. Ich möchte aber im <picture> drei unterschiedliche Bildgrößen bereitstellen, die ich über das image Manipulation erstelle.
    Das HTML sieht für ein Bild dann so aus, das srcset bleibt einfach leer.
    [code]<picture>
    <source srcset="" media="(min-width:2000)" />
    <source srcset="" media="(min-width:1400)" />
    <source srcset="" media="(min-width:0px)" />
    <img class="d-block w-100 img-fluid" src="fileadmin/user_upload/bilder/carousel/bild-1.jpg" width="2000" height="500" alt="Bild 1" title="Bild 1" />
    </picture>
    [/code]

    Ich habe f:uri.image und f:imgage im srcset probiert, vielleicht ist meine Schreibweise falsch gewesen? Wie wäre hier denn die korrekte Schreibweise, um auf das entsprechnede Bild zuzugreifen?
    Oder funktioniert der <picture> Tag nicht?

    Probiert habe ich auch mal einen festen Pfad
    [code]<source srcset="{f:uri.image(src:'user_upload/bilder/carousel/bild-1.jpg')}" media="(min-width:2000)" />
    [/code]
    Dann sieht das HTML so aus:
    [code]<source srcset="{f:uri.image(src:'user_upload/bilder/carousel/bild.jpg'), treadIdAsReference:1}" media="(min-width:2000)">
    [/code]

    Danke für n Tipp und Gruß
    mimii

  • Teisinger Teisinger
    Jedi-Meister
    0 x
    331 Beiträge
    23 Hilfreiche Beiträge
    19. 10. 2017, 15:27 - Lösung

    Welche Fluid Version? Bzw. Welche Typo3 Version?

    So zum Beispiel Typo3 7:

    [code]<picture>
    <source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '1920')}" media="(min-width: 1601px)">
    <source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '1600')}" media="(min-width: 1334px)">
    <source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '1333')}" media="(min-width: 1001px)">
    <source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '1000')}" media="(min-width: 801px)">
    <source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '800')}" media="(min-width: 601px)">
    <source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '600')}" media="(min-width: 401px)">
    <source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '400')}" media="(min-width: 321px)">
    <source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '320')}" media="(min-width: 200px)">
    <img src="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '{data.imagewidth}')}"
    {f:if(condition: '{data.imagewidth}', then: 'width="{data.imagewidth}"')}
    {f:if(condition: '{data.imageheight}', then: 'height="{data.imageheight}"')}
    title="{column.media.title}"
    alt="{column.media.alternative}">
    </picture>[/code]

    und hier für Typo3 8 (musst du die werte halt anpassen):
    [code]<picture>
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '1920')}" media="(min-width: 1601px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '1600')}" media="(min-width: 1334px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '1333')}" media="(min-width: 1001px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '1000')}" media="(min-width: 801px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '800')}" media="(min-width: 601px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '600')}" media="(min-width: 401px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '400')}" media="(min-width: 321px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '320')}" media="(min-width: 200px)">
    <img src="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '{data.imagewidth}')}"
    {f:if(condition: '{data.imagewidth}', then: 'width="{data.imagewidth}"', else: 'width="{w}"')}
    {f:if(condition: '{data.imageheight}', then: 'height="{data.imageheight}"', else: 'height="{h}"')}
    />
    </picture>
    [/code]

    https://github.com/groundstack-org


  • 1
  • freeatweb freeatweb
    Jedi-Meister
    0 x
    267 Beiträge
    4 Hilfreiche Beiträge
    18. 10. 2017, 14:49

    Hallo,

    für solche Anforderungen kann ich die Extension sms-responsive-images empfehlen.

    https://github.com/sitegeist/sms-responsive-images

    Anleitung/Blog: https://techblog.sitegeist.de/responsive-images-with-typo3-8-7/

    Lg

  • mimii mimii
    Jedi-Ratsmitglied
    0 x
    577 Beiträge
    1 Hilfreiche Beiträge
    19. 10. 2017, 09:14

    Hallo
    und vielen Dank für die Antwort. Die Extension habe ich bereits gefunden, ich wollte es jedoch ohne lösen und frage mich einfach, warum im <source srcset="{f:uri.image(src:'.....> keine Ausgabe erfolgt, bzw einfach nichts drin steht. Setze ich <f:uri.image....> einfach ins Fluidtemplate wird mir der Pfad korrekt angezeigt.

    Ich stöbere seit Tagen im Web und finde keinen Hinweis, warum es inline nicht funktioniert :-/

    Viele Grüße
    mimii

  • freeatweb freeatweb
    Jedi-Meister
    0 x
    267 Beiträge
    4 Hilfreiche Beiträge
    19. 10. 2017, 10:18

    Hallo,

    ich würde die URL der Bilder anders auflösen.

    Versuch mal: <f:image src="{carousel.ImageoriginalResource.publicUrl}" /> (ohne treatIdAsReference!)

    Funktioniert natürlich nur dann, wenn die Bilder mittels FAL eingebunden sind.

    Lg

  • mimii mimii
    Jedi-Ratsmitglied
    0 x
    577 Beiträge
    1 Hilfreiche Beiträge
    19. 10. 2017, 10:57

    THX für die Rückmeldung,

    ich glaube der Fehler liegt ganz wo anders. Ich habe den Pfad im <source ....> mal fest reingeschrieben und er wurde auch im HTML angezeigt. Trotzdem wurde nicht das Bild aus dem <source ...> Tag genommen sondern immer das aus dem <img ...> weiter unten.

    [code]<picture>

    <!-- Dieser Code wird ignoriert -->
    <source srcset="fileadmin/user_upload/bilder/carousel/bild-1_gross.jpg" media="(min-width:2000)" />
    <source srcset="fileadmin/user_upload/bilder/carousel/bild-1_mittel.jpg" media="(min-width:1400)" />
    <source srcset="fileadmin/user_upload/bilder/carousel/bild-1_klein.jpg" media="(min-width:0px)" />

    <!-- Dieser Code wird wird IMMER genommen -->
    <f:image image="{carouselImage}" class="d-block w-100 img-fluid" alt="{fileReference.alternative}"/>

    </picture>
    [/code]

    Somit denke ich, dass einfach das <picture> irgendwie ignoriert wird.

    In 6.2 gab es mal sowas wie LayoutKey, wo man einstellen konnte welche Variante von Bildausgabe man haben will (https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Image/Index.html). Das steht jetzt zwar unter jetzt auch noch unter der Typoscript Reference latest, aber ich weiß nicht so recht, wie ich das jetzt mit dem Fluid in verbindung bringen könnte *stöhn*

    Viele Grüße
    mimii

  • Teisinger Teisinger
    Jedi-Meister
    0 x
    331 Beiträge
    23 Hilfreiche Beiträge
    19. 10. 2017, 15:27

    Welche Fluid Version? Bzw. Welche Typo3 Version?

    So zum Beispiel Typo3 7:

    [code]<picture>
    <source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '1920')}" media="(min-width: 1601px)">
    <source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '1600')}" media="(min-width: 1334px)">
    <source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '1333')}" media="(min-width: 1001px)">
    <source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '1000')}" media="(min-width: 801px)">
    <source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '800')}" media="(min-width: 601px)">
    <source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '600')}" media="(min-width: 401px)">
    <source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '400')}" media="(min-width: 321px)">
    <source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '320')}" media="(min-width: 200px)">
    <img src="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '{data.imagewidth}')}"
    {f:if(condition: '{data.imagewidth}', then: 'width="{data.imagewidth}"')}
    {f:if(condition: '{data.imageheight}', then: 'height="{data.imageheight}"')}
    title="{column.media.title}"
    alt="{column.media.alternative}">
    </picture>[/code]

    und hier für Typo3 8 (musst du die werte halt anpassen):
    [code]<picture>
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '1920')}" media="(min-width: 1601px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '1600')}" media="(min-width: 1334px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '1333')}" media="(min-width: 1001px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '1000')}" media="(min-width: 801px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '800')}" media="(min-width: 601px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '600')}" media="(min-width: 401px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '400')}" media="(min-width: 321px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '320')}" media="(min-width: 200px)">
    <img src="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '{data.imagewidth}')}"
    {f:if(condition: '{data.imagewidth}', then: 'width="{data.imagewidth}"', else: 'width="{w}"')}
    {f:if(condition: '{data.imageheight}', then: 'height="{data.imageheight}"', else: 'height="{h}"')}
    />
    </picture>
    [/code]

    https://github.com/groundstack-org

  • mimii mimii
    Jedi-Ratsmitglied
    0 x
    577 Beiträge
    1 Hilfreiche Beiträge
    20. 10. 2017, 10:42

    OMG,

    war das ein Hickhack. Es läuft mit
    [code]<source srcset="{f:uri.image(src:'{carouselImage.uid}', treatIdAsReference:'1', cropVariant: 'gross')}" media="(min-width: 1401px)">[/code]

    THX für deine Hilfe
    mimii

  • 1