I have uploaded images as follows:
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.
and want to display labels in an order for those images are uploaded like:
image 1
image 2
image 3
image 4
(without image 2 and image 4 as they are not uploaded)
a) Here are original codes:
<ul class="navigation-list">
{capture $featuredtLabel}{__ 'Image 1'}{/capture}
{capture $defaultLabel}{__ 'Image'}{/capture}
{foreach $galleryItems as $item}
<li class="navigation-item{if $iterator->first} active{/if}">
{var $label = !empty($item['title']) ? $featuredtLabel : ($defaultLabel . ' ' . $iterator->counter)}
<a href="#">{!$label}</a>
</li>
{/foreach}
</ul>
With orginal codes, all images would be displayed even some (image 2 and image4) are not uploaded:
image 1
image 2
image 3
image 4
image 5
image 6
b) I have changed the original codes to these ones:
<ul class="navigation-list">
{capture $featuredtLabel}{__ 'Image 1'}{/capture}
{capture $defaultLabel}{__ 'Image'}{/capture}
{var $count = 1}
{foreach $galleryItems as $item}
<li class="navigation-item{if $iterator->first} active{/if}">
{if !empty($item['image'])}
{var $count = $count + 1}
{var $label = !empty($item['title']) ? $featuredtLabel : ($defaultLabel . ' ' . $count)}
<a href="#">{!$label}</a>
{/if}
</li>
{/foreach}
</ul>
The above codes generate the following results:
image 1
image 3
image 4
image 5
the above images are shown correctly because they have valid URLs or images are uploaded. But all labels are not displayed correctly. I would like them to be in order like below:
image 1
image 2
image 3
image 4
Any help is very appreciated.