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