This is How to get Owl Carousel to Automatically Display all the Images in a Directory

[WilliamM]

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.

1. Install and enable: Shortcode Owl Carousel

2. 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.

3. 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

[ianb]

Hello
I dont see any other replies so maybe I am the first to be the “someone” whom your saving some time.
The thing is when you’re completely new to Grav and the web enviroment, its a little daunting as everyone seems to be a geek.
I dont know how to manipulate git etc, so I turn to communites to try to get soem assistance.

In this case my Grav site is up, and I am trying to use the theme Future201 to set up the pages. The shortcode owl carousel plugin is downloaded and enabled according to the little blue switch it?
I followed your instruction and created the same carousel directory in my home directory /home/ianb
In that directory I put a few images to test with

So hopefully I got 1 and 2 correct.

Then on to 3 and this is where I get concerned as you say “Insert this into your page:”

So I copied
[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]”

into the page I want to test with, here’s a screenshot

I don’t know if that’s the “page” you are referring to, or if this “code” needs to go somewhere else, there your instruction isn’t specific.

Well the result is the same as for other attempts I’ve made

The code is displayed rather than executed.

Here’s my plugins page

so unless I missed something the plugin is enabled.

I must be missing something or I am not inserting into the correct page.

Any ideas?

Many Thanks
ian

PS/

Here’s how the md file looks

more modular.fr.md

title: Carousel-home

show_pageimage: false
image_width: 1038
image_height: 437
content:
items: ‘@self.modular’
media_order: ‘Estoril Pier.JPG,Donegal Cottage.JPG,4318.png’
show_sidebar: false

[owl-carousel items=1 margin=10 loop=true autoplay=true autoplayHoverPause=true nav=true dots=false] {% for image in pag
e.find(‘/carousel’).media.images %} {{ image.resize(300, 300).html }} {% endfor %} [/owl-carousel]

[pmoreno]

@ianb If you embed Twig code in your page content, you must have the Twig option enabled in the Advanced tab for it to run.

On the other hand, the Future2021 theme already includes a template for displaying galleries with Owlcarousel (in this case, the images are saved in the page’s folder, but with a minor adjustment to the template’s blueprint, you could save them in a different location).

[ianb]

Hello Pedro
Thanks for your quick response and helpful remarks.
I guess I’m just too new to this to have the reflexes getting started, and no so little about twig stuff and Grav in general.

Now I have taken the initiative to look inside the themes directory and start reading what I see under Future2021 in greater depth.
That’s also how I found the doc page that you created, I didn’t know about that until I found the link in your README.md

To react to your comments, no that option for twig execution was not chosen,
It is now and now the carousel works.

Its a good job the community exists and there active members still responding after quite a few years since Grav was published, and you published your theme work.
So I am grateful and its great thanks. I’ll keep reading and try not to bother until I get stuck.

Now I know that owl is supported by your theme, and that you have provided a template for its us, then I’ll have to go and study that in detail to make this better

[pmoreno]

@pmoreno

On the other hand, the Future2021 theme already includes a template for displaying galleries with Owlcarousel (in this case, the images are saved in the page’s folder, but with a minor adjustment to the template’s blueprint, you could save them in a different location)

Okay, I think I got confused with another theme here. Future2021 has a specific partial for the Owlcarousel plugin, not a complete template, although I will investigate if I include it in later versions

[ianb]

OK and no issue
I suppose what I’d request is that you ouline when to use what i.e. adv/disadv of using the Owl shortcode plugin and twig code provided by folk on the community vs what you add into your theme.