Hide DIV if no image displayed

Hi,

I am using a slider in a page to display uploaded images. What I would like to do is hide the <div> if there is no image uploaded. Is there a command in PHP I could use to hide this div?

  • wishtotravel
    • Flash Drive

    Hi Jack, it's from WP-Types. Their conditional short code does not work for what I want to do though. Here is the code:

    <div id="flex-slider" class="flexslider-main flexslider">
    <ul class="slides">
    <li>
    
      <img src="[types field="travel-tips-image" url="true" width="770" height="400"][/types]" alt="[wpv-post-title]" >
      <div id="credit">Photo by: [wpv-post-author]. </div>
        </li>
      </ul>
    
    </div>

    So basically all I want to do is to not display that main div id="flex-slider" if there is no image.

  • wishtotravel
    • Flash Drive

    After a bit of research, it would seem like the easiest way would be JQUery. The problem is, I never wrote anything before. Here is the code I attempted to write but which is not working:

    $(function(){
    // Hide div when no image
    if ($("div#flex-slider:not(img)").length) {
    $("#flex-slider").hide(); }) });

    and this is what my source looks like (in view source) when there is no image

    <div id="flex-slider" class="flexslider-main flexslider">
    <ul class="slides">
    
     </ul>
    </div>
  • Jack Kitterhing
    • Code Norris

    Hi there @wishtotravel

    I hope you are well today.

    You could do that with jQuery or PHP, is the slider only on your homepage? I can't find the slider to download, so I can get all the correct divs, could you send me a zip file of it please? to jack(at)incsub.com

    As personally I'd do this with an else and hide the code, but I need the divs and to test before I give you the code :slight_smile:

    If you could send that over and I'll take a look.

    Thanks!

    Kind Regards
    Jack.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.