As someone new to Grav I would like to share something which could be useful to other newbies.
It’s a simple way to get the Owl image slider to automatically display all the images in a specific directory. This saves the hassle of having to enter the name of each file into the script. It means you can change the images without having to edit the script.
-
Install and enable: Shortcode Owl Carousel
-
Create a directory and put your image files in that directory. I used images which are all the same aspect ratio (square in this case) and I used the path /user/pages/carousel for the directory for the images.
-
Insert this into your page:
(BTW I resize the images to 300 to 300. Obviously you can experiment with that.)
[owl-carousel items=1 margin=10 loop=true autoplay=true autoplayHoverPause=true nav=true dots=false] {% for image in page.find('/carousel').media.images %} {{ image.resize(300, 300).html }} {% endfor %} [/owl-carousel]
Your Caption
That’s it! No need to manually enter the image file names in your script.
nav=true - switches on the navigation arrows < >
items=1 - number of images to show at a time.
dots=false - I use this because I’ve got 50 images and since I only show one item at a time (items=1) I would get 50 navigation ‘dots’ below the carousel if I didn’t set this to false.
You can see it here:
http://globalforgivenessinitiative.com/forgive/forgiveness-quotes
To be honest, I got this to work more by luck more than skill or knowledge. But hopefully it will save someone a bit of time and hassle when trying to get an Image Carousel to work.
William