TYPO3 Tutorial: SourceSet via Fluid erstellen


In diesem kleinen Tutorial zeige ich, wie man via Fluid ein SourceSet erstellen kann. Dies wird mit URI.Image gemacht und nimmt nur wenige Zeilen Code!

Für diese Anleitung nutze ich dieses HTML Snippet von W3Schools, man kann aber auch einfach über dem gewünschten HTML Objekt <style> Regeln schreiben. Ist aber nicht so schön, von der Wartbarkeit her.

 <picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture> 

Dieser Code zeigt, dass ein Fallback Image, also wenn keiner der gewünschten Auflösungen betroffen ist, an. Ansonsten soll bei mind. 465px weiße Blumen und ab 650px pinke Blumen als Hintergrund angezeigt werden. Wir können jetzt mit nur einem Bild und Fluid gleich 3 Bilder generieren lassen:

 <picture>
  <source media="(min-width:650px)" srcset="{f:uri.image(src: 'EXT:myext/Resources/Public/typo3_logo.png', width: 650)}">
  <source media="(min-width:465px)" srcset="{f:uri.image(src: 'EXT:myext/Resources/Public/typo3_logo.png', width: 465)}">
  <img src="{f:uri.image(src: 'EXT:myext/Resources/Public/typo3_logo.png')}" alt="Flowers" style="width:auto;">
</picture> 

Auch via CSS (in der HTML Datei) geht das:

<style>
@media only screen and (max-width: 600px) {
  body {
    background-image: url('{f:uri.image(src: 'EXT:myext/Resources/Public/typo3_logo.png', width: 550)}');
  }
}
</style>

Und so kann man sich schnell und einfach ein SourceSet basteln. Nicht nur, dass es im Fluid dann schnell gemacht werden kann, der Redaktuer im Backend muss nur ein Bild hochladen, den Rest übernimmt Fluid.


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.