Sie sind hier: Startseite  / Wissenswertes  / Typo3  / Typo3 Extension Responsive Images

Anleitung zur Nutzung der Typo3 Extension Responsive Images von sector12

Was macht die Typo3 Extension Responsive Images?

Bedingt durch css_styled_content werden Bilder in Typo3 von zahlreichen ineinander geschachtelten divs positioniert. Speziell durch die Ausrichtungen greifen so CSS Anweisungen für ein Bild nicht mehr. Wird nun die Seite skaliert, wie beispielsweise beim Aufruf durch ein Smartphone, dann bleibt das Bild groß und verändert seine Größe nicht wie im Responsive Webdesign gewünscht.

 

Genau hier setzt die Typo3 Extension an.

Funtionsweise der Typo3 Extension Responsive Images:

Dies sind die wesentlichen Funktionen:

 

  • Sie können wie gewohnt Bilder auf der Seite als normales Content Element nutzen, in der Liste der typischen Seiteinhaltselemente erscheint die Schaltfläche für Responsive Bilder.
  • Die Bilder können mit einem Link versehen werden, zudem auch Titel, Alt und auch eine Bildunterschrift erhalten.
  • Die Darstellung basiert auf Fluid und erfolgt mit minalen CSS Container (div)
  • Zudem erhalten die Bilder CSS Anweisungen, so dass sich diese automatisch in der Größe anpassen.
  • Im Tab der Einstellungen können Sie die Bildbreite, Bildhöhe, die Ausrichtung bestimmen und zudem die integrierte vegrößerte Darstellung in einer Lightbox mit einem Klick aktivieren.

Einige Bilder und Screenshots zur Typo3 Extension:

Darstellung PC
Darstellung Smartphone
Darstellung Tablet
Bilder auf der Seite
Bild in Lightbox

Bilder aus dem Typo3 Backend

So nutzen Sie die Responsive Images Typo3 Extension

Schritt 1:
Installieren Sie die Typo3 Extension direkt aus dem Backend oder laden Sie diese herunter und installieren Sie über den Upload.

 

Schritt 2:
Gehen Sie auf die Seite, die Responsive Bilder als Inhaltselement bekommen soll und klicken Sie auf das Symbol zum hinzufügen eines typischen Seiteninhaltselements. In der Liste sehen Sie das Element Responsive Bilder, klicken Sie dieses an.

 

Schritt 3:
Fügen Sie wie gewohnt Bilder hinzu. Sie können die Bilder auch verlinken sowie Alt und Title setzen. Ebenso besteht die Möglichkeit eine Bildunterschrift zu nutzen.

 

Schritt 4:
Geben Sie im Tab Bild Einstellungen die gwünschte Breite, Höhe sowie Ausrichtung an und bestimmen SIe, ob eine vergrößerte Version des Bildes in einer Lightbox angezeigt werden soll.

Hinzufügen als typischer Seiteninhalt
Anlegen der Bilder wie gewohnt
Angaben zu Alt, Title sowie Figcaption und Link
Dialog für die Einstellungen

Top Produkte

Lade Inhalt
nächstes Bild
vorheriges Bild
Flash Karussell Professionell 3
jQuery Slider
Produktslider
Flash Imageslider Pro 4
HTML5 Slideshow Pro
HTML5 Accordion

Typo3 Freelancer gesucht?

Ich arbeite auch für Agenturen als Typo3 Freelancer und ebenso als Web Freelancer. Mehr Infos erhalten Sie auf der Freelancerseite.

 

Typo3 Freeelancer Mark Kirstein