Slider mit Steuerelementen und Texten über den Bildern

Beispielfoto aus einem Kundenprojekt

Dafür gibt es im TYPO3-Repository sicher einige Extensions, mit denen man ähnliches erreichen kann, aber wir möchten zur Vereinfachung späterer TYPO3-Upgrades den Gebrauch von Extensions einschränken und dafür bevorzugt die TYPO3-Systemresourcen verwenden. Zudem hat man über diesen Weg die Möglichkeit, den Slider individuell an die Bedürfnisse des Kunden anzupassen.

Vorweg sollte man sich überlegen, welchen Slider man dafür verwenden möchte. Wir haben uns für das jQuery-Plugin "Qwl-Slider" entschieden. Man kann dafür aber auch jedes andere jQuery Slider-Plugin nach Belieben verwenden. Diese Anleitung bezieht sich auf die TYPO3 Version 10.4. Wir setzen voraus, dass das Anlegen von Extensions bekannt ist und gehen hier nicht weiter darauf ein.

Ein Tutorial über eine minimale Extension gibt es hier:
https://docs.typo3.org/m/typo3/tutorial-sitepackage/master/en-us/Index.html

Ein Download hier:
https://github.com/TYPO3-Documentation/TYPO3CMS-Tutorial-SitePackage-Code

1. Das TCA für die Tabelle "sys_file_reference" und "pages" erweitern
und die entsprechende Datenbankfelder anlegen

Für das Erweitern der einzelne Tabellen legen wir in unserer Extension im Verzeichnis "myExtKey/Configuration/TCA/Override/ " die beiden Dateien sys_file_reference.php und pages.php an. Für die Texteingabe muss man sich entscheiden, ob man eine Fließtext oder einzelne Textzeilen eingeben möchte. Wir haben uns für den Fließtext entschieden und definieren ein Text/Input mit der RTE-Konfiguration. Damit das auch nur in den Seiteneinstellungen unter "Resourcen" angezeigt wird, definieren wir zusätzlich noch eine Bedingung für die Ansicht.

//RTE für Beschreibungsfeld nur für Pages/media fields
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns(
        'sys_file_reference',
        [
            'textonimage' => [
                'label' => 'LLL:EXT:myExtKey/Resources/Private/Language/locallang_db.xlf:sys_file_reference.textonimage',
                'displayCond' => 'FIELD:fieldname:=:media',
                'config' => [
                    'type' => 'text',
                    'cols' => 40,
                    'rows' => 15,
                    'eval' => 'trim',
                    'enableRichtext' => true,
                ],
            ],
        ],
        1
    );

Im nächsten Schritt ordnen wir das neue Textfeld einer Palette zu:

//Feld der Image-Palette hinzufügen
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
        'sys_file_reference',
        'imageoverlayPalette',
        '--linebreak--,textonimage,--linebreak--',
        'before:crop'
    );

Für die Steuerung der Slideshow erweitern wir die Pages-Tabelle um zusätzliche Checkboxen. Ab TYPO3 10.4 wäre an der Stelle auch die Defnition einer Flexform über das neue TCA Config -Type "flex" möglich, allerdings bekommt man dann die Checkboxen nicht so schön in einen Palette nebeneineander. Die Anzahl und Typen richten sich natürlich nach den Parametern, die ich in der Slideshow steuern möchte/kann.

//Steuerung der Headerbilder
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns(
        'pages',
        [
            'slideshowautostart' => [
                'exclude' => 1,
                'label' => 'LLL:EXT:vigem/Resources/Private/Language/locallang_db.xlf:pages.slideshowautostart',
                'config' => [
                    'type' => 'check',
                ],
            ],
            'slideloop' => [
                'exclude' => 1,
                'label' => 'LLL:EXT:vigem/Resources/Private/Language/locallang_db.xlf:pages.slideloop',
                'config' => [
                    'type' => 'check',
                ],
            ],
            'slidenavigation' => [
                'exclude' => 1,
                'label' => 'LLL:EXT:vigem/Resources/Private/Language/locallang_db.xlf:pages.slidenavigation',
                'config' => [
                    'type' => 'check',
                ],
            ],
            'slidespagenavi' => [
                'exclude' => 1,
                'label' => 'LLL:EXT:vigem/Resources/Private/Language/locallang_db.xlf:pages.slidespagenavi',
                'config' => [
                    'type' => 'check',
                ],
            ],
        1
    );

Die neuen Eingabefelder ordnen wir ebenfalls wieder einer Palette zu.

//Header-Slider
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
        'pages',
        'media',
        '--linebreak--,slideshowautostart, slideloop, slidenavigation, slidespagenavi', 'after:media'
    );

Abschließend müssen die neuen Felder auch in der Datenbank angelegt werden. Dafür legen wir die Datei "ext_tables.sql" im Wurzhelverzeichnis unserer Extension an und geben folgenden Inhalt ein.

#
# Table structure for table 'sys_file_references'
#
CREATE TABLE sys_file_reference (
    textonimage text,

);

#
# Table structure for table 'pages'
#
CREATE TABLE pages (
    slideshowautostart tinyint(1) unsigned DEFAULT '0' NOT NULL,
    slideshowvelocity tinyint(11) DEFAULT '0' NOT NULL,
    slidespagenavi tinyint(1) unsigned DEFAULT '0' NOT NULL,
    slidenavigation tinyint(1) unsigned DEFAULT '0' NOT NULL,
);

Über die "Adminwerkzeuge > Wartung" unter "Analyze Database Structure" können die Felder in der Datenbank angelegt werden.

Die Bildinhalte können nun einfach im Page-Fluidtemplate über data DataProcessing, dem FilesProcessor ausgelesen werden und im Template abgerufen werden.

### Bilder aus Seiteneinstellungen -> Resources
    dataProcessing {
        ### Banner-Bilder
        10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
        10 {
            references {
                table = pages
                uid.data = leveluid: -1, slide
                fieldName = media
            }
            as = images
        }
    }

Für den Slider haben wir ein Partial angelegt, das wir bei Bedarf einem Seitenheader zuordnen können. Im unten angezeigten (Muster) Fluid-Template kann man die einzelnen Parameter sehen. Ebenfalls haben wir hier auch noch eine Abfrage der CropVariants für das Responsive-Design. Am einfachsten läßt man sich die Parameter mit einem <f:debug>{_all}</f:debug> anzeigen und gestaltet das Template nach den eigenen Bedürfnissen.

<f:if condition="{data.media}">
    <f:if condition="{images}">
        <div id="page-background-img">
            <div id="bgpicheader"
                class="headerpict">
                <f:for each="{images}" as="image">
                    <div class="slideritem bgimagelarge">
                        <f:switch expression="{data.imageformatheader}">
                            <f:case value="1">
                            </f:case>
                            <f:case value="2">
                            </f:case>
                            <f:case value="3">
                            </f:case>
                            <f:defaultCase>
                                <f:comment>-- normales Bild mit responsive Crop-Varianten --</f:comment>
                                <f:if condition="{image.originalFile.properties.type} == 2">
                                    <picture>
                                        <source srcset="{f:uri.image(image:'{image}',width:'1920c', height: '420c', cropVariant:'desktop')}" media="(min-width:992px)" />
                                        <source srcset="{f:uri.image(image:'{image}',maxWidth:'991',cropVariant:'tablet')}" media="(min-width:768px)" />
                                        <source srcset="{f:uri.image(image:'{image}',maxWidth:'479',cropVariant:'mobile')}" media="(min-width:0px)" />
                                        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" srcset="{f:uri.image(image:'{image}',cropVariant:'desktop')}"  alt="{file.alternative}" title="{file.title}"  />
                                        
                                    </picture>
                                </f:if>
                                <f:comment>-- Text über dem Bild --</f:comment>
                                <f:if condition="{image.referenceProperties.textonimage}">
                                    <div class="cntoverimage">
                                        <div class="cntoverimagecnt">
                                            <div class="layercnt">
                                                <p>{image.referenceProperties.textonimage}</p>
                                            </div>
                                        </div>
                                    </div>
                                </f:if>
                            </f:defaultCase>
                        </f:switch>
                    </div>
                </f:for>
            </div>
        </div>
        <f:if condition="<f:count subject='{images}' /> > 1">
            <script type="text/javascript">            
                jQuery(document).ready(function($){
                    var autoplay = {f:if(condition: '{data.slideshowautostart} == 1', then: 'true', else:'false')};
                    var slidespeed = {f:if(condition: '{data.slideshowvelocity} > 0', then: '{data.slideshowvelocity}', else: 200)};
                    var slideloop = {f:if(condition: '{data.slideloop} == 1', then: 'true', else: 'false')};
                    var slidenavigation = {f:if(condition: '{data.slidenavigation} == 1', then: 'true', else: 'false')};
                    var slidespagenavi = {f:if(condition: '{data.slidespagenavi} == 1', then: 'true', else: 'false')};
                    //Slider im Header
                    if($('.slideritem').length > 1) {
                        ... (je nach verwendetem jQuery-Plugin) ...
                    }
                });
            </script>
        </f:if>
    </f:if>
</f:if>

Auf die Ausgestaltung mit CSS, ... gehen wir hier nicht weiter ein, da das vom jeweiligen Design der webseite abhängig ist.

Erstellt: 06.06.2021

Vielen Dank für Ihr Interesse.
Bei Fragen zu TYPO3, Programmierung oder Upgrades stehen wir Ihnen gerne zur Verfügung. -> Kontakt