Hugo figure shortcode: image renders, anchor link doesn't work

[jmooring]

You can use the or operator or the default function.

[zoliky]

Thank you for the suggestion. From what I’ve noticed, .Width and .Height are not accessible in the figure shortcode. For example, I tried to access {{ .Width }}, but I’m getting the following error:

Error: failed to render shortcode “figure”: failed to process shortcode: “/home/zoltan/hugowebsite/themes/basic/layouts/shortcodes/figure.html:16:14”: execute of template failed: template: shortcodes/figure.html:16:14: executing “shortcodes/figure.html” at <.Width>: can’t evaluate field Width in type *hugolib.ShortcodeWithPage

I tried it without any conditional first to see if it’s accessible at all:

<img src="{{ $src }}"
    {{- if or (.Get "alt") (.Get "caption") }}
    alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
    {{- end -}}
    width="{{ .Width }}"

[jmooring]

The embedded figure shortcode captures the image as a resource, either a page resource or a global resource. You can access the resource’s width and height using the resource’s .Width and .Height methods.

Or you can capture the width and height parameters specified in the shortcode call with .Get "width" and .Get "height".

It is unclear to me what your’re trying to do, and I don’t know what your figure shortcode looks like.

Finally, after we get your width/height question resolved, please open new topics for new questions. I’m a bit tired of this thread.

[zoliky]

I wanted to create a new topic, but I felt it was somehow connected to the main question. However, you’re right. I’ll be more careful in the future, and I apologize.

All I want is for the images to have their width and height attributes in the HTML code. I’ll handle the rest with CSS to make sure they don’t overflow the container.

Previously, you were kind to write two pieces of code for me that display a featured image. The featured image works well. Thank you. However, for all the other images in the blog post, I want to insert them using the <figure> tag. I’m referring to the images that are not featured, not on the list page, but simply part of the blog post content. They will be inserted with the figure shortcode.

I didn’t change anything in the figure shortcode, but I noticed in the original code from GoHugo GitHub page what happens inside the figure shortcode. I deduce that it expects a manual value but doesn’t try to determine it automatically if not specified manually

<img src="{{ $src }}"
    {{- if or (.Get "alt") (.Get "caption") }}
    alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
    {{- end -}}
    {{- with .Get "width" }} width="{{ . }}"{{ end -}}
    {{- with .Get "height" }} height="{{ . }}"{{ end -}}
    {{- with .Get "loading" }} loading="{{ . }}"{{ end -}}
  ><!-- Closing img tag -->

It would be nice to have the {{ .Width }} and {{ .Height }} inserted automatically if I just use this shortcode in the blog post:

{{< figure src="elephant.jpg" title="An image" >}}

[jmooring]

This (presented as diff file when compared to the original source of the embedded figure shortcode) will use the width and height if set in the shortcode call, falling back to the width and height of the resource:

diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
index a0b93a437..acb55f5c8 100644
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@@ -5,8 +5,9 @@
 
   {{- $u := urls.Parse (.Get "src") -}}
   {{- $src := $u.String -}}
+  {{- $r := "" -}}
   {{- if not $u.IsAbs -}}
-    {{- with or (.Page.Resources.Get $u.Path) (resources.Get $u.Path) -}}
+    {{- with $r = or (.Page.Resources.Get $u.Path) (resources.Get $u.Path) -}}
       {{- $src = .RelPermalink -}}
     {{- end -}}
   {{- end -}}
@@ -15,8 +16,16 @@
     {{- if or (.Get "alt") (.Get "caption") }}
     alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
     {{- end -}}
-    {{- with .Get "width" }} width="{{ . }}"{{ end -}}
-    {{- with .Get "height" }} height="{{ . }}"{{ end -}}
+
+    {{- $width := 0 -}}
+    {{- $height := 0 -}}
+    {{- with $r -}}
+      {{- $width = .Width -}}
+      {{- $height = .Height -}}
+    {{- end -}}
+    {{- with or (.Get "width") $width }} width="{{ . }}"{{ end -}}
+    {{- with or (.Get "height") $height }} height="{{ . }}"{{ end -}}
+
     {{- with .Get "loading" }} loading="{{ . }}"{{ end -}}
   ><!-- Closing img tag -->
   {{- if .Get "link" }}</a>{{ end -}}