How to display Group Field metadata + Container div if it exists and display default text if fields are empty? [CMB2]

Question

I'm no programmer so I'm clueless on solutions. I have been using CMB2 for a Portfolio/Project custom post type.

I've incorporated a slideshow that uses Group Field metadata for each slide.

On the home page there are 2 posts labeled "Empty Project" & "Test Project 1". If you click the Empty Project you will be directed to it's single post page, there you will see a ".flexslider" div with a red background. That's the div that I would like to remove if the Group Fields are empty. My that I mean completed remove the div leaving no empty divs instead of changing the background color to white.

If you click "Test Project 1", there will be the images uploaded using Repeatable Group Fields within the "flexslider" slideshow. That is to be the result of Metafields that were saved with Metadata inside of them.

METABOX// Here is the code I have used to register the repeatable fields, which allows me to insert images and captions for the slideshow.

add_action( 'cmb2_admin_init', 'gallery_metabox' );
function gallery_metabox() {
$prefix = 'gallery_';

/**
 * Repeatable Field Groups
 */
$cmb_group = new_cmb2_box( array(
    'id'           => $prefix . 'metabox',
    'title'        => __( 'Gallery', 'cmb2' ),
    'object_types' => array( 'portfolio', ),
) );

// $group_field_id is the field id string, so in this case: $prefix . 'demo'
$group_field_id = $cmb_group->add_field( array(
    'id'          => $prefix . 'demo',
    'type'        => 'group',
    'options'     => array(
    'group_title'   => __( 'Image {#}', 'cmb2' ), // {#} gets replaced by row number
        'add_button'    => __( 'Add Another Image', 'cmb2' ),
        'remove_button' => __( 'Remove Image', 'cmb2' ),
        'sortable'      => true, // beta
        'closed'     => true, // true to have the groups closed by default
    ),
) );


$cmb_group->add_group_field( $group_field_id, array(
    'name' => __( 'Image', 'cmb2' ),
    'id'   => 'image',
    'type' => 'file',
) );

$cmb_group->add_group_field( $group_field_id, array(
    'name' => __( 'Image Caption', 'cmb2' ),
    'id'   => 'image_caption',
    'type' => 'text',
) );

 }

I followed this to display meta data for those group fields. Everything works perfectly fine when I use this chunk of code:

FRONT-END//

<div class="flexslider">
  <ul class="slides">

            <?php $entries = get_post_meta( get_the_ID(), 'gallery_demo', true );


                foreach ( (array) $entries as $key => $entry ) {

                    $img = $img_url = $caption = '';
                if ( isset( $entry['image_id'] ) ) {
                    $img = wp_get_attachment_image( $entry['image_id'], 'share-pick', null, array(
                        'class' => 'thumb',
                    ) );
                }
                    if ( isset( $entry['image_id'] ) ) {
                    $img_url = wp_get_attachment_image_url( $entry['image_id'], null );
                }
                $caption = isset( $entry['image_caption'] ) ? wpautop( $entry['image_caption'] ) : '';
                    echo '<li data-thumb="'. $img_url .'">';
                    echo $img;
                    echo $caption;
                    echo '</li>';


            } ?>
  </ul>
  </div>

but I would very much like to display the .flexslider container + metadata ONLY when data exist. If fields are empty then I would like to display default text or better yet remove the whole div itself. I tried my best to do research but I can't seem to figure out what is wrong.

I've also tried this chunk of code as well:

ATTEMPT//

<?php $entries = get_post_meta( get_the_ID(), 'gallery_demo', true );
if(empty ($entry)) { echo ''; }
else {
   foreach ( (array) $entries as $key => $entry ) {
     echo '<div class="flexslider">';
     echo '<ul class="slides">';
   $img = $img_url = $caption = '';

   if ( isset( $entry['image_id'] ) ) {
     $img = wp_get_attachment_image( $entry['image_id'], 'share-pick', null, array(
'class' => 'thumb',
   ) );
}

if ( isset( $entry['image_id'] ) ) {
    $img_url = wp_get_attachment_image_url( $entry['image_id'], null );
}

$caption = isset( $entry['image_caption'] ) ? wpautop( $entry['image_caption'] ) : '';
    echo '<li data-thumb="'. $img_url .'">';
    echo $img;
    echo $caption;
    echo '</li>';
    echo '</ul>';
    echo '</div>';      
    }   
  }
 ?>

The only good thing about the code above is that it definitely removes the div when metafield is empty but if the metadata DOES exist the div is still gone.

EDIT// I tried using "@stweb" code in the answers below:

$entries = get_post_meta( get_the_ID(), 'gallery_demo', true );

foreach ( (array) $entries as $key => $entry ) {
   if(empty($entry)){
      continue;
   }
   echo '<div class="flexslider">';
   echo '<ul class="slides">';
   $img = $img_url = $caption = '';

   if ( isset( $entry['image_id'] ) ) {
     $img = wp_get_attachment_image( $entry['image_id'], 'share-pick',   
   null, array(    'class' => 'thumb', ) );
   }

   if ( isset( $entry['image_id'] ) ) {
     $img_url = wp_get_attachment_image_url( $entry['image_id'], null );
   }

   $caption = isset( $entry['image_caption'] ) ? wpautop(    
   $entry['image_caption'] ) : '';
   echo '<li data-thumb="'. $img_url .'">';
   echo $img;
   echo $caption;
   echo '</li>';
   echo '</ul>';
   echo '</div>';      
} 

but nothing happens...the red div just sits there instead of disappearing.

I'd basically like to figure out how I can display the first chunk of code ONLY if images were uploaded to Group Field and if not then display nothing at all not even the container div.

Can anyone please explain where I went wrong?

Answer 1

Try this:

$entries = get_post_meta( get_the_ID(), 'gallery_demo', true );

foreach ( (array) $entries as $key => $entry ) {
   if(empty($entry)){
      continue;
   }
   echo '<div class="flexslider">';
   echo '<ul class="slides">';
   $img = $img_url = $caption = '';

   if ( isset( $entry['image_id'] ) ) {
     $img = wp_get_attachment_image( $entry['image_id'], 'share-pick',   
   null, array(    'class' => 'thumb', ) );
   }

   if ( isset( $entry['image_id'] ) ) {
     $img_url = wp_get_attachment_image_url( $entry['image_id'], null );
   }

   $caption = isset( $entry['image_caption'] ) ? wpautop(    
   $entry['image_caption'] ) : '';
   echo '<li data-thumb="'. $img_url .'">';
   echo $img;
   echo $caption;
   echo '</li>';
   echo '</ul>';
   echo '</div>';      
} 

UPDATE:

foreach ( (array) $entries as $key => $entry ) {
    if ( !isset( $entry['image_id'] )  ||  $entry['image_id']  == ''  ) {
        continue;
    }
    echo '<div class="flexslider">';
    echo '<ul class="slides">';
    $img = $img_url = $caption = '';

    if ( isset( $entry['image_id'] ) ) {
       $img = wp_get_attachment_image( $entry['image_id'], 'share-pick', 
       null, array(    'class' => 'thumb', ) );
    } 

    if ( isset( $entry['image_id'] ) ) {
       $img_url = wp_get_attachment_image_url( $entry['image_id'], null );
    }

    $caption = isset( $entry['image_caption'] ) ? wpautop(         
    $entry['image_caption'] ) : '';
    echo '<li data-thumb="'. $img_url .'">';
    echo $img;
    echo $caption;
    echo '</li>';
    echo '</ul>';
    echo '</div>';      
}