I’m trying to figure out how to use responsive images in a markdown render hook but using RelPermalink inside img srcset results in the image url not pointing to the image, with ../../ missing.
To my understanding it’s the same issue that’s beeing discussed here: relativeURLs setting does not work for every URL · Issue #8734 · gohugoio/hugo · GitHub
To a somewhat newbie to Hugo and code in general. Is it even possible to get the image render hook to do what I’m trying to do? I see a lot of examples online that describes this but it doesn’t work for me.
At the moment this is my render-image.html which works okay but I would really prefer not having to use the media attribute:
{{/* get file that matches the filename as specified as src="" */}}
{{ $src := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}
{{ $alt := .PlainText | safeHTML }}
{{/* Check file format. Originally from: https://hugomodo.github.io/blog/image-processing-and-svgs/ */}}
{{ $pathArr := split $src "." }}
{{ $pathLen := len $pathArr }}
{{ $ext := index $pathArr (sub $pathLen 1) }}
{{/* IF svg */}}
{{ if eq $ext "svg" }}
<figure class="{{ if in $src "header-img" }}header-img{{ end }}">
<picture>
<img
alt="{{ $alt }}"
title="{{ $alt }}"
src="{{ $src }}"
class="img-fluid-svg"
/>
</picture>
</figure>
{{/* IF gif */}}
{{ else if eq $ext "gif" }}
<figure class="{{ if in $src "header-img" }}header-img{{ end }}">
<picture>
<img
alt="{{ $alt }}"
title="{{ $alt }}"
src="{{ $src }}"
height="{{ $src.Height }}"
width="{{ $src.Width }}"
class="img-fluid"
/>
</picture>
</figure>
{{/* IF mp4 */}}
{{ else if eq $ext "mp4" }}
<video width="100%" height="auto" autoplay muted>
>
<source src="{{ $src.RelPermalink }}" type="video/mp4" />
Your browser does not support the video tag.
</video>
{{/* So for posts that aren't setup in the page bundles, it doesn't fail */}}
{{ else }}
{{ if $src }}
{{ $tinyw := default "500x webp" }}
{{ $smallw := default "800x webp" }}
{{ $mediumw := default "1200x webp" }}
{{ $largew := default "1500x webp" }}
{{ $xlargew := default "2000x webp" }}
{{ $fallbackw := default "1200x jpg" }}
{{/* resize the src image to the given sizes */}}
{{/* We create a a temp scratch because it's not available in this context */}}
{{ $data := newScratch }}
{{ $data.Set "tiny" ($src.Resize $tinyw) }}
{{ $data.Set "small" ($src.Resize $smallw) }}
{{ $data.Set "medium" ($src.Resize $mediumw) }}
{{ $data.Set "large" ($src.Resize $largew) }}
{{ $data.Set "xlarge" ($src.Resize $xlargew) }}
{{ $data.Set "fallback" ($src.Resize $fallbackw) }}
{{/* add the processed images to the scratch */}}
{{ $tiny := $data.Get "tiny" }}
{{ $small := $data.Get "small" }}
{{ $medium := $data.Get "medium" }}
{{ $large := $data.Get "large" }}
{{ $xlarge := $data.Get "xlarge" }}
{{ $fallback := $data.Get "fallback" }}
{{/* only use images smaller than or equal to the src (original)
image size, as Hugo will upscale small images
*/}}
{{ if .Title }}
<figure class="{{ if in $src "header-img" }}header-img{{ end }}">
<picture>
<source
media="(max-width: 376px) and (max-resolution: 1dppx),
(max-width: 376px) and (-webkit-max-device-pixel-ratio: 1)"
srcset="{{ with $tiny.RelPermalink }}{{ . }}{{ end }}"
/>
<source
media="(max-width: 376px) and (max-resolution: 2dppx),
(max-width: 376px) and (-webkit-max-device-pixel-ratio: 2)"
srcset="{{ with $medium.RelPermalink }}{{ . }}{{ end }}"
/>
<source
media="(max-width: 992px) and (max-resolution: 1dppx),
(max-width: 992px) and (-webkit-max-device-pixel-ratio: 1)"
srcset="{{ with $small.RelPermalink }}{{ . }}{{ end }}"
/>
<source
media="(max-width: 992px) and (max-resolution: 2dppx),
(max-width: 992px) and (-webkit-max-device-pixel-ratio: 2)"
srcset="{{ with $large.RelPermalink }}{{ . }}{{ end }}"
/>
<source
media="(max-width: 1400px) and (max-resolution: 1dppx),
(max-width: 1400px) and (-webkit-max-device-pixel-ratio: 1)"
srcset="{{ with $medium.RelPermalink }}{{ . }}{{ end }}"
/>
<source
media="(max-width: 1400px) and (max-resolution: 2dppx),
(max-width: 1400px) and (-webkit-max-device-pixel-ratio: 2)"
srcset="{{ with $xlarge.RelPermalink }}{{ . }}{{ end }}"
/>
<source
media="(min-width: 1401px) and (max-resolution: 1dppx),
(min-width: 1401px) and (-webkit-max-device-pixel-ratio: 1)"
srcset="{{ with $large.RelPermalink }}{{ . }}{{ end }}"
/>
<source
media="(min-width: 1401px) and (max-resolution: 2dppx),
(min-width: 1401px) and (-webkit-max-device-pixel-ratio: 2)"
srcset="{{ with $xlarge.RelPermalink }}{{ . }}{{ end }}"
/>
<img
alt="{{ $alt }}"
title="{{ .Title }}"
src="{{ $fallback.RelPermalink }}"
height="{{ $src.Height }}"
width="{{ $src.Width }}"
class="img-fluid"
/>
</picture>
<figcaption>{{- .Title -}}</figcaption>
</figure>
{{ else }}
<figure class="{{ if in $src "header-img" }}header-img{{ end }}">
<picture>
<source
media="(max-width: 376px)"
srcset="{{ with $tiny.RelPermalink }}{{ . }}{{ end }}"
/>
<source
media="(max-width: 992px)"
srcset="{{ with $small.RelPermalink }}{{ . }}{{ end }}"
/>
<source
media="(max-width: 1400px)"
srcset="{{ with $medium.RelPermalink }}{{ . }}{{ end }}"
/>
<source
media="(min-width: 1401px)"
srcset="{{ with $large.RelPermalink }}{{ . }}{{ end }}"
/>
<img
alt="{{ $alt }}"
title="{{ $alt }}"
src="{{ $fallback.RelPermalink }}"
height="{{ $src.Height }}"
width="{{ $src.Width }}"
class="img-fluid"
/>
</picture>
</figure>
{{- end -}}
{{/* Since I do image-response class, the only thing that really
matters is the height and width matches the image aspect ratio
*/}}
{{- end -}}
{{- end -}}
{{- /* This comment removes trailing newlines. */ -}}
Page:
Thanks in advance for any feedback.