Problem during the construction related to the nesting of a Render Hook (image) in a shortcode

support
1

Hello,

When updating Hugo to the latest version (0.95) I get a problem when building on a shortcode integrating images in Markdown format.

For information, the construction is possible for a version of Hugo lower than 0.94 not included.

I think it’s related to the nesting of a Render Hook (image) in a shortcode.

I searched on the forum without really finding how to allow this nesting again, but being French with a rather weak English, I may not have the right keywords.

Here are the codes:

Render Hook image:

{{ $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}

{{ $small := $image.Resize "100x webp picture" }}
{{ $medium := $image.Resize "200x webp picture" }}
{{ $large := $image.Resize "400x webp picture" }}
{{ $xlarge := $image.Resize "600x webp picture" }}

{{ $xlargejpg := $image.Resize "600x jpg picture" }}

{{ $alt := .PlainText | safeHTML }}

{{ $caption := "" }}
{{ with .Title }}
  {{ $caption = . | safeHTML }}
{{ end }}

<div class="row text-center">
  <img 
    src="{{ $xlargejpg.RelPermalink }}"
    srcset="{{ $small.RelPermalink }} 100px,
            {{ $medium.RelPermalink }} 200px,
            {{ $large.RelPermalink }} 400px,
            {{ $xlargejpg.RelPermalink }} 100px"
    type="image/webp"
    sizes="(max-width: 576px) 100px, (max-width: 768px) 200px, (max-width: 992px) 300px, (max-width: 1200px) 400px, 600px"
    alt="{{ if $alt }}{{ $alt }}{ else if $caption }}{{ $caption | markdownify | plainify }}{ else }}&nbsp;{{ end }}"
    {{ with .Title}} 
      title="{{ . }}"
    {{ end }}
  />
</div>

Shortcode Alert:

{{- $type := default "info" (.Get 1) -}}
{{- $icons := dict "info" "info-circle" "success" "check-circle" "warning" "exclamation-triangle" "danger" "x-circle"}}
{{- $icon := default "info-circle" (index $icons $type) -}}
<div class="alert alert-{{ $type }}" role="alert">
  <i class="bi bi-{{ $icon }}"></i> {{ .Get 0 | markdownify }}
</div>

Content:

{{< alert "Home assistant has simplified things by providing developers with a script that generates a button (for BluePrint, Repositories, etc) that, with a single click, does the actions for you. All you have to do is enter the address of your instance ![Button Import Repository](img/repository_import.svg), ![Button Import BluePrint](img/blueprint_import.svg)" "info" >}}

Thanks for advance.
Anthony

2

instead markdownify, use .Page.RenderString

{{- $type := default "info" (.Get 1) -}}
{{- $icons := dict "info" "info-circle" "success" "check-circle" "warning" "exclamation-triangle" "danger" "x-circle"}}
{{- $icon := default "info-circle" (index $icons $type) -}}
<div class="alert alert-{{ $type }}" role="alert">
++  <i class="bi bi-{{ $icon }}"></i> {{ .Get 0 | .Page.RenderString }}
</div>

.RenderString is more powerful than the similar markdownify function as it also supports Render Hooks and it has options to render other markup formats.

1 Like
3

There are two problems here.

First, an issue was introduced in v0.93.0:
https://github.com/gohugoio/hugo/issues/9692

As @pamubay suggests, you can work around this by using .Page.RenderString instead of markdownify.

Second, you are trying to resize an SVG file:

{{< alert "... ![...](img/blueprint_import.svg)" "info" >}}

Image processing methods are limited to the BMP, GIF, JPEG, PNG, TIFF, and WebP media subtypes.

1 Like
4

@pamubay thank you so much for the tip and the discovery.

@jmooring you are right, but in version 0.93.3 it worked.

Thanks to both of you, I’ll try it tomorrow and I’ll come back to you to tell you.

Thanks again.

5

It didn’t throw an error in v0.93.3. Instead, it silently failed to render the image. So, no, it didn’t work.

1 Like
6

Certainly, I did not go to see the rendering.

Thanks

7

Hello,
As expected I am coming back to you to report that everything is working perfectly and so I want to thank you again.

I put below the code which works, (even if it can surely be optimized) which checks if the image is of type SVG before launching the process.

I’m a beginner in Hugo and I’m discovering new features day after day.

Thanks again you two

shortcode alert.html :

{{- $type := default "info" (.Get 1) -}}
{{- $icons := dict "info" "info-circle" "success" "check-circle" "warning" "exclamation-triangle" "danger" "x-circle"}}
{{- $icon := default "info-circle" (index $icons $type) -}}
<div class="alert alert-{{ $type }}" role="alert">
  <i class="bi bi-{{ $icon }}"></i> {{ .Get 0 | .Page.RenderString }}
</div>

render-image.html :

{{ $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}

{{ if and $image (ne $image.MediaType.SubType "svg") }}
  {{ $small := $image.Resize "100x webp picture" }}
  {{ $medium := $image.Resize "200x webp picture" }}
  {{ $large := $image.Resize "400x webp picture" }}
  {{ $xlarge := $image.Resize "600x webp picture" }}

  {{ $xlargejpg := $image.Resize "600x jpg picture" }}


{{ $alt := .PlainText | safeHTML }}

{{ $caption := "" }}
{{ with .Title }}
  {{ $caption = . | safeHTML }}
{{ end }}

<div class="row text-center">
  <img 
    src="{{ $xlargejpg.RelPermalink }}"
    srcset="{{ $small.RelPermalink }} 100px,
            {{ $medium.RelPermalink }} 200px,
            {{ $large.RelPermalink }} 400px,
            {{ $xlargejpg.RelPermalink }} 100px"
    type="image/webp"
    sizes="(max-width: 576px) 100px, (max-width: 768px) 200px, (max-width: 992px) 300px, (max-width: 1200px) 400px, 600px"
    alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}"
    {{ with .Title}} 
      title="{{ . }}"
    {{ end }}
  />
</div>
{{ else }}



{{ $alt := .PlainText | safeHTML }}

{{ $caption := "" }}
{{ with .Title }}
  {{ $caption = . | safeHTML }}
{{ end }}

<div class="row text-center">
  <img 
    src="{{ $image.RelPermalink }}"
    alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}"
    {{ with .Title}} 
      title="{{ . }}"
    {{ end }}
  />
</div>
{{ end }}
8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.