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}