Shortcode surrounded by generated code

support
1

I have a shortcode for render-image.html like this:

{{- $img := .Page.Resources.GetMatch .Destination -}}
{{- $imagefit := .Page.Param "image-fit" | default .Page.Site.Params.defaultImageFit -}}
{{- $imageMax := .Page.Param "max-fit" | default .Page.Site.Params.defaultImageMaxFit -}}
{{- $galleryId := md5 .Page.Permalink}}
{{- with $img -}}
<figure>
    {{ $fit := .Fit $imagefit }}
    {{ $max := .Fit $imageMax }}
    <a href="{{$max.RelPermalink}}" data-lightbox="gallery-{{$galleryId}}">
        <img src="{{ $fit.RelPermalink }}" alt="{{ $.Text }}" title="{{ with $.Title }}{{ . }}{{ end }}" />
    </a>
    {{- else -}}
    <img src="{{ .Destination | safeURL }}" alt="{{ $.Text }}" title="{{ with $.Title }}{{ . }}{{ end }}" />
    {{- end -}}
    <figcaption>{{ with $.Title }}{{ . }}{{ end }}</figcaption>
</figure>

However, when I use it in markdown, lie so:

![](image1.jpg)

![](image1.jpg)

Some text ![](image3.jpg)

it is being rendered as

<p></p>
<figure> ... </figure
<p></p>
<figure> ... </figure
<p></p>
Some text <figure>...</figure>
<p></p>

Those empty

tags are a bit of a nuisance, I would wish I could avoid them.
The “Some text” part is a bit more complicated. I wonder what a correct way to render this should look like.

Probably

<p>Some text</p>
<figure>...</figure>

as a figure tag should not be within a p.

[edited for better viewability]

2

Try using ``` to surround code blocks like Markdown too. I assume you have more than one newline in your markdown. That might result in empty paragraphs. But exactly that part of the question is hidden :slight_smile:

3

The short code was messed up, the opening figure tag had to go before the leading with clause, which had to end just before the closing figure tag. Like so:

{{- $img := .Page.Resources.GetMatch .Destination -}}
{{- $imagefit := .Page.Param "image-fit" | default .Page.Site.Params.defaultImageFit -}}
{{- $imageMax := .Page.Param "max-fit" | default .Page.Site.Params.defaultImageMaxFit -}}
{{- $galleryId := md5 .Page.Permalink}}
<figure>
    {{- with $img -}}
    {{ $fit := .Fit $imagefit }}
    {{ $max := .Fit $imageMax }}
    <a href="{{$max.RelPermalink}}" data-lightbox="gallery-{{$galleryId}}">
        <img src="{{ $fit.RelPermalink }}" alt="{{ $.Text }}" title="{{ with $.Title }}{{ . }}{{ end }}" />
    </a>
    {{- else -}}
    <img src="{{ .Destination | safeURL }}" alt="{{ $.Text }}" title="{{ with $.Title }}{{ . }}{{ end }}" />
    {{- end -}}
    {{ with $.Title }}
    <figcaption>{{ . }}</figcaption>

    {{ end }}
</figure>

Now

![](image1.jpg)
![](image1.jpg)
Some text ![](image3.jpg)

renders as

<p>
<figure><img src="image1.jpg" alt="" title="" />
</figure>

<figure><img src="image1.jpg" alt="" title="" />
</figure>
Some text 
<figure><img src="image3.jpg" alt="" title="" />
</figure></p>

and


![](image1.jpg)

![](image1.jpg)

Some text ![](image3.jpg)

as

<p>
<figure><img src="image1.jpg" alt="" title="" />
</figure></p>
<p>
<figure><img src="image1.jpg" alt="" title="" />
</figure></p>
<p>Some text 
<figure><img src="image3.jpg" alt="" title="" />
</figure></p>

At least that’s ok, xml-wise.

I think, it should render

<figure><img src="image1.jpg" alt="" title="" />
</figure>
<figure><img src="image1.jpg" alt="" title="" />
</figure>
<p>Some text</p>
<figure><img src="image3.jpg" alt="" title="" />
</figure>

But the output is much more manageable, now.

4

The “idea” behind this <p>-Tag is, that an image is an inline tag. There is also a bug report open about this:

I don’t think there is a way yet to remove it. Maybe setting one of these configuration parameters will change things, but I couldn’t find documentation for them (false is the default):

[markup.goldmark.renderer]
hardWraps = false
unsafe = false
xhtml = false