Undefined variable in shortcode

Hello,

I’m new to Hugo and even though I’m delighted with how it’s built, I’m still struggling to find my way around it and to online resources are still limited. I searched for answers to my problem but didn’t find them. So I ask it here.

I am trying to create a simple gallery shortcode with a couple of named parameters:

{{< gallery path="images/*" columns=3 >}

But I’m stuck in an underfined variable error. I created this repository to make it simpler to replicate the error.

I want to do some math with the columns parameter and then use the result of that math:

{{ $numColumns := .Get "columns" }}

{{ if eq $numColumns 4 }}
  {{ $col := 3 }}
{{ else if eq $numColumns 3 }}
  {{ $col := 4 }} 
{{ else if eq $numColumns 2 }}
  {{ $col := 6 }}
{{ else }}
  {{ $col := 12 }}
{{ end }}

<div>{{$col}}</div>

But then, when I try to use variable $col, I get an underfined variable error.

What am I missing here? This is very simple for sure but somehow I still didn’t get it.

I see that some code uses {{- -}} while other just uses {{ }}. I already tried both to no avail. I remember reading about this somewhere but that was before I ran into this problem and now I can’t find it.

Thanks in advance for your help,
Nuno

This has to do with scope, $col lives between the if-else brackets but not outside of them. So when you evaluate it at the bottom between the divs, the template cannot see it.

{{ $col := 12 }} # defined outside of if-else section
{{ if eq $numColumns 4 }}
  {{ $col = 3 }} # assign to existing variable (:= becomes =)
{{ else if eq $numColumns 3 }}
  {{ $col = 4 }} 
{{ else if eq $numColumns 2 }}
  {{ $col = 6 }}
{{ end }}

<div>{{ $col }}</div>

That should fix the undefined part.

I see that some code uses {{- -}} while other just uses {{ }}

That’s only for visual appeal. With a dash, the lines of template logic don’t create newlines in your output. I recommend you look at your HTML source and play around with adding/removing dashes – that’s more intuitive than thinking much about it.

3 Likes

Hi @adrian5,

Thank you so much for the explanation. It’s perfectly clear now!

Do you happen to know where I can read more about variable scopes? Is this something specific to go or to hugo?

I also couldn’t find information related to the use of {{- -}}. Do you know where this is documented?

Thanks again!
Nuno

The concept of scopes is common in many programming languages, that’s where I know it from. I think Hugo uses “Go templates”, so maybe you can find out more by reading about those. I don’t have a good resource at hand.

Regarding {{- -}} I don’t know about documentation either. I think I read about it in a post on this forum. As I said, if you examine the output (hugo server helps) you can make sense of the effect the dash has.

I’m fairly new to Hugo myself, working my way to a fully featured website step-by-step.

1 Like

{{- -}} : https://gohugo.io/templates/introduction/#whitespace

1 Like

Thanks! Good luck for your project!

Thanks @pointyfar, I had read that page but probably I read it too early in the process and had forgotten about it. It’s most useful!