hauer-heinrich / hh_slider

TYPO3 extension. Adds tiny-slider to TYPO3.

hh_slider

hh_slider is a TYPO3 extension. Integrates the tiny-slider in TYPO3.

Installation

... like any other TYPO3 extension extensions.typo3.org Don't forget to include PageTS / look at features section

Features

• No dependencies like jQuery
• "Content type" - Select "images" if you want only slide images | select "content" if you want to slide content-elements like textmedia
• To slide other elements, for example from other extensions, simply add your own custom json to the document - like: "hh_slider\Resources\Private\Partials\Assets\SliderJson.html" - Important: className "hhSliderJson"
• possibility to add TypoScript and PageTS automatically
  • OR over the backend "Tempalte"-module and page settings -> Resources OR manually by yourself
    • you can change this at backend -> Settings -> Extension Configuration -> hh_slider

Todos

• rework AddAssetsDataViewHelper - the method(s) of this ViewHelper could change!

Deprecated

IMPORTENT NOTICE

Main-view

Options-view

Copyright notice

This repository is part of the TYPO3 project. The TYPO3 project is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

The GNU General Public License can be found at http://www.gnu.org/copyleft/gpl.html.

This repository is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

This copyright notice MUST APPEAR in all copies of the repository!

License

---

GNU GENERAL PUBLIC LICENSE Version 3

hh_slider's Issues

[Feature] option to sort files by date if folder option is used to generate the slider

If the 3rd option (folder) is used to generate the slider the content/files are in alphabetical order and so it's sorted by filename.

It would be good to have an option to sort the files by creation date too. Maybe via a dropdown-menu?

Responsive Slider

TYPO3: 9.5.13, hh_slider: 0.1.6, Firefox 68.4.1 on Android 10 (and Firefox 71.0 on Linux, and some older Safaris of undetermined versions)
The slider stacks the images and the browser does not choose, which image would be the appropriate one as seen in the screenshot.

I "fixed" the issue with setting the max-width of the img to 100% and the height to 100%.

regards - Ines

Should I play around for a real fix?

"Centered Slides" option not working?

Hi,

I enabled the "Centered Slides" option but the slides are not centered.

FE:

BE:

I disabled all custom CSS.

Can someone confirm the issue on the latest version 0.2?
I think it worked before but not sure why it now does not work 🤔

Linked images

Content of the slider: images:
If I add a link to the image, the image is not linked
Content of the slider: content, type images:
The image is linked to the link

I feel like the slider with images should be linked, too.

TYPO3: 9.5.11
hh_slider 0.1.3

use of plugin causes error / typo3 9.5.9/10

use of plugin (Slider [hhslider_hh_slider]) as page content causes error in normal backend page view / typo3 9.5.9/10. with list view it works. frontend output works fine.

`(1/1) #1257246929 TYPO3Fluid\Fluid\View\Exception\InvalidTemplateResourceException
Tried resolving a template file for controller action "Standard->index" in format ".html", but none of the paths contained the expected template file (Standard/Index.html). No paths configured.

in /var/customers/webs/customer1/vendor/typo3fluid/fluid/src/View/TemplatePaths.php line 598
}
$templateReference = $this->resolveTemplateFileForControllerAndActionAndFormat($controller, $action);
if (!file_exists($templateReference) && $templateReference !== 'php://stdin') {
$format = $this->getFormat();
throw new InvalidTemplateResourceException(
sprintf(
'Tried resolving a template file for controller action "%s->%s" in format ".%s", but none of the paths ' .
'contained the expected template file (%s). %s',
$controller,`

and so on...

"hhslider_hh_slider" has no rendering definition!

Hi,
wann try your slider but did not work out of the box for me

Got this error on the Frontend:

Content Element with uid "44" and type "hhslider_hh_slider" has no rendering definition!

Typo3 9.5.14
Bootstrap package 11.0.2

This error on the Backend:

This set in Template:

What did I wrong ?

Thanks

arrowKeys option does not work as expected when changed in the responsive options

Hi,

I have a slider element with 2 videos and I want that arrows are shown in the mobile view so you can switch between the left and right video via the arrows but from a certain breakpoint on I want to show both videos without the arrows.

That's my backend configuration:

Initially, show 1 video (slides per view -> works) and show arrows (Arrow enabled -> works).
From 640px upwards show 2 videos ("items":2 -> works) and disable arrows ("arrowKeys":false -> doesn't work).

Result: the two arrows are still visible past the 640px breakpoint.

I also tried the other way, disable the arrows from the beginning and then tried to enable them via the responsive breakpoints and disable them again but that didn't work either.

Is this an error in overriding some of the responsive options?
Can you reproduce the error?

[Bug] meta-data does not show up in frontend via the folder option

Hi,

I wanted to output some videos with the folder option and wanted to add the meta-data (title, description, caption) which I added to the file directly (filelist). I wanted to place the meta-data information under the video. The problem is that the meta-data does not show up in the frontend.

<f:if condition="{data.tx_hhslider_content_type} == 3">
            <f:if condition="{folderFiles}">
                <f:for each="{folderFiles}" as="file" iteration="i">
                    <f:if condition="{file.extension} == 'mp4' || {file.extension} == 'ogv' || {file.extension} == 'ogg'">
                        <f:then>
                            <div>
                            <f:media class="video-embed-item" file="{file}" alt="{file.alternative}" title="{file.title}" additionalConfig="{settings.media.additionalConfig}" />
                             <p>Erweiterung: {file.extension}<br/>Title: {file.title}<br/>Description: {file.description}<br />Caption: {file.caption}</p>
                            </div>
                        </f:then>

The output looks like this:

Only {file.extension} seems to work.

I use TYPO3 9.5.15 and hhslider 0.1.62.

[bug] error messages in Template module that setup.typoscript and constants.typoscript are missing

If I go to the Template module there is the following error for setup and constants:

Setup:

Constants:

I use the automatic typoscript integration in the extension settings because otherwise I still get an error that Typoscript would be missing:

The slider in general works but I don't know if these error messages are correct and if it's related to the other issue here: #1

responsive content slider

Hi,

I use the extension to create a content slider of videos.
As content I used 5x "text & media" ce with only a video inside. In the options from the slider I set the number of slides to 4. This works in desktop but if I lower the resolution it keeps the 4 videos. What I want is, that if I lower the resolution then fewer slides should be shown.

For example on a smartphone I only want 1 or 2 slides, not 4.

Is there an option to do that? I looked at the tiny-slider project website and there is this option:

<script>
  var slider = tns({
    container: '.my-slider',
    items: 1,
    responsive: {
      640: {
        edgePadding: 20,
        gutter: 20,
        items: 2
      },
      700: {
        gutter: 30
      },
      900: {
        items: 3
      }
    }
  });
</script> 

which is basically exactly what I want. Define some breakpoints and the number of slides which should be shown. Unfortunatelly that didn't work... so my question is: Should this work and can I use all the options from the plugin or does this have to be configured in the extension somehow?

hh_contetslider doesn't slide in TYPO3 12.4.14 any more

Hi,
I'm currently trying to integrate the hh_slider version 0.5.1 into a TYPO3 12.4.14 setup. In the case after updating a page from 11.5.36 to 12.4.14 and the slider from version 0.2.6 to 0.5.1, the integration of content has resulted in the content no longer sliding but instead being displayed one below the other.

Thanks
Stefan

content element + text & media (video) + ie11 - wrong height and flicker outside the container

Hi,

I noticed that there is an issue if you want to use the slider as content element slider with an text & media element which has only a video file (for a video slider). This problem is only in IE11 and I currently don't know if it is a tiny-slider issue or another thing.

What I did was:

1. create a slider with 5 or more "text & media" content elements
2. add to each content element a mp4 videofile
3. in options: slides to scroll = 1 and add an option in the json for responsiveness:
   "responsive": {"640": {"edgePadding": 20,"gutter": 20,"items": 2},"992": {"edgePadding": 30,"items": 3},"1200": {"edgePadding": 40,"items": 4}},

In Chrome, Edge and Firefox all is fine but IE11 has some problems.

First, I see 5 or more slides and not only 4.
The Second problem is the wrong height of the slides. It seems like that the slides are not correctly calculated and they have a 100% width and overlap each other.

If I activate the loop option in the slider options, I see even more slides on the left and right and if I scroll using the arrow buttons the slides flicker.

I also use the hh_video_extender extension.

Can someone reproduce some of the mentioned problems in IE11?

[Feature Request] slideBy option

We would like to have the slideBy Option as mentioned in https://github.com/ganlanyuan/tiny-slider

[Feature] option for a poster/preview image for video files when using the content folder option

If you use the content folder option to add the slider you can add videos.

However, my video previews in the slider are all black and that's probably because the poster/preview image option is missing. So, I think an option for poster/preview images in video files would be nice. Therefore the user can add individual previews which are then added to the videofiles.

I can think of two ways to achieve that but maybe there are more and better solutions:
1.) make a folder "poster_images" (or "preview_images_for_video" or something else) inside the content folder with the video files where you can put all preview images for videofiles as png or jpg. They should have the same name as the video file. Then when creating the source tags the preview image should be added from inside the folder. Why an extra folder: Because otherwise the image would be added as slide to the slider.
2.) Make an option in the backend to select the folder with the preview images. Filenames should be the same as the videofiles (like in 1.)). You can then have only one folder for the preview images if you have multiple video sliders on your website. (Not sure what is the better solution here...)

"Number of slides going on one "click"=1

Beim Einbinden von Content, trotz "Number of slides going on one "click"=1", erfolgt der Slide nicht auf den nächsten, sondern slidet bis zum übernächsten Content-Element.

[BUG] Slides not rendered with Content type 'content'

Using hh_slider with Content type 'content' the slides (e.g. 2 Text&Media CE's) are not rendered in the FE

FE Output:

<div id="c30" class="hh-slider frame 0 frame-default frame-type-hhslider_hh_slider frame-layout-0">
    <div class="slider-container slider-container-30">
    </div>
    <span class="slider-button slider-button-prev"></span>
    <span class="slider-button slider-button-next"></span>
</div>

Environment:
TYPO3 12.4.2
PHP 8.2.2
hh_slider 0.4.2

[Feature Request] option for custom pagination placement

Hi,

the default placement of the pagination is below the slider. Maybe it's possible to add an option so that the pagination can be displayed inside the slider at the bottom of the images?

Embedded content appears twice in the hh_slider

I'm trying to use the hh_slider version 0.4.4 for Typo3 12.4.7.
I'm embedding content using the 'Insert Record' feature of Typo3 in the hh_slider.
However, the content I embed in the hh_slider appears twice."

exclude webm video from an extra video tag if mp4 with the same name is already available

I tried the folder option and noticed the following two bugs:

I have a folder with 2 video files: teaser.mp4 and teaser.webm
Furthermore I have a responsive option which should show 4 slides at a particular breakpoint.

Now, if I use the slider by folder content option multiple video tags are added, one tag with only the webm file and on tag with both, the mp4 and webm file:

<div class="slider-container slider-container-7585  tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal" id="tns2" style="transform: translate3d(-25%, 0px, 0px); transition-duration: 0s;">
    <video playsinline="" muted="" loop="" controls="" no-cookie="" preload="" class="video-embed-item tns-item" aria-hidden="true" tabindex="-1">
        <source src="/fileadmin/videos/teaser.webm" type="video/webm">
    </video>
    <video playsinline="" muted="" loop="" controls="" no-cookie="" preload="" class="video-embed-item tns-item tns-slide-active">
        <source src="/fileadmin/videos/teaser.webm" type="video/webm">
        <source src="/fileadmin/videos/teaser.mp4" type="video/mp4">
    </video>
    <video playsinline="" muted="" loop="" controls="" no-cookie="" preload="" class="video-embed-item tns-item tns-slide-active">
        <source src="/fileadmin/videos/teaser.webm" type="video/webm">
    </video>
    <video playsinline="" muted="" loop="" controls="" no-cookie="" preload="" class="video-embed-item tns-item tns-slide-active" id="tns2-item0">
        <source src="/fileadmin/videos/teaser.webm" type="video/webm">
        <source src="/fileadmin/videos/teaser.mp4" type="video/mp4">
     </video>
     <video playsinline="" muted="" loop="" controls="" no-cookie="" preload="" class="video-embed-item tns-item tns-slide-active" id="tns2-item1">
        <source src="/fileadmin/videos/teaser.webm" type="video/webm">
     </video>
     <video playsinline="" muted="" loop="" controls="" no-cookie="" preload="" class="video-embed-item tns-item tns-slide-active">
        <source src="/fileadmin/videos/teaser.webm" type="video/webm">
        <source src="/fileadmin/videos/teaser.mp4" type="video/mp4">
     </video>
     <video playsinline="" muted="" loop="" controls="" no-cookie="" preload="" class="video-embed-item tns-item tns-slide-active">
        <source src="/fileadmin/videos/teaser.webm" type="video/webm">
     </video>
     <video playsinline="" muted="" loop="" controls="" no-cookie="" preload="" class="video-embed-item tns-item" aria-hidden="true" tabindex="-1">
        <source src="/fileadmin/videos/teaser.webm" type="video/webm">
        <source src="/fileadmin/videos/teaser.mp4" type="video/mp4">
     </video>
</div>

The extra video tag with only the webm file is not necessary because it's already included as a second source in video tag with that mp4 file.

=> Therefore it's better to exclude the video tag with only the webm video by default and if really necessary make an option to include the webm video as separate video tag in the slider.

As said, I configured a responsive option which should show 4 items/videos in desktop mode at a certain breakpoint.
Because of this option I end up with the same video multiple times.

=> Maybe it's possible to check if the minimum number of files/videos is available to create the slider with arrows. If you have only 1 or 2 videos, adding the same video multiple times makes no sense. In that case the slider should only have 1 or 2 slides and shouldn't be scrollable. However, if you change the view and look at the slider on a smartphone (where you have maybe configured that only 1 slide should be shown) then you should be able to scroll if you have 2 files/videos.

[feature] responsive configuration should be configurable via the backend options

Right now it's only possible to define a fixed numer of slides which then shows up in the frontend. This number is valid for all breakpoint/resolution.
If you want to have 4 slides to display at once in the frontend you can set the "Slides per view" option to 4 and that will work on desktop resolutions but also effects the smartphone resolutions. But there you normally want to have fewer slides, maybe only 2 or 1 slide.

To make that work, you can add the responsive option to the JSON partial file, for example:
"responsive": {"640": {"edgePadding": 20,"gutter": 20,"items": 2},"992": {"edgePadding": 30,"items": 3},"1200": {"edgePadding": 40,"items": 4}},

There you can add multiple breakpoints and the number of items to display.

The problem is, that this option does not exists in the backend and therfore is not configurable and a fixed option for all sliders on the website will be used.
This option might work for an image- or videoslider but if you want to add a banner slider with only one image at a time this won't work. Because of the fixed resolution options in the JSON partial you will end up with 4 banner pictures at once.

Therefore, the resolution option should be configurable in the backend to make different sliders on the website more adjustable. The 'Slides per view' option can then be used to set the number of slides for the smartphone resolution only and for all other breakpoints you use the breakpoint option.

Maybe it's possible to add an IRRE field where you can add breakpoints and to each breakpoint you can add options which the tinyslider supports for the resolution option like items, gutter, etc.

Caption

When I'm using multiple images and slide, the caption text is in the middle of the slide, not in the middle of each image.
When using fade it works perfect.

Is this a bug or am I doing something wrong?

add new content-type video / add & customize file formats for content-type image

Hi,

via the content-type images it's possible to add individual images to a slider.
If an editor wants to create a video slider, the content type folder has to be used. The folder has then all video files included.

There are cases where video files exists in different folders across the filelist, so it's not possible to create a videoslider from videos in different folders.

Would it be possible to create a new content type video with support for mp4, webm, mpd and m3u8?
The last two formats are the streaming formats MPEG Dash and HLS and the extensions *.mpd and *.m3u8 are the playlist files.

Or as an alternative, would it be possible to add those formats to the content-type image and rename that content-type to media? Not sure if that is already possible, that the extension could be configured to add or remove file formats in the image content-type?