I am trying to pre-load images via resource hints. I am writing a complex partial which processes images and then if requested, appends the <link rel=“preload” data to scratch, and then the information needs to be ranged over in the head. I am assuming this is not possible due to the fact that the…

My personal preference is to use loading=auto and leave it to the browser to decide. Things are a little different with Next/Nuxt/React beacuse the image references may not exist in the html before the page is hydrated, so the browser needs to be prompted/primed to expect iomage that it would other…

Hi, I’m not a Hugo expert, and I’m not sure I understand your use case, but for the images part I’d try to put this logic into the render hook instead of a partial: Configure Markup | Hugo HTH

I had a good look at render hooks and that could be a good option. However I am trying to create a partial, and later a shortcode which accesses the partial. The functionality which I am trying to reproduce is here Using rel=preload for responsive images | Bronco > Our Ideas and has already been …

[image] powerfulwebdesign: I am assuming this is not possible due to the fact that the body is compiled after the head. Correct. I don’t know how you are calling / running your partial, but you could do a pre-run in the head, so you can add whatever meta you need. Then run it again in the ma…

Thanks for taking the time to read my problem. I have had a look and I can’t find any information about pre-running a partial. Could you please elaborate on how this would work? Basically in the body I specify an image, the partial in the body generates different image sizes, and if configured, an…

The idea is: <head> {{ partial "foo.html" . }} </head>  {{/* img processing code here */}} <link rel=...> {{ .Scratch.Set ...}} <body> ... {{ partial "bar.html" }} </body>  {{ .Scratch.Get ... }} <img ...>

So, you can put something in the head in a base template using blocks You will, however, have the same “order problem” there. The only, I think, workaround to that problem is to do all the image processing etc. before you need it. One trick is to assign partials, .Content etc. to variables at the…

Thanks for that. Ill work out how this might work with my script and post back when I’ve spent some time testing it. I think I might have to set up a “main” block and a “hints” block. From the single/list.html {{ define "hints" }} {{ partial "image.html" . }} // assign the <img> or <picture> ta…

Preloading images seems like a really bad idea, and quite user-hostile. You will force a users browser to download images they may not want or even ever see, eating up bandwidth and cpu, making the user wait longer, and for what? There’s a reason native lazy-loading has been shipped in all major br…

Thanks for the info. What are your thoughts on loading=“eager” for above the fold? Would this improve load speed if I have set up placeholder padding to prevent reflow? Or is lazy sufficient in this case? I regards to preload, I was only chasing it down because the next.js image doc says preload i…

FWIW, my image partial would typically look something like this: {{ $src := (.Params.cover_img ) }} {{ $alt := ( .Params.cover_img_alt ) }} {{ $img := resources.GetMatch (printf "**%s" ($src)) }} {{ with $img }} {{- $xl := $img.Fill "800x600 jpg" -}} {{ $lg := $xl.Resize "600x" -}} {{ $md :…

Append items to head based on data in body or partials used in body

support

nternetinspired September 16, 2021, 8:16pm 15

No problem. Related: images from markdown, with dimensions, a simplified example: Images without width and height from markdown - #14 by nternetinspired

Topic		Replies	Views
Head partial rendered under body tag support	10	597	November 15, 2021
How to associate CSS to a specific partial and render it in <head> section of the HTML support	19	721	November 9, 2024
How do I add css/js to `<head>` from partial content/template support	34	7319	March 18, 2026
.Scratch in partial called from shortcode support	13	1188	November 3, 2021
Lazyloading + Image processing using partials instead of shortcode support	3	988	August 27, 2020

Append items to head based on data in body or partials used in body

Related topics