Navigation überspringen Zur Navigation
Say hello
TYPO3 Tipps:

Slider in TYPO3 without extension with mask

TYPO3 Tipps TYPO3 11 TYPO3 12

We create a slider in TYPO3 without using a ready-made extension from the TER.

Advantage: With every upgrade, we have to hope that the nice colleagues who have developed an extension will adapt it to new TYPO3 core versions - or do it themselves.

 

Content:

Content elements with the TYPO3 Extension Mask

Installation Mask

Create first mask element instead of creating your own extension

Slider Framework

 

Content elements with the TYPO3 Extension Mask

Mask is also an extension. Basically, we also have the issue of upgrades to the TYPO3 core here. However, this extension is popular and is always being adapted. Furthermore, we can create a number of content elements that are then based on this one extension. 

There are own content elements, for example:

  • Accordion
  • Testimonials
  • FAQ lists
  • Special typography, headings that are defined differently
  • Featured content boxes that always have the same content (CV, or similar)
  • Popup info boxes
  • Google Maps or Open Streetmap

The list goes on and on, depending on your creative mood. So let's get started:

Installation Mask

For the installation of TYPO3 version 11 or higher, I recommend the use of a sitepackage.

Because here we get all Mask sources neatly referenced in the folder structure of the sitepackage.

So after installing Mask, we click on the extension in the bar on the left. Mask then asks for the name of the sitepackage. Once we have entered this, these paths are created automatically.

Of course, the paths can be adjusted manually. The paths can be defined under /Settings /Extension Configuration /Mask

The relevant files can be found in the folder when installing via the site package:

Configuration:

EXT:siteconfig / Configuration / Mask / mask.json

Templates are exported here by Mask:

EXT:siteconfig / Resources / Private / Mask / Frontend

EXT:siteconfig / Resources / Private / Mask / Backend

The files in the frontend are self-explanatory. Here you will find the fluid templates for the output on the TYPO3 Hannover website in this case.

Those for the backend can be customised with the markers so that the editor can see, for example, the headline and image in the backend in the content element for better usability.

The Mask library still needs to be integrated into the root template of the TYPO3 Hannover website project.

 

Create first mask element instead of creating your own extension

After clicking on Mask, we can create our first content element.

We now name the element and have the option of defining a number of fields that will then be visible in the backend as input fields etc.

Create a mask element
Create a mask field

Slider requires the "Repeat" element

A slider consists of several elements that follow one after the other.

Mask makes it possible for us to create a slider with the "Repeat" function.

Several elements can be created in the backend that always contain the same input fields. You can then create 4 slider elements, for example, and these will only be rendered if they are filled with the condition that one element must be filled. We can also limit the number of slider elements to be created to 4, for example, to prevent editors from uploading 30 elements.

 

Assuming we only want one image and one slider on our slider, there are no limits to creativity here. But here is just a simple example.

After saving and closing, we get the element and a fluid template, which we now embed in HTML.

As we can see, we have a loop and the image, as well as the text.

Now we can close the element and read out the source code.
 

Close the mask element
Fluid text 
<f:if condition="{data.tx_mask_slider}">
    <ul>
        <f:for each="{data.tx_mask_slider}" as="data_item">
            <li>
                <f:if condition="{data_item.tx_mask_silder_slogen}">
                    {data_item.tx_mask_silder_slogen}
                </f:if>
                <f:for each="{data_item.tx_mask_slider_img}" as="file">
                    <f:image image="{file}" width="200" />
                    {file.description}
                </f:for>
            </li>
        </f:for>
    </ul>
</f:if>

Here we see the backend.

Mask Backend
Create new elements

In the folder

typo3conf/ext/sitepackage_fluid11/Resources/Private/Mask/Frontend/Templates/Slider.html

now contains this file, which we will now wrap with the slider markup.

ATTENTION: If changes are subsequently made in Mask, e.g. a field is added, the template is not exported to the target directory again. This would also be stupid, as all the work would then be overwritten.

You must therefore call up the Fluid template and copy out the relevant elements.

Slider Framework

Now we are looking for a slider that fits. I usually use the Swiper Slider

v6.swiperjs.com/demos

It can do everything that is normally required.

Here are some demos: v6.swiperjs.com/demos

Now we download the resources and integrate them:

CSS and Javascript are installed via setup.typoscript in

typo3conf/ext/sitepackage_fluid11/Configuration/TypoScript/setup.typoscript

integrated

 

includeCSS {
         slider = EXT:sitepackage_fluid11/Resources/Public/Css/swiper/swiper-bundle.min.css
    }

 includeJS {
        
        jquery = EXT:sitepackage_fluid11/Resources/Public/JavaScript/jquery.min.js

sliderjs = EXT:sitepackage_fluid11/Resources/Public/JavaScript/swiper/swiper-bundle.min.js

    }

The demo files are available here:

https://unpkg.com/swiper/

 

Integrate HTML semantics into template

This is how the TYPO3 Fluid Template must display the HTML page:

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

<script>

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

</script>

Fluid Template

Nun nehmen wie die HTML Struktur und binden einfach die Fluid-Elemente in das Template 

typo3conf/ext/sitepackage_fluid11/Resources/Private/Mask/Frontend/Templates/Slider.html

So könnte es dann aussehen:

 

<!-- hier Abstand oben und unten -->
<div id="c{data.uid}"
    class="frame frame-default frame-type-text frame-{data.layout} frame-space-before-{data.space_before_class} frame-space-after-{data.space_after_class}">


    <f:if condition="{data.tx_mask_slider}">
        <div class="swiper">
            <!-- hier beginnt die Schleife -->
            <f:for each="{data.tx_mask_slider}" as="data_item">
                <div class="swiper-slide">


                    <f:for each="{data_item.tx_mask_slider_img}" as="file">
                        <div class="sliderimg-lr">
                            <f:image image="{file}" width="1800" />
                        </div>

                    </f:for>
                    <f:if condition="{data_item.tx_mask_silder_slogen}">
                        <div class="swiper-text"> {data_item.tx_mask_silder_slogen}</div>
                    </f:if>
                </div>
            </f:for>
            <!-- hier endet die Schleife -->
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- If we need scrollbar -->
            <div class="swiper-scrollbar"></div>
        </div>
    </f:if>


</div>

<script>

    const swiper = new Swiper('.swiper', {
        // Optional parameters
        direction: 'vertical',
        loop: true,

        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
        },

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // And if we need scrollbar
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    });

</script>

All in all, this is just the basic function. You can then use Mask to add various functions, e.g. speed, alignment, pagination via conditions.

Back

Related News

©2024 DbjE

Legal information

Legal information