Zum Inhalt springen

f:uri.image und f:image Problem

Erstellt am 13. Oktober 2017 · 6 Antworten · letzte Antwort am 20. Oktober 2017

Tags: Fluid, ViewHelper, Frage

mimii ·

Hallo ins Forum,

wie krieg ich den Bildpfad in in den <source>? Mein Fluid sieht so aus

...
<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>
...

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.

<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>

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

<source srcset="{f:uri.image(src:'user_upload/bilder/carousel/bild-1.jpg')}" media="(min-width:2000)" />

Dann sieht das HTML so aus:

<source srcset="{f:uri.image(src:'user_upload/bilder/carousel/bild.jpg'), treadIdAsReference:1}" media="(min-width:2000)">

Danke für n Tipp und Gruß
mimii

mimii ·

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 ·

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 ·

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.

<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>

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/m/typo3/reference-typoscript/main/en-us/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 · · Beste Antwort

Welche Fluid Version? Bzw. Welche Typo3 Version?

So zum Beispiel Typo3 7:

<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>

und hier für Typo3 8 (musst du die werte halt anpassen):

<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>
mimii ·

OMG,

war das ein Hickhack. Es läuft mit

<source srcset="{f:uri.image(src:'{carouselImage.uid}', treatIdAsReference:'1', cropVariant: 'gross')}" media="(min-width: 1401px)">

THX für deine Hilfe
mimii