Ein responsives Webdesign mit Typo3 (Teil 7)

Source Set

In Teil 6 unseres Tutorials haben wir die Seite responsiv gemacht und das Template passt sich größtenteils den Viewports an. Widmen wir uns nun den Bildern, die sich in Abmessung und Dateigröße ja auch automatisch anpassen sollen.

Wie bereits erwähnt sind Bilder und Menüs die Knackpunkte responsiven Webdesigns. Typo3 bringt aber der 6er Version aber eine komfortable Lösung mit.

SourceSet und Typo3

Die nachfolgenden Schritte basieren auf dem Blog Beitrag von Sven Wolfermann auf Typo3Blogger. Im Typoscript Template muss zunächst das aktuelle CSS Styled Content eingebunden sein.

CSS Styled Content
image-320

CSS Styled Content

Anschließend kann man entweder über den Konstanteneditor den Wert setzen:

Konstanten Editor
image-321

Konstanten Editor

oder den Wert händig in die Kosntanten einschreiben:

styles.content.imgtext.maxWInText = 0
styles.content.imgtext.layoutKey = srcset
styles.content.imgtext.linkWrap.width = 800

Typo3 ist hier auch relativ offen, welche Technologie man bevorzugt. Ich zeige hier das SourceSet Verfahren.

Damit das ganze auch funktioniert, muss das TypoScript Template Setup noch etwas angepasst werden. Zunächst benötigen wir die Modernizr JavaScript Bibliothek. Diese prüft, ob der jeweilige Browser HTML5 darstellen kann. Dann brauchen wir noch ein Polyfill JavaScript. Ich entscheide mich für das Script von Boris Smus auf GitHub.

Beide JavaScript Varianten werden in der minimierten Version heruntergeladen und im Ordner „js“ abgelegt.

JavaScript
image-322

JavaScript

Ins Setup des Typoscript Templates kommt dann:

page.includeJS.file1 = fileadmin/js/modernizr.min.js
page.includeJS.file2 = fileadmin/js/srcset.min.js

Der Quelltext zeigt an, dass die beiden Dateien ordnungemäß eingebunden werden:

Quelltext
image-323

Quelltext

Auch die Bilder werden bereits mit einem SourceSet versehen:

Source Set
image-324

Source Set

Hier sind allerdings nur Breiten bis 600 Pixel definiert. Um diese Größen genauer anzusteuern schreiben wir folgendes TypoScript in das Template:

tt_content.image.20.1.sourceCollection {
  small {
     
    width = 220
    
    srcsetCandidate = 400w
    mediaQuery = (max-device-width: 400px)
  }
 
  smallRetina {
        if.directReturn = 1
 
        width = 280
        pixelDensity = 2
 
        srcsetCandidate = 600w 2x
        mediaQuery = (max-device-width: 1136px) AND (min-resolution: 192dpi)
    }
   
  smallHTC {
     
    width = 400

    srcsetCandidate = 480w
    mediaQuery = (max-device-width: 480px)
  }
   
  middlePortrait {
     
    width = 550
     
    srcsetCandidate = 799w
    mediaQuery = (max-device-width: 799px)
  }
   
  middleLandscape {
     
    width = 220
     
    srcsetCandidate = 800w
    mediaQuery = (max-device-width: 800px)
  }
  
  largeLandscape {
     
    width = 250

    srcsetCandidate = 2560w
    mediaQuery = (max-device-width: 2560px)
  }
  
}

Im groben nur kurz erklärt. Über:

tt_content.image.20.1.sourceCollection {
...
}

werden verschiedene Anzeigegrößen definiert. Die Bezeichnung ist dabei relativ frei wählbar. Dann wird über:

  width = 220

die Größe des Bildes angegeben. Typo3 unterscheidet hier zwischen der im IMG Tag angegeben Breite und der doppelten Pixeldichte eines Retina Displays. Das kann über:

pixelDensity = 2

eingestellt werden. Der SourceSet Candidate wird zur Auswahl des korrekten Bildes in den IMG Tag übergeben:

srcsetCandidate = 400w

Im Quelltext sieht der Eintrag dann so aus:

srcset="fileadmin/_processed_/csm_moro_jable_ddfcd476ea.jpg 400w,

Der Media Query Eintrag funktioniert quasi wie in der CSS:

mediaQuery = (max-device-width: 480px)

Betrachtet man die Größen der sechs generierten Bilder, sieht man wie effektiv Typo3 die Bilder skaliert:

Dateigrößen
image-325

Dateigrößen

Schreiben Sie einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.