Need help to utilize the Owl Carousel shortcode plugin

[01K]

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

[leG]

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?

[01K]

Hi!
I’m extending from theme “deliver”.
Yes, I’ve pasted mentioned code into twig files, but no luck…

[pamtbaau]

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

Hope that solves a bit of the confusion…

[01K]

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?

[pamtbaau]

@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).

[01K]

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

[pamtbaau]

@01K According the documentation of the ‘shortcode-core’ plugin, shortcodes can be used inside Twig.

The following is a sample for embedding the Owl Carousel inside a *.html.twig template.

{% 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 }}

Note:

• If you need different options per page, you’ll need to add these options dynamically into the first code line.

[leG]

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

[pamtbaau]

@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:

  {{ image.html|raw }}
  

  with:

  {% 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’:

  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.

[01K]

@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!

[leG]

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

[pamtbaau]

@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…

[01K]

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