Unwanted elements in my markup

The CMS Questions
1

I’m getting unwanted elements. <p> tags in particular. They are in between each of my dynamically generated elements. What is causing this?

2

Kirbytext/markdown wraps many things in <p> tags automatically.

If you use jquery you can unwrap them after the fact. There may be a javascript equivalent out there as well but I haven’t used it.

$("p:has(i)").contents().unwrap();

In this example, any <i> tag (used for icons) that is wrapped in a <p> tag, has the wrapping p tag removed.

3

Thanks @Luke it’s not that my wanted elements are being wrapped. So not:

<p> <--unwanted-->
 <p class="expectedElement"> text </p>
</p>

It is that I am getting this;

<p></p> <--unwanted-->
 <p class="expectedElement"> text </p>
<p></p> <--unwanted-->

Also I really dont want to use js to fix it. Any ideas of another way?

4

Unfortunately I don’t seem to be able to replicate this. I haven’t come across this issue since I last used WordPress. Perhaps you could provide some examples of your markdown, and your template (where you’re calling for the field) so I or someone else can further diagnose.

5

This is my code:

        <article class="project-side project-side-left">
            <h2><?php echo $project->title()->html() ?></h2>
            <p><?php echo kirbytext($project->intro()) ?></p>
            <ul>
              <?php foreach($project->tags()->split() as $tag): ?>
                  <li><?php echo $tag ?></li>
              <?php endforeach ?>
            </ul>
            <a href="<?php echo $project->url() ?>">View project</a>
        </article>

And this is in the dom:

<article class="project-side project-side-left">
            <h2>DISCAVO</h2>
            <p></p>
             <p>This is the intro paragraph</p>
            <p></p>
            <ul>
                                <li>design</li>
                                <li>photography</li>
                                <li>architecture</li>
                                <li>whatever</li>
                          </ul>
            <a href="/">View project</a>
        </article>
6

Have you tried using just <?php echo $project->intro()->kirbytext() ?> instead of <p><?php echo kirbytext($project->intro()) ?></p>?

For me it looks like Kirbytext is already wrapping your intro Text in p-tags and consequently the orphan opening p-tag from the template is closed automatically and the now orphan closing p-tag after it get’s coupled with an opening one automatically. Just a thought, not sure if that’s what’s happening.

1 Like
7

I would have suggested the same, and I was just able to replicate the behavior as well.

8

Thanks, I just tried your suggestion and it still outputs the unwanted tags

9

As already suggested by @distantnative it’ll work if you either write:

<p><?php echo $project->intro() ?></p>

or simply (without the sorrounding <p>):

<?php echo kirbytext($project->intro()) ?>

A combination of using a surrounding <p> AND the kirbytext() helper in your template code will produce that unwanted markup.

2 Likes
10

Thank you @sashtown @Luke @distantnative