Text und Medien - Gähn...

Ich bin eine Bildunterschrift unter der Rose und verhalte mich standardmäßig - also einfach unter dem Bild.

Text und Medien - das ist das Standard-Inhaltselement von TYPO3 und ist von Haus aus eher langweilig. Medien, wie Fotos, Grafiken oder Videos können über, neben, unter dem Text oder im Textfluss platziert werden. Hört sich unspannend an? Ist es auch...

Text und Medien - KREISCH!

Es geht auch anders! Wir haben das Element aufgebohrt, gepimpt, erweitert oder wie auch immer man das nennen kann. In unseren Templates kann man damit jetzt viel mehr machen und das zeigen wir auf dieser Seite. Sämtliche Element sind: eben nur "Text und Medien".

Die Text & Medien - Image Tools

Wir nutzen in TYPO3 in den meisten Fällen das Element "Text & Medien". Und das empfehlen wir auch unseren Kunden. Egal, ob man nur eine Überschrift, einen kurzen Text oder einen Text mit Bildern verwenden möchte. Mittlerweile haben wir das Element so erweitert, dass damit noch viel mehr geht. Ob aufklappbar, Bilder als Slider oder mit erweiterten Header-Funktionen - das Element "Text & Medien" ist damit multifunktional. Wieso wir das so machen? Weil es für Contentmanager einfacher zu bedienen ist, man keine individuellen Contentelemente benötigt und bei Updates - wegen der Core-Nähe - weniger Probleme bekommt. Sicherlich gibt es noch einige Gründe mehr.

Auf dieser Seite zeigen wir einige Beispiele aus der Rubrik "Image-Tools". Alle Beispiele hier funktionieren natürlich mit allen anderen Positionierungen, wenn nicht anders angegeben, auch mit mehreren Bildern und in Spalten.

Bild mit Parallax

KI schreibt hier: Der Jarallax-Effekt ist eine Technik, die verwendet wird, um parallaxes Scrolling-Effekte zu erzeugen. Es verwendet JavaScript, um die Bewegung von Elementen innerhalb einer Webseite zu steuern, wenn der Benutzer durch die Seite scrollt. Der Effekt ermöglicht es, dass verschiedene Elemente auf unterschiedliche Weise bewegt werden, wenn der Benutzer durch die Seite scrollt, und ermöglicht eine dynamische und interessante Erfahrung für den Benutzer.

Wir schreiben: Der Parallax-Effekt wird hier auf das img-Element und NICHT als Hintergrund angewendet. Das vereinfacht die Nutzung in TYPO3.

Bild mit Kenburns

KI schreibt dazu: Der Kenburns-Effekt ist ein visueller Effekt, bei dem ein Bild langsam in eine andere Richtung zoomen oder schwenken kann. Dieser Effekt wird oft in Videos verwendet, um ein Bild interessanter und dynamischer zu machen. Der Effekt wurde nach dem Fotografen Ken Burns benannt, der diesen Effekt in seinen Dokumentarfilmen verwendet hat.

Wir schreiben: Diesen Effekt haben wir für Bilder im Text & Medien-Element verfügbar gemacht - als puren CSS-Effekt.

Overlay

KI schreibt: Eine Overlay-Grafik ist eine Art von Grafik, die über einem anderen Bild oder Video angezeigt wird. Sie werden oft verwendet, um eine bestimmte Nachricht oder ein Logo anzuzeigen, während der Zuschauer die ursprüngliche Aufnahme betrachtet. Overlay-Grafiken können als statische Bilder oder als animierte Grafiken angezeigt werden.

Wir schreiben: Ja, kann man so stehen lassen. In unseren Templates kann man in den Image-Tools eine Grafik samt Positionierung angeben, die dann über den Bild angezeigt wird. Hier Im Beispiel sehen wir als Overlay-Grafik unser Signet. Genutzt werden kann es zum Beispiel als Wasserzeichen oder Schmuckgrafik.

Bild mit Bildbeschreibung im Bild - normal

Hier wird die Meta-Description des Bildes über dem Bild ausgegeben und kann via Flexform im Backend beliebig positioniert werden.

Bild like Cards

Alleine
Ein einsamer Tropfen an einem Halm.
mehr lesen

Sorry für das Denglisch ;-)
Cards sind beliebt und für die Benutzerfreundlichkeit einer Website wichtig. Jetzt möchte man aber nicht immer komplizierte Content-Elemente oder Card-Menüs dafür nutzen.
Dafür haben wir das Bild-Element von "Text mit Medien" erweitert und nutzen für die Ausgabe der Card-Elemente - neben dem Bild an sich - die Meta-Informationen eines Bildes, die in TYPO3 von Haus aus verfügbar sind: Description (als Teaser), link (mehr lesen) und als Titel haben wir einen Eintrag hinzugefügt, figcaptitle.
Hier ein Beispiel im Bild:

Bild mit Bildbeschreibung im Bild - wie Card-Offset

Yes, ich bin die Beschreibung (description) des Bildes und darf auch etwsa länger sein.

Wie oben - in diesem Beispiel verwenden wir ein Offset-Setting von unserem beliebten Card-Theme, wo der Titel unterhalb des Bildes im Versatz platziert ist.

Text & Medien - Galerie

Alleine