Need help with Hugo shortcode: singling out the first image

[SNTag]

I’m working on modifying a shortcode to generate a gallery using lightbox2, and need some help (credits to the original shortcode goes to Christian Specht)…

I’m trying to make the shortcode below show the first image in full height, while the rest in a reduced height (such as “{{ $resized := .Fill “900x900 q100” }}” vs “{{ $resized := .Fill “900x90 q100” }}”). Can anyone advise me how I can single out the first image?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.min.js"></script>

{{ $image := (.Page.Resources.ByType "image") }}
{{ with $image }}
    {{ range . }}
    {{ $resized := .Fill "900x90 q100" }}
    <a href="{{ .Permalink }}" data-lightbox="x"><img src="{{ $resized.Permalink }}" /></a>
    {{ end }}
{{ end }}

[pointyfar]

Something like (untested)

{{ with $image }}
    {{ range $i, $e := . }}
      {{ $resized := $e.Fill "900x90 q100" }}
    
      {{ if eq $i 0 }} <!-- first image -->
        {{ $resized = $e.Fill "900x900 q100" }}    
      {{ end }}
    
      <a href="{{ $e.Permalink }}" data-lightbox="x"><img src="{{ $resized.Permalink }}" /></a>
    {{ end }}
{{ end }}

[SNTag]

It worked! If i may ask, $i is the range (1 to x), while $e is the image and its properties?

[pointyfar]

$i is the index and $e is the element, for each iteration of the range : docs