Showing Channel Image gallery IF there's more than 1 images?

Question

How to show a channel image gallery if there is more than 1 images inside?

{exp:channel:entries channel="journal" limit="1" url_title="{segment_3}" disable="categories|member_data|pagination|trackbacks" cache="yes" refresh="512640"}  

{if image:total > 1}

<div class="mini-page-wrapper responsive-image bg-accent-darkest offset-parent">
{exp:channel_images:images entry_id="{entry_id}" limit="1" field="journal_images"}
    <!-- ..code for my image gallery.. -->
{/exp:channel_images:images}        
</div>

{/if}

{/exp:channel:entries}

the conditional global variable {if image:total > 1} should be placed after {exp:channel_images} but i need to hide the parent div class too.. so..

Answer 1

I have a solution below for you so what I have done is test 3 things

1.) If there is more than 1 image do the gallery code only displaying the div html if the gallery exists so the first time it outputs the opening div the last image in the loop outputs the closing div.

2.) If there is only 1 image I have you a space to do other code.

3.) If there aren't any images i gave you a space for code.

Hope this helps!

       {exp:channel:entries channel="journal" limit="1" url_title="{segment_3}" disable="categories|member_data|pagination|trackbacks" cache="yes" refresh="512640"}  
            {exp:channel_images:images entry_id="{entry_id}" limit="1" field="journal_images"}
                {if "{image:total}" > 1}
                   {if "{image:count}¶" == "1"}
                     <div class="mini-page-wrapper responsive-image bg-accent-darkest offset-parent">
                  {/if}
                       <!-- ..code for my image gallery.. -->
                  {if "{image:total}" == "{image:count}"}
                     </div>
                  {/if}
               {if:elseif "{image:total}" == "1"}
                     <!-- Code displayed for only a single image -- >
               {/if}
               {if image:no_images}
                    <!-- Code displayed for no image results
               {/if}
           {/exp:channel_images:images} 
        {/exp:channel:entries}

Answer 2

Are you saying you want to conditionally hide the parent div based on the total count, in addition to showing specific gallery code if count > 1?

If so, can you move the div within the channel images tag and use the conditional twice - first to add a class to hide said div and second to show specific gallery code? Not entirely sure what you're after here.

Answer 3

dear Jessica D'Amico, thank you for your reply but I got it working just with embedding template technique:

{exp:channel:entries channel="journal" limit="1" url_title="{segment_3}" disable="categories|member_data|pagination|trackbacks" cache="yes" refresh="512640"}  
{exp:channel_images:images entry_id="{entry_id}" field="journal_images"}
    {if "{image:total}" > 1}
        {if "{image:total}" == "{image:count}"}
                {embed="moyseion:journal/_slideshow-em" entry_id="{entry_id}"}
        {/if}
    {/if}
{/exp:channel_images:images} 
{/exp:channel:entries}

and this is my embed template:

<!--altre foto-->
<div class="mini-page-wrapper" data-role="story-part" id="part-2">
  <section class="mini-page mini-page-semicompact">
    <header class="block-stack">
      <p class="block-right buttons-compact mobile-sm-1col mobile-sm-stack-compact">
    <a data-role="prev-section" href="#part-intro" class="button-like button-icon button-up bg-accent-darker">
      Previous</a>
    <a data-role="next-section" href="#comments" class="button-like button-icon button-down bg-accent-darker">
      Next</a>
      </p>
      <h1 class="three-fourths-page h2-like mobile-sm-1col mobile-sm-stack-compact">Altre foto:</h1>
    </header>
  </section>
  <div data-role="slideshow-em" class="slideshow-em offset-parent margin-bottom-1x">

<nav data-role="slideshow-em-prev" class="slideshow-em-nav corner-top-left fit-container-left high hidden">
  <button class="slideshow-em-button button-icon button-prev bg-accent-darker">Previous</button>
</nav>
<nav data-role="slideshow-em-next" class="slideshow-em-nav corner-top-right fit-container-right high hidden">
  <button class="slideshow-em-button button-icon button-next bg-accent-darker">Next</button>
</nav>

<ul data-role="slideshow-em-tray slideshow-lazy" data-set-url="" class="slideshow-em-tray reset-list offset-parent clearfix">
{exp:channel_images:images entry_id="{embed:entry_id}" field="journal_images"}

    <li data-role="slideshow-em-slide" class="slideshow-em-slide">
      <figure>

      <div data-role="open-lightbox-image"
            data-title="{title}"
            data-src="{pre_proxy}{image:url:journal}{post_proxy}"
            class="{image:switch='media-wrapper link-like bg-placeholder bg-loader|link-like media-wrapper moblg-col moblg-1-2 mobl-sm-hide bg-loader|link-like media-wrapper moblg-col moblg-1-2 mobl-sm-hide bg-loader'}">

{exp:ce_img:pair src="{image:url:journal}" width="220" height="220" crop="yes" cache_dir="/WebStatic/s3/Blog/" hide_relative_path="yes" hash_filename="yes"}
     <img class="full-width responsive-image bg-placeholder"
     data-role="lazy-image"
     data-lazy-image-animate="true"
     src="data:image/gif;base64,R0lGODlhCgAKAIAAAP///wAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw=="
     alt="{if image:description}{image:description}{if:else}{title}{/if}"
     data-lazy-image-url="{aws_url}"
 />
{/exp:ce_img:pair}
      </div>
        {if image:description}
        <figcaption class="slideshow-em-caption">
          <a data-role="open-lightbox-image" data-src="{pre_proxy}{image:url:journal}{post_proxy}">{image:description}</a>
        </figcaption>
        {/if}
      </figure>
    </li>
{/exp:channel_images:images}
</ul>

  </div>
</div>
<!--altre foto fine-->