Ext:bootstrap_package - CE Rendering in eigenem Content-Block-Element nutzen

Johannes Laxander

Ich habe eine TYPO3 13 Instanz mit der EXT: bootstrap_package (BP) als Basis, und muss mehrere spezifische Content-Elemente mit Content-Blocks erstellen. Dazu möchte ich das Rendering aus dem BP nutzen um eine einheitliche Frontend-Ausgabe zu erhalten und nicht alles neu definieren zu müssen.

Wie kann ich das in meinen "Content-Blocks" einbinden?
Die erste Frage die sich mir dabei stellt ist, wie ich z.B. das Layout-Template für Content Elemente aus dem BP in der Datei frontend.html einbinden kann. <f:layout name="Default" /> funktioniert ja nicht, weil der Pfad ja auf das BP verweisen muss.

Mogens Fiebrandt

Also laut Doku müsstest Du auch Layouts aus anderen Extensions nutzen können.

Ich habs nichts getestet, würde es mal mit diesem TypoScript versuchen:

lib.contentBlock {
    layoutRootPaths.100 < plugin.tx_bootstrappackage.view.layoutRootPaths.0
}

Johannes Laxander

Mogens Fiebrandt Danke für deinen Hinweis, der mir schon mal eine Hilfe war. Damit habe ich aber einen Fehler bekommen: Default.html nicht gefunden.
Ich habe es dann mit diesem TypoScript versucht:

lib.contentBlock {
    layoutRootPaths.100 < lib.contentElement.layoutRootPaths.0
    partialRootPaths.100 < lib.contentElement.partialRootPaths.0
}

Damit ist zwar der Fehler weg, aber es wird auch kein Inhalt ausgegeben, nur die div-Struktur. 🤔

Mogens Fiebrandt

Ich hab leider kein Testsystem mit Content-Blocks und Bootstrap-Package.
Daher kann ich Dir leider nicht weiter helfen. Aber vielleicht weiß ja jemand anderes weiter...

Andreas Hirsch

Du meinst die Einstellungsmöglichkeiten vom bootstrap_package z. B. im Tab "Erscheinungsbild"? Die musst du als "Basic" zu deinem content block hinzufügen. Siehe hier. Mit dem Appearance-Tab hab ich schon angefangen. Ich stell später noch eine kleine Anleitung rein.

Johannes Laxander

Andreas Hirsch nein, die meinte ich nicht, das war schon klar.

Meine Frage bezieht sich auf die Template-Pfade aus dem Bootstrap-Package, damit ich im Template frontend.html meines Content-Element-Blocks die CE-Layout-Vorlag einbinden kann:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:bk2k="http://typo3.org/ns/BK2K/BootstrapPackage/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Header" />
<f:section name="Main">

Das TypoScript von oben funktioniert! Ich hatte in der frontend.html noch einen Fehler! Nochmals Danke an @Mogens Fiebrandt

Johannes Laxander

Und schon stehe ich vor der nächsten Herausforderung!
Die Ausgabe im Frontend funktioniert jetzt grundsätzlich auch mit Responsive Images vom Bootstrap Package:
<f:render partial="Media/Rendering/Image" arguments="{file: item.image.0, data: data, settings: settings, variants: variants}" />

<picture>
	<source data-variant="default" data-maxwidth="1280" media="(min-width: 1400px)" srcset="bild_1.jpg 1x">
	<source data-variant="xlarge" data-maxwidth="1100" media="(min-width: 1200px)" srcset="bild_2.jpg 1x">
	<source data-variant="large" data-maxwidth="920" media="(min-width: 992px)" srcset="bild_3.jpg 1x">
	<source data-variant="medium" data-maxwidth="680" media="(min-width: 768px)" srcset="bild_4.jpg 1x">
	<source data-variant="small" data-maxwidth="500" media="(min-width: 576px)" srcset="bild_5.jpg 1x">
	<source data-variant="extrasmall" data-maxwidth="374" srcset="bild.jpg 1x">
        <img loading="lazy" src="bild.jpg" width="1280" height="961" title="..." alt="...">
</picture>

Es sind zwei CropVariants definiert:

        cropVariants:
          default:
            title: Alle Geräte
            allowedAspectRatios:
              landscape:
                title: 4:3
                value: 4 / 3
          extrasmall:
            title: 'Smartphone'
            allowedAspectRatios:
              portrait:
                title: 2:3
                value: 2 / 3

Die Settings vom Bootstrap Package habe ich auch noch referenziert:
lib.contentBlock.settings < lib.contentElement.settings

Einen "Schönheitsfehler" gibt es allerdings doch noch. Bei einer Viewsize von 412 x 915 px wird das Bild mit 1280 x 961 px gerendert.

Suche den Fehler! Ich habe ihn noch nicht gefunden und kann mir das Ergebnis aufgrund des gerenderten HTML-Codes erklären, nicht aber, warum das Rendering die im Content Block festgelegten CropVariants nicht entsprechend berücksichtigt. Ich Backend ist alles ok!
Wer kann mir hier bitte weiterhelfen?

Mogens Fiebrandt

Hast Du mal versucht für die extrasmall source auch eine min-width anzugeben?

<source data-variant="extrasmall" data-maxwidth="374" media="(min-width: 200px)" srcset="bild.jpg 1x">

Johannes Laxander

Mogens Fiebrandt verändert auch nichts, weil dadurch das img-Tag ja nicht beeinflusst wird, in dem schon 1280px angegeben sind. Die Angabe hat auch direkt im img-Tag keine Wirkung.
Sicher ist, dass das Partial Media/Rendering/image.html vom Bootstrap Package ausgeführt wird. Und für dieses Partial werden diese Argumente übergeben:
arguments="{file: file, data: data, settings: settings, variants: variants}"
"file" ist das Image-Object. "data" ist der Content-Block-Record. "settings" werden aus dem Bootstrap Package übernommen (lib.contentBlock.settings < lib.contentElement.settings). "variants" entspricht den Bootstrap-Package-Festlegungen:

variants => array(6 items)
  default => array(3 items)
  xlarge => array(3 items)
  large => array(3 items)
  medium => array(3 items)
  small => array(3 items)
  extrasmall => array(2 items)
     width => 374 (integer)
     sizes => array(1 item)
           1x => array(1 item)
           multiplier => 1 (integer)

Möglicherweise werden im Partial image.html nicht die richtigen Daten verarbeitet - nur eine Vermutung.
Ist die Vermutung richtig, oder gibt es eine andere Ursache?

Johannes Laxander

Durch ausgiebiges debuggen habe ich nun die Erkenntnis gewonnen, dass meine Vermutung nicht richtig war. Ich habe dann auch festgestellt, dass in der Ausgabe ein großer Teil der HTML-Struktur fehlte, die beim Rendering eines "normalen Text-Bild-Elements" normalerweise erstellt wird. Das hat dazu geführt, dass das Bild in der Original-Größe, und nicht in der dem Breakpoint entsprechenden Größe dargestellt wurde.

Ein wenig darüber nachgedacht, bin ich dann zu der -eigentlich logischen- Erkenntnis gelangt, dass man auf der obersten Rendering-Ebene einsteigen muss, um das vollständige Rendering des Bootstrap-Packages zu nutzen. Und das beginnt, wie beim TYPO3-Standard auch, mit dem Partial Media/Gallery.html.

Das ist nun der richtige Aufruf in meiner frontend.html:
<f:render partial="**Media/Gallery**" arguments="{**files: item.image**, data: data, settings: settings, variants: variants}" />

Mit "files" wird das image array übergeben. "item" ist hier die Schleifen-Variable für einzelne Bild aus meinem Content Block.

PROBLEM GELÖST! 😄

Unterstütze das Forum

Hilf mit, den Community Hub für TYPO3 werbefrei zu halten und die Betriebskosten zu decken. Werde Official Community Hub Supporter für nur 5 Euro im Monat (zzgl. USt) und erhalte ein exklusives Supporter-Badge. Jeder Beitrag zählt!

Jetzt Supporter werden

Impressum - Datenschutz - Kontakt - Netiquette - RSS