Problem with image render hook [solved] + some figure/img css styling issues

support
1

Hi,
I try to modify the image render hook to automatically add a figure / figcaption html element around, with a legend field the width of the picture, and its height growing to accomodate the legend’s text.

But clearly I’m biting more than I can chew, because 1) I don’t get any of that non-html code 2) it fails.

I put the css code elsewhere, and it shouldn’t matter now.

Voir le code de themes/hugo-book/layouts/_default/_markup/render-image.html{{- if .Page.Site.Params.BookPortableLinks -}} {{- template "portable-image" . -}} {{- else -}}

{{ .Text }}

{{ with .Title }} {{.Title}} {{ end }}

{{- end -}}

{{- define “portable-image” -}}
{{- $isRemote := or (in .Destination “://”) (strings.HasPrefix .Destination “//”) }}
{{- if not $isRemote }}
{{- $path := print .Page.File.Dir .Destination }}
{{- if strings.HasPrefix .Destination “/” }}
{{- $path = print “/static” .Destination }}
{{- end }}
{{- if not (fileExists $path) }}
{{- warnf “Image ‘%s’ not found in ‘%s’” .Destination .Page.File }}
{{- end }}
{{- end }}

{{ .Text }}

{{ with .Title }} {{.Title}} {{ end }}

{{- end -}}
The error messages:Error: Error building site: "/home/drm/WEBSITE/content/_index.md:19:1": failed to render shortcode "center": failed to process shortcode: "/home/drm/WEBSITE/themes/hugo-book/layouts/shortcodes/center.html:2:19": execute of template failed: template: shortcodes/center.html:2:19: executing "shortcodes/center.html" at <.Page.RenderString>: error calling RenderString: "/home/drm/WEBSITE/content/_index.md:1:1": "/home/drm/WEBSITE/themes/hugo-book/layouts/_default/_markup/render-image.html:4:38": execute of template failed: template: _default/_markup/render-image.html:4:38: executing "_default/_markup/render-image.html" at <.Title>: can't evaluate field Title in type string Built in 1756 ms

I thought it would suffice to copy “{{ with .Title }} {{.Title}} {{ end }}” inside the figcaption tag (to act the legend), why does it not ?!

Thanks

2

No:

Yes:

{{ with .Title }} {{ . }} {{ end }}

See:

2 Likes
3

I’m certain I wrote that once, but the errors due to other things made me lost that particular sequence of tags… thanks.
Now, it’s just a matter of css.

4

Which I solved, beautifully: thanks.

Last question though, since you’re so goddamn helpful:

This is the css:

figure {
  max-width: 50%;
  max-height: auto;
  margin-bottom: -0.5rem;
  margin-top: -0.5rem;
  float:right;

  img {
	display: grid;
	justify-content: center;
  	max-width: 100%;
margin:auto;
  }
  
}

figcaption {
  	max-width: auto;
	text-align: center;
  	text-indent: 0;
}

But I would like to make a .center class which both centers the figure, and enlarge said picture as much as it wants.
I tried with:

  .center {
  display: flex;
  justify-content: center;
  max-width: auto;
  max-height: auto;
  }

but max-size won’t change!

5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.