Access data variable inside with clause

1

I am new to Hugo and trying to understand the best way to access two variables for use in single html tag. For example, in the image tag, I want to output the image path in the src attribute and the person’s name in the alt attribute:
<img src="/filename.jpg" alt="Full Name">

My theme has a yml data file of staff members:

members :  
  - name  : John Doe
    image : images/team/xxx.jpg
    role: CEO
   ...
  - name  : Jane Doe
    image : images/team/yyy.jpg
    role: CTO
   ...

And a partial file that loops through the staff members to output the HTML using {{with .variable }} clauses to test for each variable’s existence. But the alt attribute in the image tag has a hardcoded static value, which is not good practice. I need to output the person’s name. Is it possible to access the name variable inside the {{ with .image }} clause? If not, what is an alternate method:

...
            {{ range $index, $element:= .Site.Data.staff.members }}
                <div class="staff-member">
                    {{ with .image }}
                    <div class="staff-img">
                        <img src="{{ . | absURL }}" class="staff-pic" alt="**SomeStaticText**">
                    </div>
                    {{ end }}
                    {{ with .name }}<h3 class="staff_name">{{ . }}</h3>{{ end }}
                    {{ with .role}}<p class="staff_role">{{ . }}</p>{{ end }}
                </div>
            {{ end }}

Thanks for any advice!

2

You will need to store that in a variable before the with clause

{{ $person :=  . }}
{{ with .image }}
{{ $person.name }}
{{ end }}
2 Likes
3

Thanks so much! I searched hi and low with no luck.