Assets images and Content Elements with conditionals to control number of images displayed

Question

This is probably really simple to solve but I've got stuck in a dead end. I want to allow users to upload single or multiple images using an Assets image field (resizing with CE Image) within a Content Elements panel, and then display all thumbnails if there's more than one image. Then I use content switcher jQuery to swap out the images. Simple? Not really.

The only way I could find to show all thumbnails if more than a single image was to use the Assets variable 'total_files' in a conditional, not 'count'. Using '{if count > "1"}' only thumbnails for images excluding the first image were shown, using {if count >="1"} showed all thumbnails, but also showed a single thumbnail when only one image was present. But, using '{if total_files > "1"}' does show all thumbs however I can't now stop all the large images from displaying. I need to find a way to limit the large image displayed to a single image but I just can't seem to solve it. If anyone can point me in a new direction to solve this I'll be very grateful.

Here's my current rather messy code:

        <!--IMAGE SLIDESHOW IN BODY-->
    {assets}
    <div class="article-image">

    {files kind="image"}

    {exp:ce_img:pair src="{url}" width="800" height="400"}

            <div id="switcher-panel"></div><!--/#switcher-panel to swap out images from thumbs-->

            {if total_files == "1"}

                    <div id="{name}-content" class="switcher-content show"><a class="switcher">{exp:ce_img:single src="{url}" width="800" height="400" crop="yes"}</a>
                    <div class="image-credit-hover">{title} | {author} | {location}</div>
                    </div>

            {/if}

            {if total_files > "1"}

                    <div id="{name}-content" class="switcher-content show"><a class="switcher">{exp:ce_img:single src="{url}" width="800" height="400" crop="yes"}</a>
                    <div class="image-credit-hover">{title} | {author} | {location}</div>
                    </div>

                    <div class="article-image-thumbs">
                    {exp:ce_img:bulk src="{url}" width="120" height="90" crop="yes" attributes ='style="float:left;margin:0 auto;"'}<a id="{name}" class="switcher"><img src="{url}" alt="" width="{width}" height="{height}"  /></a>
                    {/exp:ce_img:bulk}
                    </div>

                    <div id="{name}-content" class="switcher-content">
                    <a>{exp:ce_img:single src="{url}" width="800" height="400" crop="yes"}</a>
                    <div class="image-credit-hover">{title} | {author} | {location}</div>
                    </div>

            {/if}

            {/exp:ce_img:pair}

    {/files}
    </div>
    {/assets}

Answer 1

It's always the way - you solve you're own question after posting but Ive left it up in case anyone else might struggle with this for some reason. I got it to work with the following code, a mixture of 'total_files' and limiting entry numbers in the assets/files variable. It doesn't seem tidy, but it does work. (NB Im not using Content Elements built in Gallery field as it doesn't have easy meta data input and isn't consistent image handling for my users.)

        <!--IMAGE SLIDESHOW IN BODY-->
            {assets}
            <div class="article-image">

            {files kind="image" limit="1"}

                <div id="{name}-content" class="switcher-content show">
                <a>{exp:ce_img:single src="{url}" width="800" height="400" crop="yes"}</a>
                <div class="image-credit-hover">{title} | {author} | {location}</div>
                </div>

            {/files}

            {files kind="image" limit="10"}

            <div id="switcher-panel"></div><!--/#switcher-panel to swap out images from thumbs-->

            {if total_files > "1"}

                {exp:ce_img:pair src="{url}" width="800" height="400"}          
                <div class="article-image-thumbs">
                {exp:ce_img:bulk src="{url}" width="120" height="90" crop="yes" attributes ='style="float:left;margin:0 auto;"'}<a id="{name}" class="switcher"><img src="{url}" alt="" width="{width}" height="{height}"  /></a>
                {/exp:ce_img:bulk}
                </div>

                <div id="{name}-content" class="switcher-content">   
                {exp:ce_img:bulk src="{url}" width="800" height="400" crop="yes" attributes ='style="float:left;margin:0 auto;"'}<a id="{name}" class="switcher"><img src="{url}" alt="" width="{width}" height="{height}"  /></a>
                 <div class="image-credit-hover">{title} | {author} | {location}</div>
                {/exp:ce_img:bulk}    
                </div>
                {/exp:ce_img:pair}  

            {/if}

            {/files}
            </div> <!--/.article-image-->  
            {/assets}