Unable to use CDN for post featured image

[Mecanik]

Describe the bug
I tried adding my image coming from Cloudflare Images into a post and the Hugo build fails.

Output:

WARNING: calling IsSet with unsupported type "bool" (bool) will always return false.
ERROR 2022/05/23 19:12:15 Rebuild failed: failed to render pages: render of "page" failed: "...\AppData\Local\Temp\hugo_cache\modules\filecache\modules\pkg\mod\github.com\razonyang\hugo-theme-bootstrap@v0.77.1\layouts\_default\single.html:5:8": execute of template failed at <partial "post" .>: error calling partial: "...\AppData\Local\Temp\hugo_cache\modules\filecache\modules\pkg\mod\github.com\razonyang\hugo-theme-bootstrap@v0.77.1\layouts\partials\post.html:8:8": execute of template failed at <partial "post/featured-image" .>: "...\AppData\Local\Temp\hugo_cache\modules\filecache\modules\pkg\mod\github.com\razonyang\hugo-theme-bootstrap@v0.77.1\layouts\partials\post\featured-image.html:9:53": execute of template failed at <fileExists (path.Join "static" $filename)>: error calling fileExists: CreateFile ...\hugo-theme-bootstrap-skeleton\static\.avifh.avift.avift.avifp.avifs.avif:.avif\.avif\.avifi.avifm.avifa.avifg.avife.avifd.avife.avifl.avifi.avifv.avife.avifr.avify.avif..avifn.avife.avift.avif\.avifx.avifq.avifi.avifS.avifC.avifi.avifP.avifB.avifX.avifN.avifE.avife.avifB.avifk.aviff.avifB.avifR.avifi.avifR.avifs.avifp.avifQ.avif\.avifc.avif4.aviff.avif7.avif3.avif4.avif4.avif1.avif-.avifb.avifb.avifb.avif1.avif-.avif4.avif6.avif9.avif9.avif-.avif6.avifb.avif2.avif9.avif-.avif1.avif1.avif9.avife.avif4.avifa.avif7.avif5.avifb.avife.avif0.avif0.avif\.avif5.avif7.avif6.avifx.avif3.avif2.avif4.avif: The filename, directory name, or volume label syntax is incorrect.

I believe the problem is that there is no file extension included into the URL from Cloudflare Images.

Can you advise on a solution?

Thanks.

[Mecanik]

At the same time, as I believe this applies to the same issue, one would need to be able to specify his own source set.

For example the picture tag would look like:

<picture>
<source srcset="" media="(min-width: 1200px)" />
<source srcset="" media="(min-width: 992px)" />
<source srcset="" media="(min-width: 768px)" />
<source srcset="" media="(min-width: 576px), (min-width: 320px)" />
<img src="" width="..." height="..." class="img-fluid" alt="..." title="...">
</picture>

If this is not done and you serve a specific size of image only, Google will complain and of course the page performance is hurt.

It would be nice to have control over this, like a partial or something.

Thanks

[razonyang]

I don't have a set-up Cloudflare Images account, would you please provide the Markdown code snippet for reproducing this issue? I tested some images without extension from other places(Tencent Cloud Object Storage), but works:

![](https://example.com/imagename)

[Mecanik]

I don't have a set-up Cloudflare Images account, would you please provide the Markdown code snippet for reproducing this issue? I tested some images without extension from other places(Tencent Cloud Object Storage), but works:

![](https://example.com/imagename)

How did you test this? I used the image hugo variable for the featured post image.

[razonyang]

Which variable do you use? I just put the image inside the article content.

[Mecanik]

Which variable do you use? I just put the image inside the article content.

Ah, I see. Well I used:

index.md:

+++
author = "Mecanik"
title = "..."
date = "..."
description = "..."
featured = true
carousel = true
categories = [
	"..."
]
tags = [
    "..."
]
series = [
   "..."
]
#aliases = ["migrate-from-jekyl"]
images = [
  "**image CDN  URL here**"
]
# toc = false
# [menu.footer]
#   parent = "docs"
#   weight = 4
+++

Is this not the right place to set a featured image for a post?

Thanks

[razonyang]

Yep, it's right, but it's still work for me. Does all the Cloudflare images fails to build? It would be better if you provide the CDN URL for me. You can also send it to me via email instead of post it here.

[Mecanik]

Yep, it's right, but it's still work for me. Does all the Cloudflare images fails to build? It would be better if you provide the CDN URL for me. You can also send it to me via email instead of post it here.

Sent, thanks.

[razonyang]

Didn't reproduce it.

[Mecanik]

I just tried again, not working. Hugo server won't even start. What's different in your setup/config?

[razonyang]

I also confirmed that the skeleton template works with the same image. I think the problem is not relative to the Cloudflare images.

[Mecanik]

Very weird, and sad.

[Mecanik]

I cannot understand how this works for you, when I checked featured-image.html and the code is clearly looking for local images and trying to extract extension etc:

{{- if default false .Site.Params.post.featuredImage -}}
  {{- if .Params.images -}}
    {{- $formats := slice "avif" "webp" "jxl" -}}
    <picture>
      {{- $img := index .Params.images 0 -}}
      {{- $ext := $img | path.Ext }}
      {{- range $formats -}}
        {{- $filename := replace $img $ext (printf ".%s" .) -}}
        {{- if and (not (strings.HasSuffix $ext .)) (fileExists (path.Join "static" $filename)) -}}
          <source srcset="{{ $filename | absURL }}" type="image/{{ . }}" />
        {{- end -}}
      {{- end -}}
      <img class="post-featured-img w-100 mb-3" alt="{{ .Title }}" src="{{ $img | absURL  }}" loading="lazy"/>
    </picture>
  {{- else -}}
    {{- $images := .Resources.ByType "image" -}}
    {{- $featured := $images.GetMatch "*feature*" -}}
    {{- with $featured -}}
    <img class="post-featured-img w-100 mb-3" alt="{{ .Title }}" src="{{ $featured.Permalink }}" loading="lazy"/>
    {{- end -}}
  {{- end -}}
{{- end -}}

Do you have a different code for this or? It just does not make sense.

[razonyang]

No, the source code is the same. Could you please provide the following information?

• Hugo version
• OS version
• Others

Could you please remove the posts, so that Hugo can build the site successfully, and then create a new post with the following content:

+++
title = "BLOG POST"
images = [
  "CDN IMAGES URL"
]
+++

If everything is OK, the issue isn't about this picture.

You can send your site to me(via email or repository) for reproducing this issue if you don't mind.

[Mecanik]

I did exactly what you asked, and the error is still there.

• Hugo: hugo v0.99.1-d524067382e60ce2a2248c3133a1b3af206b6ef1+extended windows/amd64 BuildDate=2022-05-18T11:18:14Z VendorInfo=gohugoio
• OS: Windows 10
• Git: 28585e2 (HEAD -> main, origin/main, origin/HEAD) Update README.md
• GO: go version go1.18.2 windows/amd64

I`m not really comfortable sharing the entire project, I have stuff there...

[Mecanik]

So far this is the biggest and only issue I`m unable to resolve, which is really sad. After reading over and over the code from the featured- partial, I just cannot understand how it can parse the URL without file extension (which is the error hugo complains about).

Perhaps you have something different, because this is not really possible for it to magically work for you.

[razonyang]

I'll try to reproduce on Windows tonight at home.

[Mecanik]

I'll try to reproduce on Windows tonight at home.

I`m happy to share a team viewer session if you want to see this issue "live".

[razonyang]

Reproduced the issue on Windows successful.