Using complex Kirbytags (i.e. that nest a few divs) inside a column of the Column plugin breaks the column and exposes the source code.
Doing some debug I realised that it’s probably due to how the parsing is done (maybe it’s done more than once or in the wrong order, that I couldn’t figure out).
Does anybody would be able to help to find a solution?
That is very vague, can you be more specific and provide an example of which tags break when used in conjunction with columns?
You are right.
Let’s suppose this is the snippet quotes.php
<div class="quotes-wrapper">
<div class="quotes">
<div class="quote">
<img src="" alt=""/>
<div class="quote-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class="quote">
<img src="" alt=""/>
<div class="quote-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class="quote">
<img src="" alt=""/>
<div class="quote-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
</div>
And this is my Kirbytag snippet.php
<?php
kirbytext::$tags['snippet'] = array(
'attr' => array(),
'html' => function($tag) {
$name = $tag->attr('snippet');
return snippet($name, array(), true);
});
When I use them like this, in conjunction with the Columns plugin:
(columns...)
(snippet: quotes)
++++
Some random text.
(...columns)
It results in a page rendered in an unpredictable way, depending on how snippet.php is structured – if it’s simple enough, everything is parsed correctly (i.e. a button or a label), if anything complex is used (like in this example) the plugin stops producing the correct markup.
Just as an example, here is the output of this test.
There is a closing div missing in your snippet…
Thanks, I didn’t indent the code block property.
That is not the problem though – my test was built using the tags correctly.
I fixed my comment here.
Hm, I can’t reproduce this. Are you using any other plugins that do some sort of string replacement?
I’m using a number of custom plugins, but I checked, none of them are doing text replacement.
Is there a specific function I need to look for in the codebase to check this?
I mean: looking for kirbytext::$pre[] or kirbytext::$post[] would be sufficient to exclude that, or there is something else I can evaluate?
By the way, thanks a lot for your help with this. It’s much appreciated.
It breaks with Markdown Extra turned on.
It would be great if I could isolate which feature is responsible for that. It should be something related to code blocks, I think.
Any ideas on how to fix the issue?
I think this is due to the use of spaces, when Markdown extra is enabled. If you remove indentation or use HTML comments, it works.
Which spaces are you suggesting to remove? From the post body or from the snippet?
Although I don’t consider using this format for the snippet:
<div class="quotes-wrapper"><div class="quotes"><div class="quote"><img src="" alt=""/><div class="quote-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div><div class="quote"><img src="" alt=""/><div class="quote-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div><div class="quote"><img src="" alt=""/><div class="quote-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div></div></div>
I decided to give it go, just for academic purposes.
It doesn’t work.
Well, I turned on Markdown Extra and removed the indents from the snippet. That made it work. If it doesn’t work in your context, maybe there is something else on top of that.
Well, at least it works more or less, although it introduces some ugly empty p and br tags.
I’m using a clean installation of Kirby using exactly the example that I provided, and it doesn’t work.
If you take a closer look at the ugly p and br tags, they are not just being added, they are outside the column container, which has been in fact broken by the parsing.
Yes, that’s right, the HTML is somehow messed up when ME is enabled…
Why do you have Markdown Extra enabled?
I use it for heading classes and footnotes.
I’m just wondering whether a change of order in the way tags and markdown is applied would change things. I don’t know the Kirbytext parser enough to be sure, and I’m not a programmer either, but I got the impression that making the Markdown pass first and then parsing the Kirbytags would fix the issue.
But I’m not sure this is worth the attention of you guys, although it seems to be a problem of any plugin that injects HTML into a Markdown Extra enabled panel.
Yes, I think so. But then changing the order of things, might break other stuff. I don’t know. You might want to check if there is an issue on GitHub, and if not, create one. But this won’t help you right now.
Depending what you need more, Markdown Extra or snippets within columns, you may want to consider alternatives:
As for footnotes, an alternative could be to use the @distantnatives footnotes plugin.
For headline classes, I’m not so sure, maybe use kirbytags?
I can achieve the widget inside columns functionality by using a dedicated template.
Kirbytags for the headline classes is something I considered, but I like the unobtrusive Markdown Extra syntax more. Using templates for my exceptional use case with the columns seems to be less hacky and the right thing to do this time.
Thank you.