I’m trying to transition a website (rpallen.com.br) from WordPress to Grav. I’ve been pretty successful so far, but I’m having trouble with the slider. I’m using owl carousel and I can’t figure out how to put captions below the pictures. If you go to the current website, you’ll see what I’m trying to achieve. Unfortunately, I’m developing the Grav version on my local computer so I can’t really show you what I currently have in Grav.
I couldn’t find a way to add captions to the pictures if I use markdown for the slider images, so I tried using html instead, specifically, using the “fugure” tag. The code for the testing is (I cut it back to just three images for the testing):
[owl-carousel items=2 margin=10 loop=true autoplay=true autoplayHoverPause=true nav=false slideBy=2] <figure> <img style="margin:0;padding:0;" src="eu.jpg"/> <figcaption>Caption 1</figcaption> </figure> <figure> <img src="party_group.jpg"/> <figcaption>Caption 2</figcaption> </figure> <figure> <img src="eating.jpg"/> <figcaption>Caption 3</figcaption> </figure> [/owl-carousel]
I previously used markdown for the images:
!(eu.jpg) and that worked fine for just the images. But I want to have the captions.
When I used the code above, it worked, but the images were somwewhat smaller than when I used markdown for the images. I removed the captions to see if that affected the image size and it did NOT. The other thing that changed was the direction of the transition. When I used the markdown code, the transition went from right to left (i.e, they “swiped” from right to left), which is the way I want it to go and is the way it goes on my current site. But when I used html, the direction of the transition went in the opposite direction.
I’ve included screenshots of the slider one with the markdown code and one with html code so you can see the difference in size of the images.
Any ideas how to get this working the way I want with the images the same size in markdown and html?