insci_slider_stage

Über diese Erweiterung

fluid_styled_slider ist eine Beispiel-Erweiterung, die alles bietet, um ein benutzerdefiniertes Inhaltselement zu erstellen für TYPO3 CMS 7 auf Basis der Systemerweiterung fluid_styled_content (FSC).

Eine detailliertere Erläuterung der folgenden Punkte finden Sie unter: https://usetypo3.com/custom-fsc-element.html

Systemanforderungen

Natürlich muss FSC in TYPO3 installiert werden, was nur in der Version 7.5 oder höher möglich ist. Da das tt_content Feld "assets" in Version 1.1.0 und höher verwendet wird und dieses Feld in TYPO3 7.5 nicht vorhanden ist, läuft nur die Version 1.0.0 dieser Erweiterung auf TYPO3 7.5. Neuere Versionen sollen mit TYPO3 7 LTS funktionieren.

Installation

Installieren Sie die Erweiterung und fügen Sie das statische TypoScript hinzu. So einfach ist das.

Komponenten eines Inhaltselements auf Basis von FSC

Diese Erweiterung fügt dem System ein Inhaltselement namens fs_slider hinzu. Die folgenden Schritte sind notwendig, um es zum Laufen zu bringen:

PageTSconfig

Damit unser Inhaltselement im Wizard für neue Inhaltselemente erscheint, müssen wir es über PageTSconfig hinzufügen

mod.wizards.newContentElement.wizardItems.common { {
    elemente {
        fs_slider {
            iconIdentifier = Inhaltsbild
            title = LLL:EXT:fluid_styled_slider/Resources/Private/Language/locallang_be.xlf:wizard.title
            beschreibung = LLL:EXT:fluid_styled_slider/Resources/Private/Language/locallang_be.xlf:wizard.description
            tt_content_defValues {
                CType = fs_slider
            }
        }
    }
    show := addToList(fs_slider)
}

TCA

Nun müssen wir TYPO3 mitteilen, welche Felder im Backend angezeigt werden sollen. Daher müssen wir die tt_content TCA-Konfiguration erweitern. Dies geschieht im Ordner Configuration/TCA/Override. Fügen wir zuerst unseren neuen CType hinzu (dies könnte auch in ext_tables.php geschehen):

\TYPO3\CMS\Kern\Utility\ErweiterungManagementUtility::addTcaSelectItem(
    tt_content',
    CType',
    [
        LLL:EXT:fluid_styled_slider/Resources/Private/Language/locallang_be.xlf:wizard.title',
        fs_slider',
        Inhalts-Bild'
    ],
    Textmedien',
    "nachher
);

Nun bestimmen wir, welche Felder für unseren CT-Typ angezeigt werden sollen:

$GLOBALS['TCA']['tt_content']['types']['fs_slider'] = [
    
            --palette--;' . $frontendLanguageFilePrefix . Palette.allgemein;allgemein,
            --palette--;' . $languageFilePrefix . tt_content.palette.mediaAdjustments;mediaAdjustments,
            pi_flexform,
        --div--;' . $customLanguageFilePrefix . tca.tab.sliderElements,
             vermögenswerte
    '
];

TypoScript

Der neue CType fs_slider benötigt eine Rendering-Definition. Das ist ziemlich einfach:

tt_content {
    fs_slider < lib.fluidContent
    fs_slider {
        templateName = FluidStyledSlider
        datenverarbeitung {
            10 = TYPO3\CMS\Frontend\Datenverarbeitung\FilesProzessor
            10 {
                referenzen.fieldName = Vermögenswerte
            }
            20 = DanielGoerz\FluidStyleledSlider\DataProcessing\FluidStyleledSliderProcessor
        }
    }
}

Die lib.fluidContent ist nicht viel mehr als die Initialisierung eines FLUIDCONTENT-Objekts

Beachten Sie, dass seit TYPO3 8LTS lib.fluidContent veraltet ist und stattdessen lib.contentElement verwendet werden sollte!

Wir ändern nur den Namen der Vorlage (stellen Sie sicher, dass Sie mindestens Ihren Vorlagenpfad zu lib.fluidContent.templateRootPaths hinzufügen) und geben Sie an, welche Datenprozessoren wir verwenden werden. Oh, richtig, Datenverarbeiter.

Datenverarbeiter

Das sind PHP-Klassen, die die Daten erhalten, bevor sie an das fluid-Template übergeben werden. Sie können die Daten manipulieren oder Dinge hinzufügen in der Vorlage vorhanden sein. Der TYPO3\CMS\Frontend\Datenverarbeitung\FilesProzessor löst zum Beispiel alle angehängten Medienelemente für uns auf, so dass wir auf die FileReference-Objekte in der View zugreifen können. DanielGoerz\FluidStyledSlider\DataProcessing\FluidStyledSliderProcessor ist ein benutzerdefinierter Prozessor, der veranschaulicht, wie dies funktioniert.

klasse FluidStyledSliderProzessor implementiert DataProcessorInterface
{
    /**
     * Prozessdaten für den CT-Typ "fs_slider"
     *
     * @param ContentObjectRenderer $cObj Der Inhaltsobjekt-Renderer, der Daten des Inhaltselements enthält
     * @param array $contentObjectConfiguration Die Konfiguration des Inhaltsobjekts
     * @param array $processorConfiguration Die Konfiguration dieses Prozessors
     * @param array $processedData Schlüssel/Wertspeicher der verarbeiteten Daten (z.B. zur Übergabe an eine Fluid-Sicht)
     * @return array die verarbeiteten Daten als Schlüssel/Wertspeicher
     * @throws ContentRenderingExceptionException
     */
    öffentlicher Funktionsprozess (ContentObjectRenderer $cObj, array $contentObjectConfiguration, array $processorConfiguration, array $processedData)
    {
        // Der Inhalt von $processedData wird in der Vorlage verfügbar sein
        // Es kann hier nach Ihren Wünschen bearbeitet werden.
        $processedData['slider']['width'] = 1000;
        gibt $processedData zurück;
    }

Datenprozessoren sind jedoch optional.

Die Fluid-Vorlage

Das letzte Teil des Puzzles ist die eigentliche Vorlage, die am Ende die von allen angegebenen DataProzessoren verarbeiteten Daten erhält. Das ist klares fluid, wie wir es kennen (und lieben):

    <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" Daten-Namensraum-typo3-fluid="true">
    <div class="fluid-style-slider" style="width: {slider.width}px; Rand: auto">
        <f:für jede="{files}" als="file">
            <figure class="fluid-style-slider-item">
                <f:image image="{file}" height="{data.imageheight}" width="{data.imagewidth}" alt="{file.properties.alt}" title="{file.properties.title}"/>
                <f:if condition="{file.properties.description}">
                    <figcaption>{file.properties.description}</figcaption></figcaption>
                </f:if> if>
            </figurieren>
        </f:for>
    </div>
    </html>

Natürlich können wir auch hier Layouts und Partiale verwenden. Beachten Sie, wie {data} die Zeile tt_content aus der gerenderten Zeile enthält inhaltselement. {files} wird vom TYPO3\CMS\Frontend\DataProcessing\FilesProcessor hinzugefügt und enthält die angehängten Medien als richtige Objekte. {slider.width} wird durch unseren eigenen DataProzessor ergänzt.

Optional: Vorschau im Seitenmodul

Wir wollen wahrscheinlich eine Art Vorschau für unsere Redakteure im Seitenmodul. Es gibt zwei nennenswerte Möglichkeiten, dies zu erreichen:

Fluid-Vorlage über PageTSconfig

Wir können einfach eine fluid-Vorlage angeben, die als Vorschau in PageTSconfig gerendert werden soll:

mod.web_layout.tt_content.preview.fs_slider = EXT:fluid_styleled_slider/Resources/Private/Templates/Preview/FluidStyledSlider.html

Diese Vorlage empfängt alle Felder der Zeile tt_content direkt. Also enthält {header} den Header, {bodytext} enthält die Datei bodytext und so weiter.

tt_content_drawItem Haken

Wenn wir komplexere Dinge tun wollen, wie z.B. die Auflösung von Child Records, können wir uns für den tt_content_drawItem hook registrieren so:

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['cms/layout/class.tx_cms_layout.php']['tt_content_drawItem']['fluid_styled_slider']
        \DanielGoerz\FluidStyledSlider\Hooks\FsSliderPreviewRenderer::class;

Unsere Klasse muss das \TYPO3\CMS\Backend\View\PageLayoutViewDrawItemHookInterface implementieren.

klasse FsSliderPreviewRenderer implementiert SeitenlayoutViewDrawItemHookInterface
{
    /**
     * Vorverarbeitet das Vorschau-Rendering eines Inhaltselements vom Typ "fs_slider"
     *
     * @param \TYPO3\CMS\Backend\View\PageLayoutView $parentObject Aufruf des übergeordneten Objekts
     * @param bool $drawItem Ob das Element mit der Standardfunktionalität gezeichnet werden soll
     * @param string $headerContent Header Inhalt des Headers
     * @param string $itemContent Inhalt des Elements
     * @param array $row Datensatzzeile von tt_content
     * @return void
     */
    öffentliche Funktion preProcess(PageLayoutView &$parentObject, &$drawItem, &$headerContent, &$itemContent, array &$row)
    {
        if ($row['CType'] ===='fs_slider') {
            $itemContent .= '<h3>Fluid Stil Slider</h3>';
            if ($row['assets']]) {
                $itemContent .= $parentObject->thumbCode($row, 'tt_content', 'assets') . <br />';
            }
            $drawItem = falsch;
        }
    }
}

Was auch immer wir in $itemContent schreiben, wird im Seitenmodul innerhalb unseres Inhaltselements gerendert

Diverse

Diese Erweiterung beinhaltet jQuery in JSFooterLibs. Wenn Sie bereits jQuery auf Ihrer Website haben, überschreiben Sie dies in Ihrem TypoScript oder setzen Sie die Konstante plugin.tx_fluidstyledslider.settings.includejQuery auf 0.