Zum Inhalt springen

Responsive Images mit TYPO3

Diese Seite demonstriert die Techniken mit responsive images

Das Thema Responsive Images ist oft kompliziert und stellt hohe Ansprüche an Redakteure. Diese müssten die Größen der verschiedenen Ansichten (Smartphone, Tablet, Desktop) kennen, um die Bilder optimal einzupassen und nicht zu große oder zu kleine einzufügen. Dieses Template nimmt das Prozedere den Redakteuren ab, indem es die Größen pro Ansicht automatisch berechnet. Spalten/Grids werden dabei berücksichtigt. Das Template setzt hierfür den picture-Tag ein, der je nach Ansicht verschiedene Dateien anbietet. Ist das Bild im Original sehr hochauflösend, wird für spezielle hochauflösende Displays eine bessere Version angeboten.

Diese Optimierung kann dank Widget-Technik auch in Extension-Templates eingesetzt werden, wodurch die komplette Website optimiert werden kann.

TimLiss-10004.JPG

Bild links, Schrift rechts

Diese Konstruktion wird mit Hilfe eines FC-Elementes erstellt. So kann das Bild im Smartphone Modus auf 100% Breite umschalten und in der Ipad-Version ein bisschen kleiner werden.

Bild rechts, Schrift links

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

TimLiss-10019.JPG

Abgerundete Ecken

bg2.jpg

Abgerundet

bg2.jpg

Rahmen (Thumbnail)

bg2.jpg

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Sollten Bilder einmal kleiner sein, als der zur Verfügung stehende Platz, kann man diese auch positionieren. Für diese Bilder wird dann auch keine HD Auflösung gerendert.
Rechts positioniert:

footer.png

Mittig positioniert:

footer.png