Search code examples
phpcssgallery

Rule to hide DIV if no image?


Hope you're well.

I have got the below code working as intended, but is there a way of ONLY showing the div 'listinggallery' if there are images returned?

At the moment, it works great if there are images in the listing, but if there are no images, then I have an empty styled div showing. Ideally I want create a rule to say "IF listingimage 'true' then show 'listinggallery'".

I have tried placing the 'listinggallery' div elsewhere within the code but just seems to crash my site, so hoping I can create a rule?

Kind regards, Spencer

<div class="listinggallery">
<?php
    //Get the images ids from the post_metadata
    $images = acf_photo_gallery('gallery', $post->ID);
    //Check if return array has anything in it
    if( count($images) ):
        //Cool, we got some data so now let's loop over it
        foreach($images as $image):
            $id = $image['id']; // The attachment id of the media
            $full_image_url= $image['full_image_url']; //Full size image url
            $full_image_url = acf_photo_gallery_resize_image($full_image_url, 1024, 768); //Resized size to 262px width by 160px height image url
            $thumbnail_image_url= $image['thumbnail_image_url']; //Get the thumbnail size image url 150px by 150px
            $url= $image['url']; //Goto any link when clicked
            $target= $image['target']; //Open normal or new tab
            $alt = get_field('photo_gallery_alt', $id); //Get the alt which is a extra field (See below how to add extra fields)
            $class = get_field('photo_gallery_class', $id); //Get the class which is a extra field (See below how to add extra fields)
?>
<div class="listingimage">
    <div class="thumbnail">
        <?php if( !empty($url) ){ ?><a href="<?php echo $url; ?>" <?php echo ($target == 'true' )? 'target="_blank"': ''; ?>><?php } ?>
            <a href="<?php echo $full_image_url; ?>" class="fancybox">
                <img src="<?php echo $thumbnail_image_url; ?>" alt="<?php echo $title; ?>" title="<?php echo $title; ?>">
            </a>
        <?php if( !empty($url) ){ ?></a><?php } ?>
    </div>
</div>
<?php endforeach; endif; ?>
</div>

Solution

  • If you move the creation of the <div> inside the block which decides if there is anything to display...

    <?php
    $images = acf_photo_gallery('gallery', $post->ID);
    //Check if return array has anything in it
    if( count($images) ):
        // Output start of gallery div
        ?>
        <div class="listinggallery">
        <?php
        //Cool, we got some data so now let's loop over it
        foreach($images as $image):
    
            // rest of code as it currently is
    
        endforeach; 
        // Close of gallery div
        ?>
        </div>
        <?php 
    endif; 
    ?>