Shortcode Owl Carousel plugin broken after upgrade to Grav 1.7

Support Plugins
#1

I had this running.
But all of a sudden it sopped.

The main thing i have done between running an stopping was clearing cache, import some JS in base.html.twig an use it in som jquery function jQuery(document).ready

also i realized that it seems to render html tags not well . as this code is shown on my page now.

<div class="owl-carousel owl-theme" id="owl-972a796df1"> <img src="/user/pages/01.OMIO/05._medira/Tiefenprofil_Dashboard_1.png"/><img src=&quot;/user/pages/.../Dashboard_2.png&quot;&gt;&lt;img src=&quot;/user/pages/.../Dashboard_3.png&quot;&gt;&lt;img src=&quot;/user/pages/.../Dashboard_4.png&quot;&gt;

when deactivating shortcode owl carousel the code looks like this

[owl-carousel items=1 margin=10 loop=true autoplay=true autoplayHoverPause=true]<img src="/user/pages/01.OMIO/05._medira/Tiefenprofil_Dashboard_1.png"><img src="/user/pages/.../Dashboard_2.png"><img src="/user/pages/.../Dashboard_3.png"><img src="/user/pages/.../Dashboard_4.png">[/owl-carousel]

so i assume shortcode at least works and cateches the owl-carousel.

i upgraded to 1.7 in the meantime also.

does anybody have an idea where to look at?

Thanks a lot in advance

Need help to utilize the Owl Carousel shortcode plugin
#2

For security reasons, the latest Grav 1.7 RC is more tight about the output of HTML, Javascript etc. in Twig. Output is now escaped by default and output tags {{ }} in Twig need the |raw filter to insert un-escaped code.

Note: This |raw filter should only be used when the code to be outputted can be trusted. E.g. when it is not derived from user input.

See the upgrade docs.

Workaround until plugin is fixed:

  • Go to /user/plugins/shortcode-owl-carousel/templates/partials/owl-carousel.html.twig and add the |raw filter manually:
    {{ owl_items|regex_replace('(^\n?<p>|<\/p>$)','') | raw }}
  • Refresh the cache: $ bin/grav cache

NB. Issue has bee submitted on Github. You might want to subscribe to the issue to get notificed about the progress of its fix.

1 Like
#3

@pamtbaau thank you very much for your qick response. I also subscribed to the github issue.

I did the suggested changes. But still its not showing the carousel. At least the rendered code on the page seems to look good again without character issues.

<div class="owl-carousel owl-theme" id="owl-972a796df1">
<img src="/user/pages/.../Dashboard_1.png">
<img src="/user/pages/.../Dashboard_2.png">
<img src="/user/pages/.../Dashboard_3.png">
<img src="/user/pages/.../Dashboard_4.png">
</div>

I did clear the cache.
do i have to impolement it in another way like not with twig but in the lazy loading fashion?

#4

@bosse, I did the following and all works as expected…

  • Fresh install of latest Grav 1.7 RC
  • Installed Shortcode Owl Plugin: $ bin/gpm install shortcode-owl-carousel
    (plus Shortcode Core which comes with it)
  • Added images to /user/pages/02.typography
    user/pages/02.typography/
├── default.md
├── image1.jpg
├── image2.jpg
└── image3.jpg
  • Added the following to /user/pages/02.typography/default.md:
    [owl-carousel items=1 margin=10 loop=true autoplay=true autoplayHoverPause=true]
<img src="user/pages/02.typography/image1.jpg">
<img src="user/pages/02.typography/image2.jpg">
<img src="user/pages/02.typography/image3.jpg">
[/owl-carousel]
  • Added filter |raw to /user/plugins/shortcode-owl-carousel/templates/partials/owl-carousel.html.twig:
    {{ owl_items|regex_replace('(^\n?<p>|<\/p>$)','') | raw }}
  • Cleared cache: $ bin/grav cache
  • Refreshed browser and all looks well…

Btw. I presume that the 3 dots in <img src="/user/pages/.../Dashboard_1.png"> is not in your markdown and resulting code, but is used to shorten the line in the example. Right?

#5

Exactly the three dots are just for shortening.

Well, i want to show the carousel in a slightly different way…
As its called in a twig-file in modular > text_carousel.html.twig. Like you described in Need help to utilize the Owl Carousel shortcode plugin

{% set grid_size = theme_var('grid-size') %}
{% set carousel = "[owl-carousel items=1 margin=10 loop=true autoplay=true autoplayHoverPause=true]" %}
{% for image in page.media.images %}
	{% set carousel = carousel~"<img src=\""~image.url~"\">" %}
{% endfor %}
{% set carousel = carousel~"[/owl-carousel]" %}

{{ carousel|shortcodes }}

i do not call the owl-carousel in the *.md file

its set with loop=true

Is this still compatible to 1.7 and its higher security?

I appreciate your efforts.

#6

@bosse, It wasn’t really clear from your question that you were using the shortcode in Twig… Or did I overlook something?

  1. To make the script compatible with 1.7, you will have to again add the |raw filter:

    {{ carousel | shortcodes | raw }}

  2. There is an issue when using shortcode from Twig. Shortcode Core plugin doesn’t add the required assets (stylesheets and javascripts and inline js). See Assets not loaded when using shortcode only in Twig
    Did you add these manually to the template in your previously working version?

    UPDATE: This issue does not occur when using shortcodes in the Twig of a child module of a modular page.

1 Like
#7

That made it. Brilliant!

If i haven’t made the shortcode in twig usage clear enough i am sorry. Anyways i am very happy about the solution. And this way we have worked out the solution for both styles.

  1. in my previous version i added the carousel in the exact same way except the two “|raw” inserts. (will keep an eye on that issue as well)
#8

@bosse, Not sure how you fixed the issue that assets are not being loaded into the page. I cannot get Owl Carousel to work without manually copying the assets…

Would you mind explaining how you solved that issue?

NB. Please mark the the post as solved by ticking the ‘solution’ icon in any reply. And while you are at it, hitting the love/like icon as a token of appreciation wouldn’t hurt either… :wink:

#9
  1. Step: i added the assets from the *.md via twig to the template
{% set grid_size = theme_var('grid-size') %}
{% set carousel = "[owl-carousel items=1 margin=10 loop=true autoplay=true autoplayHoverPause=true]" %}
{% for image in page.media.images %}
	{% set carousel = carousel~"<img src=\""~image.url~"\">" %}
{% endfor %}
{% set carousel = carousel~"[/owl-carousel]" %}
  1. Step: i used shortcode in the templatefile to show caraousel next to text
    {% if carousel %}
    	<div class="column col-6 col-md-12">
    	    {{ content|raw }}
    	</div>
    	<div class="column col-6 col-md-12">
    		{{ carousel|shortcodes }}
    	</div>
     {% else %}
    	<div class="column col-12">
    		{{ content|raw }}
    	</div>
     {% endif %}
  1. Step: edited the plugin as discribed above
    Added filter |raw to /user/plugins/shortcode-owl-carousel/templates/partials/owl-carousel.html.twig:
{{ owl_items|regex_replace('(^\n?<p>|<\/p>$)','') | raw }}
  1. Step: edited shortcode in twig template
<div class="column col-6 col-md-12">
    		{{ carousel|shortcodes|raw }}
 </div>

After Step 3 i cleared the cache via cli $ bin/grav cache

1 Like
#10

@bosse, Thanks for the elaborate script. I appreciate it, but that’s not quite what I meant…

As said before, when the Owl Carousel shortcode is only used in Twig, the assets required to show/run the carousel are not added to the page. The following assets are missing:

<link href="/user/plugins/shortcode-owl-carousel/css/owl.carousel.min.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/shortcode-owl-carousel/css/owl.theme.default.min.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/shortcode-owl-carousel/css/shortcode.owl.carousel.css" type="text/css" rel="stylesheet">

<script src="/user/plugins/shortcode-owl-carousel/js/owl.carousel.min.js"></script>

<script>
$(document).ready(function(){ $("#owl-70b6a6d94e").owlCarousel({"items":1,"margin":10,"loop":true,"autoplay":true,"autoplayHoverPause":true}); });
</script>

Only when the Owl Carousel is added to the Markdown of the page, the above assets are added to the page.

Question:

  • Are you sure you removed the shortcode from the page (default.md)?
  • If so, how did you get above assets included in the HTML of the page?
  • Which version are you using of Owl Carousel plugin, Shortcode Core plugin and Grav?
#11

Sorry, i probably got you wrong…

  • I definatly removed all shortcode from *.md (which is a modular in my case). Whereas it has been input for testting beforehand. Do you think this might have make the import of *.css and *.js assets persistent?
  • I do nowhere explicitly import the named assets to my html (at least not being aware of at all)
  • Owl Carousel version: 1.0.3

and i can tell from reviewing my website code on load that all named assets are loaded without difficulties.

#12

@bosse, Ahhh that’s the difference! You are using a modular and I’m using a regular.

It indeed works when using a modular page :slight_smile:
Will add that to the issue on Shortcode Core.