Get images URL from content

support
6

The above is copied from the source but there are 2 differences.

Both output rendering following string in content like this (example)

![my image](/images/image.png)

But, the output

<p>
  <img src="http://localhost:1313/images/image.png" alt="my image">
</p>

if from the site when its using build in rendering option in clean hugo

where the other is processed through render-image.html as follow

{{- $image := resources.Get .Destination -}}

<picture{{ with .Title }} role="img" aria-labelledby="{{ printf "figcaption-%d" ($image.Permalink | crypto.FNV32a) }}"{{ end }}>

{{ $isJPG := eq (path.Ext .Destination) ".jpg" }}
{{ $isJPEG := eq (path.Ext .Destination) ".jpeg" }}
{{ $isPNG := eq (path.Ext .Destination) ".png" }}

{{ if or ($isJPG) ($isJPEG) ($isPNG) }}

        {{ $tinyw := "428x webp" }}
        {{ $smallw := "856x webp" }}
        {{ $mediumw := "1440x webp" }}
        {{ $largew := "2048x webp" }}
        {{ $originw := (printf "%dx webp" $image.Width) }}

        {{ $data := newScratch }}
        {{ if ge $image.Width 428 }}
                {{ $data.Set "tiny" ($image.Resize $tinyw) }}
        {{ else }}
                {{ $data.Set "tiny" ($image.Resize $originw) }}
        {{ end }}
        {{ if ge $image.Width 856 }}
                {{ $data.Set "small" ($image.Resize $smallw) }}
        {{ else }}
                {{ $data.Set "small" ($image.Resize $originw) }}
        {{ end }}
        {{ if ge $image.Width 1440 }}
                {{ $data.Set "medium" ($image.Resize $mediumw) }}
        {{ else }}
                {{ $data.Set "medium" ($image.Resize $originw) }}
        {{ end }}
        {{ if ge $image.Width 2048 }}
                {{ $data.Set "large" ($image.Resize $largew) }}
        {{ else }}
                {{ $data.Set "large" ($image.Resize $originw) }}
        {{ end }}

        {{ $tiny := $data.Get "tiny" }}
        {{ $small := $data.Get "small" }}
        {{ $medium := $data.Get "medium" }}
        {{ $large := $data.Get "large" }}

        <source media="(max-width: 428px)" 
                srcset="{{with $small.RelPermalink }}{{.}}{{ end }} 2x,
                        {{with $tiny.RelPermalink }}{{.}}{{ end }}"
                type="image/webp">

        <source media="(max-width: 834px)" 
                srcset="{{with $large.RelPermalink }}{{.}}{{ end }} 2x,
                        {{with $small.RelPermalink }}{{.}}{{ end }}"
                type="image/webp">

        <source media="(max-width: 1440px)" 
                srcset="{{with $large.RelPermalink }}{{.}}{{ end }} 2x,
                        {{with $medium.RelPermalink }}{{.}}{{ end }}"
                type="image/webp">

        <source media="(min-width: 1441px)" 
                srcset="{{with $large.RelPermalink }}{{.}}{{ end }}"
                type="image/webp">
 
{{ end }}
                
 <img
  src="{{ $image.Permalink | safeURL }}"
  alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }}
  decoding="async"
  {{ if or ($isJPG) ($isJPEG) ($isPNG) }}width="{{ $image.Width }}"
  height="{{ $image.Height }}"{{ end }}
  loading="lazy">
  {{ with .Title }}<span id="{{ printf "figcaption-%d" ($image.Permalink | crypto.FNV32a) }}" class="caption">{{ . }}</span>{{ end }}
</picture>

And this is where the problem appears.

It looks like findRE when processing .Content it doesn’t see images when they are subject to render-image.html this is why it does not output any results.

Looking through forum found this post where its mentioned that

(…) Render Hooks are not available from the outside (…)

If that’s the case, I need to find a different way to achieve that.