Problems with render hooks when hosting on github

support
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: