Advanced Custom Fields Gallery Field Image Not Showing

Question

I am using Advanced Custom Fields with the Gallery Field add-on and Fancybox. If the viewer clicks on a thumbnail, a Fancybox slideshow is supposed to pop up. The problem is, the thumbnail is not showing up. When I inspect the element, the img size is 0x0 for some reason.

Here's my code:

 <div id="post-img">    
        <?php 
        $images = get_field('gallery'); 
        $image_1 = $images[0]; 
        ?>    
         <?php foreach( $images as $image ): ?>

        <a href="<?php echo $image['url']; ?>" rel="fancybox">  
            <h5>view images</h5><img src="<?php echo $image_1['url']; ?>"/>
        </a>
        <?php endforeach; ?>
    </div><!-- #post-img -->

CSS:

#post-img {
float:left;
margin-bottom:0;
padding-top:10px;
padding-bottom:0;
}

#post-img a {
display:none;
}

#post-img img {
display:none;
width:200px;
height:auto;
}

#post-img a:first-of-type img{
display:block;
}

Answer 1

First of all: You are using the PHP and ACF correctly, and the thumbnail should be populated.

But you are hiding it with your:

#post-img a {
    display:none;
}

This is simply telling every a inside of #post-img, that it should not be shown. Since your img is inside of a it is thus not shown.

JSFiddle where I changed display:none; to display:block; for illustrative purposes.

Let me know if this helps you.

Answer 2

First you should check that the img.src is being populated?

If it is, then why don't you try adding height and width attributes to the img element?

<img src="<?php echo $image_1['url']; ?>" width="200" height="200" />