ALLES ÜBER insci_onepager_components UND WIE ES AUF WEBSITES EINGESETZT WIRD

Untersuchte Extension

insci_onepager_components

Über diese Erweiterung

fluid_styled_slider ist eine Beispiel-Erweiterung, die alles bietet, um ein eigenes Inhaltselement zu erstellen für TYPO3 CMS 7 basierend auf 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\DateienProzessor
            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 fluidtemplate ü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 View)
     * @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 schlichtes 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 dargestellt werden soll:

mod.web_layout.tt_content.preview.fs_slider = EXT:fluid_styled_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.

Benötigen Sie schnelle Hilfe mit dieser Extension? Unser Team von erfahrenen TYPO3-Entwicklern löst Probleme unkompliziert und zum Stundensatz.

Verteilung:INSCI_ONEPAGER_COMPONENTS ist auf

0 % aller TYPO3 installiert.

  • 0.02 % aller TYPO3 8.7.x Installationen installiert

Aktualität:INSCI_ONEPAGER_COMPONENTS ist auf dem neusten Stand (v.unknown) bei

100 % aller TYPO3 Installationen

  • 0 % aller TYPO3 9.5.x Installationen
  • 0 % aller TYPO3 9.3.x Installationen
  • 0 % aller TYPO3 9.2.x Installationen
  • 0.02 % aller TYPO3 8.7.x Installationen
  • 0 % aller TYPO3 7.6.x Installationen
  • 0 % aller TYPO3 7.5.x Installationen
  • 0 % aller TYPO3 7.4.x Installationen
  • 0 % aller TYPO3 7.3.x Installationen
  • 0 % aller TYPO3 7.2.x Installationen
  • 0 % aller TYPO3 7.1.x Installationen
  • 0 % aller TYPO3 7.0.x Installationen
  • 0 % aller TYPO3 6.2.x Installationen
  • 0 % aller TYPO3 6.1.x Installationen
  • 0 % aller TYPO3 6.0.x Installationen
  • 0 % aller TYPO3 5.0.x Installationen
  • 0 % aller TYPO3 4.7.x Installationen
  • 0 % aller TYPO3 4.6.x Installationen
  • 0 % aller TYPO3 4.5.x Installationen
  • 0 % aller TYPO3 4.4.x Installationen
  • 0 % aller TYPO3 4.3.x Installationen
  • 0 % aller TYPO3 4.2.x Installationen
  • 0 % aller TYPO3 4.1.x Installationen
  • 0 % aller TYPO3 4.0.x Installationen
  • 0 % aller TYPO3 3.5.x Installationen

responsive - image 4

Gosign-Responsive Index: TYPO3 Installationen nutzen INSCI_ONEPAGER_COMPONENTS zu

  • 0 % wenn der Gosign-Responsive-Index zwischen 80 % und 100 % ist
  • 100 % wenn der Gosign-Responsive-Index zwischen 60 % und 80 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 40 % und 60 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 20 % und 40 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 0 % und 20 % ist

speed test - image 5

Pagespeed: TYPO3 Installationen nutzen INSCI_ONEPAGER_COMPONENTS zu

  • 0 % wenn der Pagespeed zwischen 80 % und 100 % ist
  • 100 % wenn der Pagespeed zwischen 60 % und 80 % ist
  • 0 % wenn der Pagespeed zwischen 40 % und 60 % ist
  • 0 % wenn der Pagespeed zwischen 20 % und 40 % ist
  • 0 % wenn der Pagespeed zwischen 0 % und 20 % ist


Stichprobe n=37971 von Gosign gecrawlte TYPO3-Seiten mit den Top-Level-Domains <.de>

Ran an die Resultate – unser Newsletter für Sie!

Damit Sie gleich Wind davon bekommen, wenn wir in unserem Magazin zu neuen Erkenntnissen kommen.