0

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.

2
  • You just need to use another variable to count.
    – shingo
    Commented Jul 3 at 5:23
  • thanks. I did try using a variable before posting this issue. Now I updated it in my post; something is not right as the second count is missing out. Please help have a quick check what is missing in my codes?
    – Meng888
    Commented Jul 3 at 7:06

1 Answer 1

0

Fixed: Just comment out this line:

    <!--    {capture $featuredtLabel}{__ 'Image 1'}{/capture}   -->

and set: $count = 0;

Here are fully working codes:

    <ul class="navigation-list">
                <!--    {capture $featuredtLabel}{__ 'Image 1'}{/capture}   -->
                    {capture $defaultLabel}{__ 'Image'}{/capture}
                    {var $count = 0}        
                    {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>

Many thanks

Not the answer you're looking for? Browse other questions tagged or ask your own question.