In diesem Tutorial gehe ich davon aus, dass eine ProviderExtension angelegt
wurde und funktioniert und das alle benötigten Extension installiert wurden.
Extension:Key providertemplate
Vendor:sus
Als erstes brauchen wir einen Controller. Dafür legen wir in den Ordner Classes/Controller eine php Datei namens ContentContoller.php und fügen folgenden Inhalt ein.
namespace Sus\Providertemplate\Controller;
use FluidTYPO3\Flux\Controller\AbstractFluxController;
/**
* ContentController
*
* @package FluidpagesBootstrap
* @subpackage Controller
* @route off
*/
class ContentController extends \FluidTYPO3\Flux\Controller\AbstractFluxController {
/**
* @return string
*/
public function twoColAction() {
}
}
jetzt legen wir in Resources/Private/Layouts eine Html Datei namens Content.html mit folgenden Inhalt:
<f:render section="Main" />
Jetzt wird noch in Resources/Private/Templates ein Ordner namens Content benötigt.
In diesem Ordner brauchen wir nun eine Html Datei TwoCol.html die Datei hat nun folgen Inhalt. Der Name der Datei muss gleich lauten wie der Name der Action in Controller.
// den flux namespace
{namespace flux=FluidTYPO3\Flux\ViewHelpers}
// xml schema
<f:layout name="Content" />
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="https://fedext.net/schemas/fluid-master.xsd"
xmlns:flux="https://fedext.net/schemas/flux-master.xsd"
xmlns:v="https://fedext.net/schemas/vhs-master.xsd">
//Hier findet die Backend Konfiguration statt
<f:section name="Configuration">
// Hiermit wird ein Formular mit eigenen Tab in Backend mit der Beschriftung Zweispaltiges Template angelegt
<flux:form id="col2IMGLeft" wizardTab="FCE" label="Zweispaltiges Template" >
// Hier wird das Formular Tag geöffnet
<flux:form.sheet name="col1Sheet" label="Links">
// RTE Editor wird hier angelegt
<flux:field.text name="Col1Text" label="Links" enableRichText="true"/>
// Formular schließen
</flux:form.sheet>
// zweites Formular für den zweiten Tab
<flux:form.sheet name="col2Sheet" label="Rechts">
// RTE Editor wird hier angelegt
<flux:field.text name="Col2Text" label="Rechts" enableRichText="true"/>
</flux:form.sheet>
</flux:form>
</f:section>
Mit dieser Konfiguration sollten im Backend ein Tab mit der Bezeichnung FCE angelegt und zu finden sein. Sobald man jetzt eine Content element hinzufügt findet man ihn ganz rechts. Wenn man jetzt auf Tab FCE und dann auf zweispatiges Temmplate klickt hat man das Content element ausgewählt. Sie finden jetzt zwei Tabs links und rechts wo Sie in einen RTE Editor Ihren Inhalt einfügen könnt.
Finde ich Cool !
Hier nun die Ausgabe für das Frontend die in der gleichen Datei unterhalb eingefügt wird.
<f:section name="Main">
<div class="TwoColMGLeft">
<div class="col-left">
// wird der Wert von RTE left ausgegeben
<f:format.html{Col1Text}</f:format.html>
</div>
<div class="col-right">
// wird der Wert von RTE rechts ausgegeben
<f:format.html{Col2Text}</f:format.html>
</div>
</div>
</f:section>
</div>
So jetzt muss nur noch unser Content Ordner angemeldet werden. Dafür die Datei ext_table.php öffnen und die Zeile
Tx_Flux_Core::registerProviderExtensionKey('Sus.providertemplate', 'Content');
einfügen.
So, mit diesem Schema können beliebig viele Contentelemente erstellt werden.
Cool oder?
Ich hoffe jemanden damit geholfen zu haben.
Viel Spass noch!
Estefan Huerta Barroso
