I have tried to show image label correctly such as:

    image 1   (an image is uploaded)

    image 2   (no image is uploaded)

    image 3   (an image is uploaded)

    image 4   (no image is uploaded)

    image 5   (an image is uploaded)

    image 6   (an image is uploaded)

etc.

Here are my curly codes:

    <ul class="navigation-list">
      {capture $featuredtLabel}{__ 'Image 1'}{/capture}   <!-- Label image 1 is reserved for a featured image which is the first image being uploaded -->
      {capture $defaultLabel}{__ 'Image'}{/capture}                     
      {foreach $galleryItems as $item}
      <li class="navigation-item{if $iterator->first} active{/if}">
        {if !empty($item['image'])}   <!-- Check if image field created (or click to add image) is available -->
          {if empty($item['imageUrl'])}   <!-- Check if the above image field has no URL - it means an image is not uploaded -->
            {var $iterator1 = $iterator->counter - 1}
          {/if}
          
          {var $iterator1 = $iterator->counter}
          {var $label = !empty($item['title']) ? $featuredtLabel : ($defaultLabel . ' ' . $iterator1)}
          <a href="#">{!$label}</a>                                 
          
        {/if}
      </li>
      {/foreach}
    </ul>

Please note that $iterator->counter starts from the value of 2 created by a javascript of the WP theme

The above codes generate the following results:

    image 1

    image 3

    image 5

    image 6

the above images are shown correctly because they have valid URLs or images are uploaded. But the labels are not displayed as I would like to be:

    image 1

    image 2

    image 3

    image 4

Any help is very appreciated.