Need help to utilize the Owl Carousel shortcode plugin

Hi there!
I Need help to utilize the Owl Carousel shortcode plugin.
I'm studying Grav a bit by bit and looking into developed themes.
Now I want to modify a theme, and it has showcase.html.twig
There I've pasted all possible Owl Carousel's options, such as:

[owl-carousel items=1 margin=10 loop=true autoplay=true autoplayHoverPause=true nav=true]
![](image-1.jpg?cropZoom=1024,300)
![](image-2.jpg?cropZoom=1024,300)
![](image-3.jpg?cropZoom=1024,300)
[/owl-carousel]

or

[owl-carousel items=2 margin=10 loop=true]
<div style="background: url({{ page.media['image-1.jpg'].url }}) 50% 50%;background-size: cover;color:#fff;">
  <h2>This is panel 1</h2>
  <p>foo</p>
</div>
<div style="background: url({{ page.media['image-2.jpg'].url }}) 50% 50%;background-size: cover;color:#fff;">
  <h2>This is panel 2</h2>
  <p>foo</p>
</div>
<div style="background: url({{ page.media['image-3.jpg'].url }}) 50% 50%;background-size: cover;color:#fff;">
  <h2>This is panel 3</h2>
  <p>foo</p>
</div>
[/owl-carousel]

But I see only a text otuput.

The shortcode plugin is enabled by default

hey there,

what theme are you using/ looking at? maybe i find my answers there. am also trying to figure out how to work with the owl carousel (my post), but from what i understand, markdown shortcode ([owl-carousel]...[/owl-carousel]) can't be used in a twig file.

but i guess you have tried the regular way in your page edit window (editing the .md file) already, right?

Hi!
I'm extending from theme "deliver".
Yes, I've pasted mentioned code into twig files, but no luck...

@01K, @leG See my reply to the issue posted by @leG .

Hope that solves a bit of the confusion...

Hi @pamtbaau !
Thank you,
I've added

    process:
        twig: true

at the very beginning of 'modular/showcase.html.twig', but still no luck...
What I'm doing wrong?

@leG, does it helped to you?

@01K, The sample code I showed is the content of a *.md page file (in your case probably '_showcase.md'), not a Twig template file (in your case modular/showcase.html.twig).

Yes, my file is .twig
So, there are no options to use shortcodes in showcase.html.twig file?

Thanks a lot @pamtbaau that's probably the closest i got so far! 🙌
but...

While this shortcode function seems like just what i need, I cant get your example to work?! What am i missing?

Here is what i did:

The output with your suggestion looks like this:

rendered html:

<div class="owl-carousel owl-theme" id="owl-2cc0b1704b">
     <img src="/user/pages/01.modular/_module/image01.jpg">
     <img src="/user/pages/01.modular/_module/image02.jpg">
</div>

and not like the other owl-carousels i am using on the same page. no carousel visible. so, i thought, i try to change the twig part to the format i would use in my .md file:

module.html.twig:

{% set carousel = "[owl-carousel items=1 margin=10 loop=true nav=true]" %}
  {% for image in page.media.images %}
    {% set carousel = carousel~"![]("~image.filename~")" %}
  {% endfor %}
{% set carousel = carousel~"[/owl-carousel]" %}
{{ carousel|shortcodes }}

but then the output is the following...

rendered html:

<div class="owl-carousel owl-theme" id="owl-eeaef388b1">
    ![](image01.jpg)
    ![](image02.jpg)
</div>

Also tried this with one hardcoded image only...

module.html.twig:

{% set carousel = "[owl-carousel items=1 margin=10 loop=true nav=true]![](image01.jpg)[/owl-carousel]" %}`
{{ carousel|shortcodes }}

Still it would only process the the "outter" markdown part.

thanks a lot for the help.

edit: where i put what

@leG, Starting from a fresh installed One-Page skeleton, I did the following:

• Installed the Owl Carousel plugin using bin/gpm install shortcode-owl-carousel
• Copied image '/user/pages/01.home/03._callout/jeep.jpg' to get 2 images in the page's folder.

• In file '/user/themes/quark/templates/modular/text.html.twig', I replaced line 12:

  TWIGCopy

  {{ image.html|raw }}
  

  with:

  TWIGCopy

  {% set carousel = "[owl-carousel items=1 nav=true]" %}
  {% for image in page.media.images %}
    {% set carousel = carousel~"<img src=\""~image.url~"\">" %}
  {% endfor %}
  {% set carousel = carousel~"[/owl-carousel]" %}
  
  {{ carousel|shortcodes }}
  

• To be sure the webpage is freshly created everytime I refresh the browser, I switched off caching in '/user/config/system.yaml':
  YAMLCopy

  cache:
  enabled: false
  

You should now see a working carousel with 2 identical pages when you refresh the browser...

Notes:

• Switch caching on when you go in production!
• Don't edit '/user/themes/quark/templates/modular/text.html.twig' as I did, but instead create a child theme to prevent future updates of Quark to override your changes.

@pamtbaau, a little offtop.
I've resolved my issue with your help.
Now the images are shown in the way which I want, perfect.
But I want to add a heading/text to a slider. Here comes big problems.
Now this code works fine:

[owl-carousel items=1 margin=10 loop=true autoplay=true autoplayHoverPause=true       nav=true]
    ![](image1.jpg?cropZoom=1024,300)
    ![](image2.jpg?cropZoom=1024,300)
    ![](image3.jpg?cropZoom=1024,300)
[/owl-carousel]

But if I use this code from example:

[owl-carousel items=1 margin=10 loop=true autoplay=true autoplayHoverPause=true nav=true]
<div style="background: url({{ page.media['image1.jpg'].cropZoom(1024,300).url }}) 100% 100%;background-size: cover;color:#fff;">
      <h2>This is panel 1</h2>
  <p>foo</p>
</div>
<div style="background: url({{ page.media['image2.jpg'].cropZoom(600,400).url }}) 100% 100%;background-size: cover;color:#fff;">
  <h2>This is panel 2</h2>
  <p>foo</p>
</div>
<div style="background: url({{ page.media['image3.jpg'].url }}) 100% 100%;background-size: cover;color:#fff;">
  <h2>This is panel 3</h2>
  <p>foo</p>
</div>
[/owl-carousel]

The slider's height is only about 80px. Is it related to this config or it's something else?
Thank you!

your way was totally on point!
unfortunately for reasons i do not (yet, possibly never) understand, sometimes the carousel is shown, sometimes it's not. probably has to do with my setup, as i've created a bit of a monster customizing the basic quark theme beyond recognition.
(i hope nobody will ever look at my code. ;) )

thanks again

@01K, That is because the size of the <div> containing the background image, doesn't determine its size based on the image, but on the title and paragraph inside the div.

Alternatives:

• Easiest: You could give the <div> a fixed height: height: 300px;
• A bit harder: Or use the <img> element which will cause the div to resize to its contents. This makes it a bit harder to position the caption over the image and keeping the carousel layout in order...

Cool, thank you!
This helps:

<div style="background: url({{ page.media['image1.jpg'].url }});height: 100vh; width: 100%; background-size: cover; background-position: center center;background-repeat: no-repeat;">

maybe it will help someone one day 🙂