CMB2 Display group field meta data if exists, if empty display default text

[keysarrr]

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.

METABOX//

  // $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
    ),
  ) );

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

FRONT-END//

<div>
  &lt;ul class="slides"&gt;

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


                foreach ( (array) $entries as $key =&gt; $entry ) {

                    $img = $img_url = $caption = '';
                if ( isset( $entry['image_id'] ) ) {
                    $img = wp_get_attachment_image( $entry['image_id'], 'share-pick', null, array(
                        'class' =&gt; '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 '&lt;li data-thumb="'. $img_url .'"&gt;';
                    echo $img;
                    echo $caption;
                    echo '</li>';


            } ?&gt;
  </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>';
     echo '&lt;ul class="slides"&gt;';
   $img = $img_url = $caption = '';

   if ( isset( $entry['image_id'] ) ) {
     $img = wp_get_attachment_image( $entry['image_id'], 'share-pick', null, array(
'class' =&gt; '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 '&lt;li data-thumb="'. $img_url .'"&gt;';
    echo $img;
    echo $caption;
    echo '</li>';
    echo '</ul>';
    echo '</div>';      
    }   
  }
 ?&gt;

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.

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?

[keysarrr]

All help will be truly appreciated :)
Thanks in advance !

[keysarrr]

I’ve also tried to go through this article https://www.smashingmagazine.com/2015/12/how-to-use-term-meta-data-in-wordpress/ but no luck with the code :(

[giudev]

Just query your post meta before the <ul> tag, so you will avoid to show an empty list.

Then your IF statement could be something like if ( count($entries) > 0)

Also wordpress uses this statement to check if a query returns posts:
<?php if ( $entries->have_posts() ) : ?>

Keep in mind you can write php in both ways:

<?php if ( statement ) : ?>
<!-- plain html here --> 
<div class="wrapper">
    <p> <?php echo $var;  ?> </p>
</div>
<?php endif;?>

or using the classing syntax

<?php 
if ( statement ) {
echo "html code here";
}
?>

Your final code should looks like this:

<div>

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

    <?php if ( count($entries) > 0 ) : ?>
        <ul class="slides">
            <?php 
            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>
    <?php endif; ?>
</div>

[keysarrr]

@giudev thank you for your time and assistance!
Unfortunately your solution doesn’t work with what I’m trying to accomplish :/
The div still remains instead of disappearing.
I ended up moving the div tags inside of the if statement//

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

<?php if ( count($entries) > 0 ) : ?>
    <div>
    &lt;ul class="slides"&gt;
        &lt;?php 
        foreach ( (array) $entries as $key =&gt; $entry ) {
            $img = $img_url = $caption = '';
            if ( isset( $entry['image_id'] ) ) {
                $img = wp_get_attachment_image( $entry['image_id'], 'share-pick', null, array(
                    'class' =&gt; '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 '&lt;li data-thumb="'. $img_url .'"&gt;';
            echo $img;
            echo $caption;
            echo '</li>';
        }
        ?&gt;
    </ul>
    </div>
&lt;?php endif; ?&gt; 

It still displays the div instead of removing it completely :(

[giudev]

This could means $entries contains data.
Try to var_dump that var before the IF statement to see what does it contain and why the code in entering there.

<?php
echo '<pre>' . var_dump($entries) . '</pre>
?>

[keysarrr]

This is the text displayed once I included the var-dump for a post with both image_id and image_caption saved empty:

array(1) { [0]=> array(1) { ["image_id"]=> int(0) } }

This is the text displayed for a post with both image_id and image_caption saved with data inside:
array(4) { [0]=> array(3) { ["image_id"]=> int(9) ["image"]=> string(64) "http://test.itskeace.com/wp-content/uploads/2016/08/TESTIMG3.png" ["image_caption"]=> string(56) "Lorem ipsum dolor sit amet, consectetur adipiscing elit." } [1]=> array(3) { ["image_id"]=> int(10) ["image"]=> string(63) "http://test.itskeace.com/wp-content/uploads/2016/08/TESTIMG.png" ["image_caption"]=> string(56) "Lorem ipsum dolor sit amet, consectetur adipiscing elit." } [2]=> array(3) { ["image_id"]=> int(8) ["image"]=> string(64) "http://test.itskeace.com/wp-content/uploads/2016/08/TESTIMG2.png" ["image_caption"]=> string(56) "Lorem ipsum dolor sit amet, consectetur adipiscing elit." } [3]=> array(3) { ["image_id"]=> int(10) ["image"]=> string(63) "http://test.itskeace.com/wp-content/uploads/2016/08/TESTIMG.png" ["image_caption"]=> string(56) "Lorem ipsum dolor sit amet, consectetur adipiscing elit." } }

[giudev]

array(1) { [0]=> array(1) { ["image_id"]=> int(0) } }

This means the array is not empty and this is the reason your code is being executed.

so try with
if ( isset( $entries[0]['image'] ) )
or
if ( $entries[0]['image_id'] > 0 )
or
if ( empty( $entries[0]['image'] ) )

This should work since now you are checking if the nested array (index 0) is empty or contains values

or try different approaches that php offers

[keysarrr]

THANK YOU SO MUCH !
THE SECOND ANSWER WORKED FOR ME!

Here is the final code :)

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

<?php if ( $entries[0]['image_id'] > 0 ) : ?>
    <div>
    &lt;ul class="slides"&gt;
        &lt;?php 
        foreach ( (array) $entries as $key =&gt; $entry ) {
        $img = $img_url = $caption = '';
        if ( isset( $entry['image_id'] ) ) {
            $img = wp_get_attachment_image( $entry['image_id'], 'share-pick', null, array(
        'class' =&gt; '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 '&lt;li data-thumb="'. $img_url .'"&gt;';
        echo $img;
        echo $caption;
        echo '</li>';
    }
        ?&gt;
    </ul>
    </div>
&lt;?php endif; ?&gt; 

[keysarrr]

Trying to mark your solution as a good answer but it’s not allowing me to.
I truly appreciate your time and assistance!!!

[keysarrr]

Curious, why do the first and last answers include “image” instead of “image_id”?
I just want to get a better understanding of each if statement you suggested…

[giudev]

Those were just different ways to approach the problem.
Instead of checking if the ID is greater than 0 I though it could works by checking if there is an image set or if the image field is empty.

[Author]

Posts