How to Extend your Page class with CarouselExtension

[kjcsb1]

The first step of your instructions say:

Extend your Page class with CarouselExtension

I'm trying to figure out how to do that but am getting confused. Any advice appreciated

[Taitava]

Sorry, I think I will need to amend the instructions to be more specific. You need to create a YAML config file mysite/_config/slickcarousel.yml and put this content inside it:

Page:
  extensions:
    - CarouselExtension

Or, if you prefer, you can put the above to the already existing file mysite/_config/config.yml instead, but usually module specific configuration options are instructed to be placed in their own, separate files.

Also note that this configuration assumes that you want all Page objects (= regular pages) to be able to have a carousel. This is fine, but if you want to make it possible to create carousels only for a certain page type, replace the Page class name with for example HomePage, MyCustomPage or what ever page class name you want to use.

And once you have the carousel up and running, you may want to alter some of the Slick's options. You can put them right after the above configuration. An example:

Page:
  extensions:
    - CarouselExtension

Carousel:
  slick_options:
    autoplay: true
    autoplaySpeed: 5000
    dots: true

These are not mandatory, so you can leave out any options that you do not need to alter. Also this example does not include all the available options. All options can be found from the Slick's official website.

Note that you need to run /dev/build?flush=all after any additions/changes to YAML config. Otherwise they will have no effect.

Please let me know if you have any further questions. :)

[kjcsb1]

Thanks, I can now see the Carousel tab and have added a carousel however the carousel doesn't render properly.

I can see the custom content of each slide on the page, and a "mashed" version of each image but the images are not the correct size and they don't have buttons or rotate. Is there anything else I need to do to get the carousel to work properly?

I have set Carousel: slick_options: autoplay: true autoplaySpeed: 5000 dots: true

Also we have various content types that can be added to a page which allows us to lay out the page. e.g. html area, quote, image panel etc. Would it be possible to add this is a content type and then the user could easily choose where the carousel would appear on the page?

[Taitava]

Okay, it seems that you are quite close to get it working. What I suspect now is that the Slick's JavaScript and/or CSS files are not loaded to the browser for some reason.

In the browser, please open the source code view of the page that has a carousel. Then see if you can find these paths in the source code:

• slickcarousel/vendor/slick/slick/slick.css
• slickcarousel/vendor/slick/slick/slick-theme.css
• framework/thirdparty/jquery/jquery.min.js
• slickcarousel/vendor/slick/slick/slick.min.js
• slickcarousel/js/slick-init.js

There should also be an inline <script> element defining Slick settings in the HTML source code:

<script type="text/javascript">
var GLOBAL_SLICK_OPTIONS = {......};
</script>

or something like that. Note that you should not create this script tag manually. The module should do that automatically for you because it outputs the correct Slick options there, based on the YAML config mentioned abovve.

If the page source code does not contain those file names, I can think of two situations that could explain it: 1) CarouselExtension::InitCarousel() never gets executed. This however should happen automatically if you use $Carousel in your template. You can also call the initializer manually by putting $InitCarousel anywhere in your template file or by calling Carousel::Requrements() anywhere in the PHP code. It does not matter if it's called multiple times. 2) The files do not exist on the server side or they are located in a different folder than where the paths suggest. If a file listed above does not exists on the server, SilverStripe does not create a <script> or <link> tag for that particular file in the HTML output at all. (And it also does not yell any warnings, which is sad).

Sorry, I'm not sure what you mean by "content type" in your last question. Can you explain it more?

[kjcsb1]

Thanks again for your help.

I have `

`

But for some reason I have <script type="text/javascript">//<![CDATA[ //Slick carousel options: var GLOBAL_SLICK_OPTIONS = {"autoplay":true,"autoplaySpeed":3000,"dots":true}; //]]></script>

Any thought as to why that is commented out?

Regarding ContentTypes, we have the following in mysite/code/ContentPage.php ` public static $many_many = array( 'ContentTypes' => 'ContentType' );

public function getCMSFields()
{
    $fields = parent::getCMSFields();
    $fields->removeByName('Content');

    $gridField = new GridField(
        "ContentTypes",
        "Content:",
        $this->ContentTypes(),
        GridFieldConfig::create()->addComponents(
            new GridFieldToolbarHeader(),
            (new GridFieldAddNewMultiClass())->setClasses([
                'AccordionItem',
                'TwoColTextImagePanel',
                'TextArea',
                'TabGroup',
                'TableItem',
                'IconRow',
                'BubbleQuote',
                'HtmlArea'
                ...

`

Then within the Content block of a ContentPage we can add these various elements. I would like to be able to add Carousel as one but I'm not sure how to do that. If you have some advice I would appreciate it.

[Taitava]

Ah, I guess there is a problem with newlines in the inline JavaScript part. Which web server operating system do you have? Windows perhaps? I have developed this module on a Linux machine so it came to my mind now that perhaps the Linux new line characters in the PHP source code do not work well in other platforms. If this is the case, I will need to fix the customScript(...) part of the Carousel::Requirements() method.

I think you can integrate the carousel to the content types too. It should be possible, but if you run into any issues when doing that, I would like to see the source code of your ContentType class (or at least a part of it). So this is how you should start:

Amend your slickcarousel.yml file with this:

ContentType:
  extensions:
    - CarouselExtension

I guess you have perhaps a ContentType.ss template file or some other template file(s) for the content type elements. Insert $Carousel somewhere in the template file(s).

Run /dev/build?flush=all.

If I'm correct, this should be all you need for a basic integration to your ContentType class. The module updates the CMS fields of the ContentType class automatically, which means that every ContentType object will have a possibility to include a carousel in it. If you want to avoid this - meaning that you want the carousel functionality for only some ContentType objects, please let me know so we can think of how to prevent the new CMS fields from appearing to all of the objects.

For the JavaScript bug, you can try to put some more newlines after the //Slick carousel options: line in Carousel::Requirements. If this works, I will find a way to fix the methods, which after you can remove your temporary fix and update the module.

[Taitava]

Ah, I guess there is a problem with newlines in the inline JavaScript part. Which web server operating system do you have? Windows perhaps? I have developed this module on a Linux machine so it came to my mind now that perhaps the Linux new line characters in the PHP source code do not work well in other platforms. If this is the case, I will need to fix the customScript(...) part of the Carousel::Requirements() method.

It's been a while, so I assume that this is the issue and I will commit a fix for it now. If it doesn't help, please open a new issue (this one has a different topic actually, so I think it's best not to reopen this one).