HB Framework
images/image are malformed inside of other shortcode
#112
-
|
I've created two shortcodes that relies on
|
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 10 replies
-
|
Could you please provide a minimal reproduce repo contains the shortcodes and example, it would be easy to help with. |
Beta Was this translation helpful? Give feedback.
-
|
https://github.com/TetraTheta/tl-m-r If you have Here are the posts that should be inspected.
(Almost) every post would have Both
If something is not displayed right, then that is the problem. |
Beta Was this translation helpful? Give feedback.
-
Please point out the problem if there is (which page, and which part/section)... I don't have time to check all the content... I haved previewed one of the pages, I didn't see any issues. |
Beta Was this translation helpful? Give feedback.
-
OK, I noticed this. |
Beta Was this translation helpful? Give feedback.
-
|
Currently, the-sacred-breeze-so-often-breathes-01#collapse-001 (link to localhost) (and other collapses) has problem, which You can just check this.
The other three are just 'things that might be broken if something got changed'.
↑ If these three images in the table are not shown after modification in i-wanna-get-nas (link to localhost), then that is a problem.
↑ If this image (kuro games logo) is not shown after modification in to-the-shores-end-02 (link to localhost), then that is a problem.
↑ If these three images (that purple one at the center) are not shown after modification in to-the-shores-end-08 (link to localhost), then that is a problem. |
Beta Was this translation helpful? Give feedback.
-
|
Please try the solution I posted below. |
Beta Was this translation helpful? Give feedback.
-
$ git diff
diff --git a/layouts/shortcodes/collapse.html b/layouts/shortcodes/collapse.html
index 066af26..45e3adc 100644
--- a/layouts/shortcodes/collapse.html
+++ b/layouts/shortcodes/collapse.html
@@ -27,5 +27,5 @@
<a type="button" class="collapse-toggle text-decoration-none text-bg-{{ $style }} py-1 px-2" data-bs-toggle="collapse" href="#{{ $id }}" aria-expanded="{{ cond $expand `true` `false` }}" aria-controls="{{ $id }}" style="">
{{- $heading | safeHTML | markdownify -}}
</a>
- <div class="collapse{{ cond $border ` border` `` }}{{ cond $rounded ` rounded-bottom rounded-end` `` }} px-2 pt-2 pb-1 mb-3{{ cond $expand ` show` `` }}" id="{{ $id }}" >{{- trim .Inner "\r\n" | .Page.RenderString -}}</div>
+ <div class="collapse{{ cond $border ` border` `` }}{{ cond $rounded ` rounded-bottom rounded-end` `` }} px-2 pt-2 pb-1 mb-3{{ cond $expand ` show` `` }}" id="{{ $id }}" >{{ .Inner }}</div>
</div>
~Just use |
Beta Was this translation helpful? Give feedback.
-
|
The {{< collapse heading="수호신에 대해서..." >}}
{{< gallery/image src="103|104" >}}
{{< gallery/image src="105|106|107" >}}
{{< gallery/image src="108|109" >}}
수호신 임페라토르는...
* 평화와 공평, 겸손과 자비의 신
* 하늘과 바다를 관장
* 모든 '존재'를 동등하게 돌봄
* 사람들을 '분열'과 '분쟁'에서 해방하고 편견을 없애 모든 사람을 하나로 '연결'하고자 함
* "나는 ... '동요'하지 않으니, ... '분리'되지 않는 자라."
글쎄... 통합이니 연결이니 하는 말만 들으면 제일 먼저 떠오르는 게 독재라서 말이다.
{{< /collapse >}}So, just using
So any modification about my version of |
Beta Was this translation helpful? Give feedback.
-
|
Added a new parameter to allow render the Inner as it is by setting
I don't think it's possible, since the |
Beta Was this translation helpful? Give feedback.
-
|
After some trials, I've figured out I've asked this kind of question, rendering both HTML and Markdown content in shortcode before (and you've answered it!) The solution was to remove some line breaks in original source code. <picture
{{ with .wrapperClass }}class="{{ . }}"{{ end }}
{{ range .attrs }}{{ . | safeHTMLAttr }}{{ end }}>If there is no <picture
>While this is valid HTML, Hugo doesn't seem to think it as valid HTML code. That's why I've got So I copied {{/* Local copy of 'https://github.com/hugomods/images/blob/main/layouts/partials/images/picture.html' */}}
{{/* Reason: Hugo doesn't like line break of original code when it has to render both HTML and Markdown */}}
<picture{{ with .wrapperClass }} class="{{ . }}"{{ end }} {{ range .attrs }}{{ . | safeHTMLAttr }}{{ end }}>
{{- range .sources }}
<source srcset="{{ .srcset }}" type="{{ .type }}" />
{{- end }}
{{- $attrs := slice
(printf `class="%s"` .className)
(printf `src="%s"` .src)
(printf `alt="%s"` .alt)
}}
{{- with .caption }}
{{- $attrs = $attrs | append (printf `title="%s"` .) }}
{{- end }}
{{- if .lazyLoading }}
{{- $attrs = $attrs | append `loading="lazy"` }}
{{- end }}
{{- with .naturalHeight }}
{{- $attrs = $attrs | append (printf `height="%s"` (string .)) }}
{{- end }}
{{- with .naturalWidth }}
{{- $attrs = $attrs | append (printf `width="%s"` (string .)) }}
{{- end }}
{{- with .style }}
{{- $attrs = $attrs | append (printf `style="%s"` (delimit . `; `)) }}
{{- end }}
{{- if .original }}
{{- with .originalSrc }}
{{- $attrs = $attrs | append (printf `data-src="%s"` .) }}
{{- end }}
{{- with .originalWidth }}
{{- $attrs = $attrs | append (printf `data-width="%s"` (string .)) }}
{{- end }}
{{- with .originalHeight }}
{{- $attrs = $attrs | append (printf `data-height="%s"` (string .)) }}
{{- end }}
{{- end }}
<img {{ delimit $attrs " " | safeHTMLAttr }} />
</picture>The logic has not changed at all. Only line breaks and indentation are changed. This solved the issue. With the change for Thank you again! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, made a pacth for that. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry for bothering you, but I think this should also be changed too. <figure
class="{{ .figureClass }} {{ .wrapperClass }}"
{{ range .attrs }}{{ . | safeHTMLAttr }}{{ end }}>to <figure class="{{ .figureClass }} {{ .wrapperClass }}" {{ range .attrs }}{{ . | safeHTMLAttr }}{{ end }}>as this may also produce If I'm right, for Hugo to properly process HTML tag, every |
Beta Was this translation helpful? Give feedback.
After some trials, I've figured out I've asked this kind of question, rendering both HTML and Markdown content in shortcode before (and you've answered it!)
The solution was to remove some line breaks in original source code.
images/imageshortcode callsimages/picturein my case. It has this codeIf there is no
.wrapperClassand.attrs, it will produce this HTML code.While this is valid HTML, Hugo doesn't seem to think it as valid HTML code. That's why I've got
<p><picture</p>when the content ofcollapseis rendered.So I copied
images/pictureto local and modified…