如何控制TYPO3的Twitter Bootstrap程序包中Carousel元素的速度

Question

I have tried to find an answer, but all I get is answers on how to control the speed when implementing Twitter Bootstrap by your self.

I cannot figure out how to do it in TYPO3. I think it should be done through TypoScript, but how?

Answer 1

In Bootstrap 3's Carousel, you can set the option interval or data-interval , see http://getbootstrap.com/javascript/#carousel .

You know that already. Here's how I'd do it:

First you have to find out if the extension can set that parameter at all. Supposing the manual is quiet on that, you want to check the Constant Editor under Templates > Constant Editor first. No luck yet.

So you will have to look at the code of typo3conf/ext/bootstrap_package . Everything that can be set via TypoScript will probably be in /Configuration/TypoScript/ : constants.txt and/or setup.txt . Nothing there for the carousel, though.

Now the I would search for interval in the entire extension, using your favourite editor. Ah, there you are: In the file /Resources/Private/Templates/ContentElements/Bootstrap/Carousel.html you will find the interval of 10seconds hardcoded:

<div id="carousel-{data.uid}" class="carousel slide{f:if(condition: '{data.layout} == 110',then:' carousel-small')}" data-interval="10000" data-ride="carousel">

Of course, do NOT edit the extension as you have to keep it updateable. No problem, though.

If you search for Carousel.html , you will find it in /Configuration/ContentElements/Bootstrap/Carousel.ts :

tt_content.bootstrap_package_carousel = COA
tt_content.bootstrap_package_carousel {
    10 =< lib.stdheader
    20 = FLUIDTEMPLATE
    20 {
        file = {$plugin.bootstrap_package_contentelements.view.templateRootPath}Bootstrap/Carousel.html
        partialRootPath = {$plugin.bootstrap_package_contentelements.view.partialRootPath}
        layoutRootPath = {$plugin.bootstrap_package_contentelements.view.layoutRootPath}
    }
}

So that's where the path to the template is set. And oho! The thing inside the curly brackets is a constant. Turns out that right at the beginning, we could have set a complete new path to include a copy of all bootstrap templates from bootstrap_package/Resources/Private/Templates/Page/ and do the modification there. As well as for Partials and Layouts, which are other, larger and smaller chunks of fluid templates (cf. http://typo3.org/documentation/article/the-fluidtemplate-cobject/ ).

If out of some reason you'd only like to modify that very specific part of the bootstrap package, you can set something like this in your TypoScript:

tt_content.bootstrap_package_carousel.20.file = /path/to/my/template/ext/Bootstrap/Carousel.html

Now all you have to do is to create a copy of the carousel template and edit it at will - in the rendering process, your own template will be used, featuring faster intervals.

This should also demonstrate the overriding powers of TypoScript nicely - you can do stuff like that at any point in the page tree for the branch you want.

Also, I'd like to point out that I find this a very good approach to the authoring of TYPO3 extensions: instead of having dozens and dozens of constants that could be set in the backend like in the old days, we now have replaceable fluid templates with clear structure. Much more maintainable and easier to use this way!