TYPO3: Responsive Images mit Fluid Styled Content (FSC)

Seit TYPO3 7 ist es nun erstmals über eine System-Extension möglich die Ausgabe von Inhaltselementen mit Fluid Templates zu realisieren. Die Anpassung der Ausgabe ist dadurch nun gerade für Anfänger leichter geworden, auch wenn es hier und wieder ein paar Probleme geben kann.

Allerdings gibt es auch einen Nachteil bei der Benutzer von fluid_styled_content: Im Gegensatz zu css_styled_content gibt es nun Out-of-the-Box keine responsiven Bilder via. srcset oder picture mehr. Für viele ist dies ein Schritt zurück, allerdings lässt sich diese Funktion mit ein paar Handgriffen nachrüsten.

Alternative Fluid Styled Content Templates anlegen

Verzeichnis-Aufbau (Beispiel)

Verzeichnis-Aufbau (Beispiel)

Nachdem man FSC erfolgreich aktiviert und eingebunden hat, muss man sich zunächst das Partial für die Bildverarbeitung herunterladen. Die Standardtemplates befinden sich unter typo3/sysext/fluid_styled_content/Resources/Private . Für responsive Bilder mit Fallback je nach Bildschirmauflösung benötigten wir das Partial „MediaGallery.html“ aus dem Verzeichnis Partial. Dieses platzieren wir nun irgendwo in unserem fileadmin-Verzeichnis oder woanders (siehe Bild zum Verzeichnisaufbau)

Hinweis: Dank alternativer Templates müsst ihr nicht alle Dateien der Extension herunterladen! Ihr müsst lediglich die Dateien in fileadmin platzieren, die ihr verändern wollt!

Per Typoscript Konstante können wir nun alternative Pfade zu Template Dateien angeben. Für Bilder mit Fallback benötigen wir lediglich das oben genannte Partial. Diese Einstellung kann man auch über den Konstanten Editor vornehmen:

styles.templates.partialRootPath = fileadmin/pfad/zu/fluid_styled_content/Partials/

MediaGallery Partial anpassen

Hinweis: Das fertige Partial findet ihr am Ende des Artikels als Download.

Dann muss man das Partial entsprechend anpassen. Dieses besteht aus mehreren Sections die jeweils verschiedene Typen von Medien verarbeiten (z.B. Videos oder Bilder).
Um nur das Rendering von Bildern zu überarbeiten müssen wir zunächst in der Section „imageType“ die folgenden Aufrufe anpassen (kommt drei mal vor!)

<!-- 
   <f:render section="media" arguments="{_all}" /> 
   ÄNDERN ZU:
-->

<f:render section="media" arguments="{column: column, isImage: 1}" />

Dadurch übergeben wir an die Section „media“ die Information das es sich um ein Bild handelt. Ansonsten müssten wir dies innerhalb der Section „media“ nochmal überprüfen.

Picture Tags mit Source Fallback via VHS Extension

Als nächstes benötigen wir die Hilfe der Extension „vhs“, die ihr euch aus dem TER herunterladen könnt. Nach der Installation müsst ihr am Anfang des Partials den Namespace deklarieren und zwar so:

{namespace v=FluidTYPO3\Vhs\ViewHelpers}

Anschließend passt ihr die Section „media“ folgendermaßen an:

<f:section name="media">
	<f:if condition="{isImage}">
		<f:then>
			<v:media.picture src="{column.media.publicUrl}" alt="{column.media.alternative}">
				<v:media.source media="(min-width: 992px)" width="{column.dimensions.width}c" height="{column.dimensions.height}c" />
				<v:media.source media="(min-width: 768px)" width="200c" height="200c" />
				<v:media.source width="80c" height="80c" />
			</v:media.picture>
		</f:then>
		<f:else>
			<f:media
					file="{column.media}"
					width="{column.dimensions.width}"
					height="{column.dimensions.height}"
					alt="{column.media.alternative}"
					title="{column.media.title}"
			/>
		</f:else>
	</f:if>
</f:section>

In den v:media.source Tags könnt ihr nun alternative Bildgrößen je nach Viewport-Größe angeben. Die Wahl der Größen ist dabei euch überlassen und ihr könnt beliebig viele v:media.source Tags hinzufügen. Mit {column.dimensions.width} und {column.dimensions.height} könnt ihr auf die vom Benutzer im Backend eingestellten Größen zugreifen.

In der Ausgabe erhaltet ihr anschließend ein picture Tag mit beliebig vielen source Tags.

UPDATE 05.07.2016

  • Momentan liefert publicUrl von FileReferences offenbar falsche URLs zurück, wenn diese einen Umlaut (ä,ö,ü) enthalten. TYPO3 Forge #76936.
  • Der VHS ViewHelper respektiert derzeit noch nicht im Backend zugewiesene Bildausschnitte (Crop)

CSS Anpassungen für responsive Bilder

Durch die source-Tags haben wir nun zwar entsprechend angepasste Bilder für unterschiedliche Endgeräte, allerdings ist die Ausgabe noch nicht wirklich responsiv. Damit das ganze auch in der Ausgabe gut aussieht muss man natürlich noch das CSS entsprechend anpassen.

Glücklicherweise werden standardmäßig in der Ausgabe im .ce-gallery Container bereits Data-Tags mit der Information hinterlegt, wie viele Spalten es in der Ausgabe geben soll, was die Gestaltung relativ einfach macht.

Hier dazu ein Beispiel welches ihr gerne verwenden und auf eure Bedürfnisse anpassen könnt: (Download am Ende des Artikels, auch als LESS!)

/* Gallerie bis 992px auf volle Breite */
@media (max-width: 992px) {
    .ce-gallery {
        width: 100%;
    }
}

/* Anpassungen von kleinen bis groeßeren Geraeten */
@media (min-width: 640px) and (max-width: 1200px) {
    .ce-gallery .ce-column {
        margin: 0;
        /* Abstand zwischen Bildern */
        padding: 0 5px;
        box-sizing: border-box;
    }


    /* Kein Abstand beim ersten und letzten Bild */
    .ce-gallery .ce-column:first-child {
        padding-left: 0;
    }
    .ce-gallery .ce-column:last-child {
        margin-right: 0;
    }

    /* Fluid Image Tags */
    .ce-gallery img,
    .ce-gallery picture {
        width: 100%;
        height: auto;
    }

    /* Spaltenbreiten je nach eingestellten Columns */
    .ce-gallery[data-ce-columns="2"] .ce-column {
        width: 50%;
    }

    .ce-gallery[data-ce-columns="3"] .ce-column {
        width: 33%;
    }

    .ce-gallery[data-ce-columns="4"] .ce-column {
        width: 25%;
    }

    .ce-gallery[data-ce-columns="5"] .ce-column {
        width: 20%;
    }
}

/* Anpassungen fuer kleine Geraete */
@media (max-width: 640px) {

    /* Ein Bild pro Zeile */
    .ce-gallery .ce-column {
        margin: 0 0 10px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Fluid Image Tags */
    .ce-gallery img,
    .ce-gallery picture {
        width: 100%;
        height: auto;
    }
}

Dieses CSS ist lediglich ein Beispiel wie man es machen könnte. Über Verbesserungsvorschläge freue mich natürlich sehr!

Downloads

Hier nochmal alle Dateien als Download (auch als LESS). Klick mich HART!

 

33 Kommentare

  • Pavitro Papadopoulos

    Hi,

    die Lösung gefällt mir ganz gut, nur scheinen bei Verwendung des vhs-Viewhelpers die in TYPO3 7.x eingeführte Möglichkeit zur Beschneidung von Bildern leider unter den Tisch zu fallen.

    • Hallo,

      daran habe ich bisher gar nicht gedacht. Stimmt der ViewHelper zieht ein gecropptes Vorschaubild bisher nicht vor. Eine kleine Anpassung am ViewHelper sollte dieses Problem jedoch lösen. Ich werde mir das mal auf den Zettel schreiben.

  • Hallo Paul, du hast mir die Welt Gerettet. Hatte es vorher mit der Ext „fluid_styled_responsive_images“ von Alex Schnitzler versuch kam aber zu keinem Zufriedenstellenden Ergebniss. Einmal in den „VHS“ reinzuschauen darauf kam ich nicht. Bin rein durch Zufall auf deinen Beitrag gestossen und das hat mein Problem Gelöst. Hast du eventuel noch eine Idee wie man das ganze colPos abhängig zusammen bekommt das z.B im Main Content colPos = 1 die Ausgabe der Images größer ist als im „aside“ Sidebar colPos = 2?

    • Hallo Matthias,

      hast Du dir mal {column}, {data} oder {_all} debuggen lassen und geschaut ob dort irgendwo die colPos des Elements drinsteht? (Müsste ja)

  • Hallo Paul,

    danke für deine Hilfe, habe es jetzt über conditions {layout} gelöst. Über colPos geht es in diesen fall nicht da die Elemente aus tx_news als contentElemente -> Gridelemente liegen und dort halt immer der Inhalt colPos -1 besitzt. Mal eine Frage zu deinem Bewertungs System auf deiner Seite, ist das wie hast du das gelöst? Finde ich sehr gut…

    Gruß

    Matthias

  • Sorry, bin Blind…

    Moodly

  • Danke! Ich habe

    verwendet – allerdings klappt das Rendering gar nicht, ich kriege immer eine viel zu grosse Bildversion.
    Hat das evt auch etwas mit dem Crop-Phänomen zu tun, das ihr oben beschreibt?

    • Hallo Urs,
      ist das Bild tatsächlich zu groß und hat nicht die im ViewHelper angegebenen Bildgrößen oder wird es vielleicht nur durchs CSS vergrößert?

  • Hallo,

    sehr schöne Möglichkeit! Das Problem mit der Beschneidung der Bilder hat sich mit dem nächsten Update auch erledigt oder alternativ mit der aktuellen GIT-Version von VHS. Georg Ringer hat sich dem generell angenommen:
    https://github.com/FluidTYPO3/vhs/pull/1091

    • @Jonathan mit dem nächsten Update wovon? core? fluid_styled_content? Und danke für den Link zum VHS-VH

      @Paul sorry, dass ich mich im Juni nicht mehr gemeldet habe, das Projekt war dann gelauncht und ich hatte keine Kapazität zum aufschrauben mehr… Das Bild war tatsächlich zu gross, nicht per CSS. Schauen wir, wie’s mit dem neuen VH geht. Danke!

      • Oh… Entschuldige – ich meinte natürlich das nächste Update von VHS. Aber ich bin gerade schon wieder am probieren…. Obwohl das Crop jetzt aufgenommen wurde funktioniert es bei mir noch nicht. Könnte daran liegen das ich den ImageViewHelper benutze und nicht den PictureViewHelper… Bin dran^^

  • So ich habe nun alle Varianten durch 😄
    Davon ausgegangen man benutzt die aktuelle GIT-Version von VHS ist im Script oben noch ein kleiner Fehler oder eine kleine Unschönheit, die mir schon beim ersten betrachten aufgefallen ist, ich ihr aber zugegebener Maßen keine Beachtung geschenkt habe.

    Man mache aus dem {column.media.publicUrl} ein {column.media} und schon funktioniert mit der GIT Version von VHS auch das cropping 🙂

  • Hallo Paul,
    hast du einen Tipp wie ich im MediaGallery.html in den resultierenden ein itemprop=“contentURL“ hineinbekomme?

    gruß
    Matthias

  • Schreib hier mal wie es aussehen sollte (mit Highlighting, sie unter dieser Textbox – das habe ich auch übersehen^^)

  • Gibt es ein Problem mit der Kommentarfunktion oder wieso immer dieses „…“ 😛

  • Vielen Dank für das Tutorial. Kann mir jemand sagen, wie ich oder v:media.source eine Klasse mitgeben kann, die dann auch im img-tag landet? Habe es mit additionalAttributes=“{class: ‚img-responsive‘}“ versucht, das kommt dann auch in den source-tags an, aber nicht im img-tag?

  • Leider werden damit keine Videos mehr angezeigt..

  • Kommando zurück, diesen Part sollte man nicht damit umformatieren…

  • Hallo zusammen,

    an sich bin ich total begeistert, aber ich frage mich, wie man denn das Beschneiden der Bilder verhindert. Hat da jemand einen Tipp??

    Beste Grüße,

    Christian

  • Hallo

    wie funktioniert das unter Typo3 8.7?

    Grüße
    Roman

  • Mich würde auch die Lösung für TYPO3 8.7 interessieren. Hier hat sich anscheinend der VHS ViewHelper (Version 4.3) geändert.

  • So habe ich es im 8er gelöst:
    /Partials/Media/Rendering/Image.html

    • <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
      <f:comment>
      	<f:media class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}"/>
      </f:comment>
      <v:media.picture src="{f:uri.image(image: file)}" alt="{file.alternative}" title="{file.title}">
      	<v:media.source media="(min-width: 1200px)" maxW="1200"/>
      	<v:media.source media="(min-width: 1200px) AND (min-resolution: 192dpi)" maxW="1200"/>
      	<v:media.source media="(min-width: 992px)" maxW="992"/>
      	<v:media.source media="(min-width: 992px) AND (min-resolution: 192dpi)" maxW="992"/>
      	<v:media.source media="(min-width: 768px)" maxW="768"/>
      	<v:media.source media="(min-width: 768px) AND (min-resolution: 192dpi)" maxW="768"/>
      	<v:media.source media="(min-width: 384px)" maxW="768"/>
      	<v:media.source media="(min-width: 384px) AND (min-resolution: 192dpi)" maxW="768"/>
      	<v:media.source media="(max-width: 384px)" maxW="384"/>
      	<v:media.source media="(max-width: 384px) AND (min-resolution: 192dpi)" maxW="384"/>
      	<v:media.source width="384"/>
      </v:media.picture>
      </html>
      
  • #
    #
    #
    #
    #
    #
    #
    #
    #
    #
    #
    #
    #
    #
    #
    #
    #
    #

Schreibe einen Kommentar zu Paul Beck Antworten abbrechen

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

Highlighting von Codes ist mit den Tags  [ts], [php], [html], [javascript], [xml] oder [code] möglich.