- A Kirby Starterkit installed and running.
- Code editor to edit files
Let's say you've downloaded and installed Kirby's Starterkit, everything is running fine, but instead of having a list of images on the album pages, you want an image slider/carousel.
In this recipe, I'll show you how to add the CSS and script files that come with such a library to the Starterkit.
We'll use Glider.js as an example, but the general steps are the same no matter which slider (or other) library you use:
- Download the library files
- Copy them to your project
- Include the CSS file in the
heador before the closing body tag (as described in your library's documentation)
- Add the required HTML markup if necessary
- Initialize the script if necessary
Note: In this recipe, we assume that you are downloading the sample library; installing libraries via npm is not covered. Also, the library used here is just an example, which does not mean that I recommend using it in particular. Choose what you like best.
Step 1: Download files
Visit Glider.js and download the latest release using the download button.
Step 2: Copy files to project
Copy the unzipped folder into the
assets/js/ folder in the Starterkit, so that your file system now looks similar to this:
Step 3: Add styles
Now let's add the CSS file included with the library in the
head tag of our document.
In your code editor, open the
site/snippets/header.php file. Then we use the
css() helper to create a link tag for the CSS file:
This will create the following
link tag when rendered:
Step 4: Add script
site/snippets/footer.php snippet. Right before the closing
/body tag, we use the
This will creat the following
script tag when rendered:
css()/js() helpers expect the path to the files as argument. If you put the folder somewhere else, adapt the path accordingly.
For our little example, we only want to load the files when the page is an
album page, therefore I used the if statements. Remove them if you want to load them everywhere.
Step 5: Adapt the markup
We have to change the markup in the
/site/templates/album.php template a bit (basically removing/replacing classes to get rid of the original layout, change the image format), so that we end up with this template:
Step 6: Initialize the slider
As our last step, we have to add a
script tag in the footer to initialize the slider after including the library:
As a finale step, add the following lines to
/assets/css/templates/album.css to get rid of the scroll bar.
And with this, we are done. Not particularly beautiful yet, but it works. Play around with the options to see what you can do with it. You will find this information in the documentation of the library.