Problems with render hooks when hosting on github

support
1

Hello!

I am struggling a b bit with hugos url helper functions.

I am hosting the site on github pages, and set the base url as such:

baseURL = 'https://djsamsam.github.io/samscorner/'

Anyways, I have messed around quite a bit with my image render hook to make sure it pulls pictures from /samscorner/images/… but it doesn´t seem to matter what I do, if i use relURL och absURl, i can never get it to att the /samscorner/ part of the url to load the images.

When I inspect the page in my browser, the source always becomes /images/… omitting the samscorner part.

The only way I got it to load was using site.baseurl and using that a a prefix to adress, but that seems like a clunky and broken way to do it.

Could someone give me som pointers? Link to the repo: GitHub - DJSAMSAM/samscorner · GitHub

2

-Welcome to the Forum,

you stumbled about one common issue regarding images in /static. And already found the solution to mount static to assets and enable the embedded Image render hooks

The embedded hook does not wrap the image in a figure element but prints out a plain image tag.

Update per comment from @jmooring:
if you don’t need the figure element, remove your hook an you are done.

If you want the images be wrapped in a figure element, you could

Option 1: switch to the embedded Figure shortcode which does that for

But than it’s not a markdown link anymore. Markdown could look like:

### my image

{{< figure
   src="/images/blog/cytochrome.png"
   caption="Image of Sysuphus as the Protein Cytochrome C, carrying electrons"
   alt="Oh you read about Sisyphus? Wait until you hear about Na+/K+-ATPase or Cythochrome C..."
>}}

for images without a figure tag you could then use the embedded image render hook by removing your custom one.

some more text

Option 2: Customize the image render hook

If you want to keep the markdown images and the <figure> tag you will have to adapt the embedded hook code by adding code from the example

Something like this: (make sure to recheck if alt/title/caption go where you want!)

{{- $u := urls.Parse .Destination -}}
{{- $src := $u.String -}}
{{- if not $u.IsAbs -}}
	{{- $path := strings.TrimPrefix "./" $u.Path -}}
	{{- with or (.PageInner.Resources.Get $path) (resources.Get $path) -}}
		{{- $src = .RelPermalink -}}
		{{- with $u.RawQuery -}}
			{{- $src = printf "%s?%s" $src . -}}
		{{- end -}}
		{{- with $u.Fragment -}}
			{{- $src = printf "%s#%s" $src . -}}
		{{- end -}}
	{{- end -}}
{{- end -}}

{{- if .IsBlock -}}
  <figure>
    <img src="{{ $src | safeURL }}"
    {{- with .Title }} alt="{{ . }}"{{ end -}}
      {{- range $k, $v := .Attributes -}}
        {{- if $v -}}
        {{- printf " %s=%q" $k ($v | transform.HTMLEscape) | safeHTMLAttr -}}
        {{- end -}}
      {{- end -}}
    >
    {{- with .PlainText }}<figcaption>{{ . }}</figcaption>{{ end -}}
  </figure>
{{- else -}}
  <img src="{{ .Destination | safeURL }}"
    {{- with .Title }} alt="{{ . }}"{{ end -}}
    {{- with .PlainText }} title="{{ . }}"{{ end -}}
    {{- range $k, $v := .Attributes -}}
  		{{- if $v -}}
	  	  {{- printf " %s=%q" $k ($v | transform.HTMLEscape) | safeHTMLAttr -}}
		  {{- end -}}
	  {{- end -}}>
  >
{{- end -}}
{{- /**/ -}}

Have a look at these articles to get some thoughts on images, placementsand links:

3

In its current state, the project is not using the embedded image render hook because markup.goldmark.renderHooks.image is set to fallback, which means the project level image render hook is used instead.

4

Hello!

Wow you are a go wizard, with some minor tweaking (alt and caption were indeed swapped) this worked.

Also, I wanted to use figures because they include captions, but is there a better way to do it?
Thanks for the input as well @jmooring

5

these days the figure element is the standard way to go.

the decision is more to use a shortcode or use the render hook. with a shortcode it’s hugo flavoured markdown and has to be typed by the author. with the render hook it just works like markdown and shifts the magic to the hook…maybe a mattrer of personal taste.

More a Merger reading the docs and merging example code… so passing a big amount of your props to the maintainers especially @jmooring