default output breaks markdown in nested shortcodes

[austin-genaro]

The default output creates indents which is normally not a problem, but if you nest it inside a shortcode that allows markdown content, hugo breaks the image into code blocks due to indentation. I ended up making a wrapper shortcode to trim the spacing from the output as a workaround, but can we get an option to have this built in?

test.md

{{< div >}}
{{< picture src="test.jpg" >}}
{{< /div >}}

shortcodes/div.html <div>{{- .Inner | safeHTML | markdownify -}}</div>

after hugo processes it, test.html

<div><div class="">
<picture >
  <source
<pre><code>data-srcset=&quot;/test_hub81943aaa5ac1460751b63b726285425_17287_222x0_resize_q75_h2_box.webp 222w&quot;
type=&quot;image/webp&quot;
</code></pre>
<p>/&gt;
&lt;source</p>
<pre><code>data-srcset=&quot;/test_hub81943aaa5ac1460751b63b726285425_17287_222x0_resize_q75_box.jpg 222w&quot;
type=&quot;image/jpeg&quot;
</code></pre>
<p>/&gt;
<img
data-src="/test_hub81943aaa5ac1460751b63b726285425_17287_222x0_resize_q75_box.jpg"
height="222"
width="222"
class="img-fluid lazyload"
data-sizes="auto"
/>
</picture></p>
</div>
</div>

[sean-au]

Hi Austin is your solution able to be copied and pasted into the source code of the module? If you rung Hugo mod vendor on your project you could copy and paste into the local module files.

If it's good to go let me know. Thanks for keeping up with Hugo's rapid development. I appreciate the feedback and help

Regards

Sean

On Wed, 11 Sept 2024, 9:51 pm Austin, @.***> wrote:

The default output creates indents which is normally not a problem, but if you nest it inside a shortcode that allows markdown content, hugo breaks the image into code blocks due to indentation. I ended up making a wrapper shortcode to trim the spacing from the output as a workaround, but can we get an option to have this built in?

test.md {{< div >}} {{< picture src="test.jpg" >}} {{< /div >}}

shortcodes/div.html

{{- .Inner | safeHTML | markdownify -}}

after hugo processes it, test.html `

data-srcset="/test_hub81943aaa5ac1460751b63b726285425_17287_222x0_resize_q75_h2_box.webp 222w" type="image/webp"

/> <source

data-srcset="/test_hub81943aaa5ac1460751b63b726285425_17287_222x0_resize_q75_box.jpg 222w" type="image/jpeg"

/> `

— Reply to this email directly, view it on GitHub https://github.com/future-wd/hugo-responsive-images/issues/70, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARTWGAYWBNS4ORLUENHDR6TZWAVEJAVCNFSM6AAAAABOAZEVPCVHI2DSMVQWIX3LMV43ASLTON2WKOZSGUYTSNJTGE4DIMI . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[austin-genaro]

I would rather not do extra processing for each call and just remove indentation by default from the output though. I'm looking through your code and testing out doing that instead.

This is the wrapper code I'm using at the moment to get things going in the meantime.

for partial {{ partial "trim-indent" (partial "picture" $params) }}

{{- $text := replace . "\r" "" | safeHTML -}}
{{- range $line := split $text "\n" -}}
{{- trim $line " " | safeHTML -}}{{ printf " " }}
{{- end -}}

for shortcode {{< trim-indent >}}{{< picture ...params... >}}{{< /trim-indent >}}

{{- $inner := replace .Inner "\r" "" | safeHTML -}}
{{- range $line := split $inner "\n" -}}
{{- trim $line " " | safeHTML -}}{{ printf " " }}
{{- end -}}

[austin-genaro]

I tested out removing any leading spaces in opening html tags, it seems to be working well. All of the files were in hugo-responsive-images/layouts/partials/hri/private/print

picture-set.html line 17: <source line 18: add - to trim leading newline

image-tag.html line 39: <img

noscript-tag.html line 19: <img

figure-top.html line 18: <a

figure-bottom.html line 17: <figcaption line 19: <h line 24: <a