HUGO

Shortcodes and <p> tags

After upgrading to hugo 1.5, I realised I was relying on the earlier behaviour that (perhaps unsemantically) wrapped my rendered shortcodes with <p> tags. Now I’m running into some inconsistent behaviour that I hope someone could help me explain.

I have content that looks like the following:

[snipped paragraphs that don't seem to affect behavior]

{{< figure src="/img/research/cardiac-mechanics/orthotropic-passive-stress.png" title="The orthotropic response of the myocardium model demonstrated by varying simple shear-stress responses along different planes defined by the muscle fibre (f), myocite sheet (s) and sheet-normal (n) directions." >}}

[snipped paragraphs that don't seem to affect behavior]

{{< figure src="/img/research/cardiac-mechanics/biventricle-mesh.png" title="A finite element mesh of a generic biventricle generated with CGAL." >}}

The strange behaviour is that the rendered output puts <p> tags for the second use of the shortcode and not the first:

    <figure>
  <img class="pure-img" src="/img/research/cardiac-mechanics/orthotropic-passive-stress.png" alt="The orthotropic response of the myocardium model demonstrated by varying simple shear-stress responses along different planes defined by the muscle fibre (f), myocite sheet (s) and sheet-normal (n) directions.">
  <figcaption>The orthotropic response of the myocardium model demonstrated by varying simple shear-stress responses along different planes defined by the muscle fibre (f), myocite sheet (s) and sheet-normal (n) directions.</figcaption>
</figure>


<p><figure>
  <img class="pure-img" src="/img/research/cardiac-mechanics/biventricle-mesh.png" alt="A finite element mesh of a generic biventricle generated with CGAL.">
  <figcaption>A finite element mesh of a generic biventricle generated with CGAL.</figcaption>
</figure>
</p>

Can someone help me debug this?

There is probably a linefeed or two behind the second.

I don’t see any difference in the linebreaks/whitespace around these two uses. Here is the content I am trying to work with if that helps: https://gist.github.com/hnarayanan/1858d731515f29f884f6

I also see another strange behaviour that I hadn’t noticed earlier. If I shorten the title of the first figure shortcode use, the second doesn’t have the <p> tags wrapping the generated output.

And I don’t completely understand it (because I believe there might be a bug), but here is a workaround I’ve found that might temporarily help someone else. As long as there is “enough” content in the paragraph following the shortcode, it doesn’t introduce <p> tags.

I’m the one who reported the erroneous <p> tag behaviour in 0.14:

https://discuss.gohugo.io/t/info-img-shortcode-figure-tag-auto-wrapped-in-p-tag-invalid-html/1202

I can replicate this using your gist.

There are a few things I’ve found:

  1. If there is just one shortcode, it doesn’t get wrapped in <p> tags

  2. If there are multiple shortcodes, the first doesn’t get wrapped in <p> tags (probably related to above)

  3. In order to ensure no shortcodes are wrapped in <p> tags, the final shortcode must be followed by a number of distinct <p> tag wrapped lines proportionate to the number of shortcodes in the document.

By that I mean if you have say 6 shortcodes one after the other, you need 16 lines following them in order for none to be wrapped in <p> tags. If you have 5 shortcodes one after the other you need 12 lines.

  1. ‘Lines following shortcode’ don’t have to come at the end of the document, if you have a series of shortcodes it seems the number of interceeding <p> tag wrapped lines are cumulatively ranked towards each consecutive shortcode so if you had 30 lines interspaced between shortcodes throughout the document, as long as each shortcode has at least 5 proceeding lines each, they’ll all be spared wrapping.

  2. Related to point 4, the <p> tags that get wrapped around shortcodes incorrectly also count towards the number of <p> tag wrapped lines needed to follow preceeding shortcodes - so enough shortcodes in a row and you seem to be about to start unwrapping some of the ‘first’ few in the list.

NOTE - I may have miss counted the exact number of lines in between shortcodes, my eyes are actually bleeding right now…

This is an unusual one!

1 Like

Thank you for this excellent, excellent synopsis. I thought I was going crazy myself as I observed similar behaviours and stumbled along in the dark until something was good enough for my uses.

In particular, I stumbled into a combination of 3–5 that worked out good enough for me without looking too deeply into the situation. This is an unusual one!

Also, to add a number 6 to your list, I found that the length of the title on the first shortcode has some bearing on the <p> wrapping on the second: https://discuss.gohugo.io/t/shortcodes-and-p-tags/2164/3

Have you opened an issue on GitHub?

Feel free to use my info above if you haven’t opened on yet (I’m @puffinblue if you need me there).

Not yet. I will do so.

I needed this discussion to sanity check whether this wasn’t just something weird with my content.

1 Like

Thanks for getting to it first.