Skip navigation

Responsive Images with TYPO3

This page demonstrates the techniques with 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.

TimLiss-10004.JPG

[Translate to English:] 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.

[Translate to English:] 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

[Translate to English:] 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.