WordPress.org

1. flint_and_tinder
   Member
   Posted 1 year ago #

   Hi All,

   I wonder if anyone can help?

   I've been using custom fields quite a lot recently, which are amazingly handy. So far I've just displayed single bits of information using the following code:

   <?php echo get_post_meta($post->ID, "Location", true);?>

   However, now I'm trying to add Custom Field information that contains URLs of images in order to populate a Javascript slider. Here is an example of the code I've used so far:

   <ul>
   <li><img src="<?php echo get_post_meta($post->ID, "Artist Image 1", true);?>" height="388" width="620"/></li>
   <li><img src="<?php echo get_post_meta($post->ID, "Artist Image 2", true);?>" height="388" width="620"/></li>
   <li><img src="<?php echo get_post_meta($post->ID, "Artist Image 3", true);?>" height="388" width="620"/></li>
   </ul>

   However the slider still display the empty
   <li>s even when no images are loaded (e.g. no Artist Image 3 URL has been placed in the custom field).

   Does anyone know a way of how I can populate a
   <ul> with image URL placed in a or multiple custom fields? Any method will do, as long as it works and will only display whatever images are included for that particular post.

   Thanks,

   Adam.

2. mdbitz
   Member
   Posted 1 year ago #

   Adam:

   From your code snippet it looks like you are using the get_post_meta function correctly. Is the above code snippet within the post loop? I would confirm that your $post object is populated first as that is the most common reason for these types of errors.

3. flint_and_tinder
   Member
   Posted 1 year ago #

   Hi mdbitz,

   Thanks for the reply.

   The code I have put above does work in a sense that it displays each Image within the JS Slider...

   however

   What happens is that say I create 5 custom fields named Artist Image 1 to Artist Image 5, if the user doesn't add URL to all 5 fields then the code I have posted will still scroll through as if 5 images have been included but leave blank space where the missing images should be.

   What I am after is code that will create and populate a ul with whatever number of Artist Images have been provided within the custom field of that particular page (.e.g page 1 may only have 2 images, whereas page 2 may have 4).

   Does that make sense?

   Btw I'm still pretty new to WP so answers in layman's terms will be very much appreciated.

   Thanks,

   Adam

4. flint_and_tinder
   Member
   Posted 1 year ago #

   I found some other code online for something else and tried to adapt it, but it doesn't work. Could it with a bit of tinkering though?

   Any help here would be incredibly appreciated...

   <?php
   pic1 = get_post_meta($post->ID, 'Artist Image 1', true);
   if (!empty($pic1)) : ?>
   <li><img src="<?php echo $pic1; ?>" height="388" width="620"/></li>
   <?php endif; ?>
   
   <?php
   pic2 = get_post_meta($post->ID, 'Artist Image 2', true);
   if (!empty($pic2)) : ?>
   <li><img src="<?php echo $pic2; ?>" height="388" width="620"/></li>
   <?php endif; ?>
   
   <?php
   pic3 = get_post_meta($post->ID, 'Artist Image 3', true);
   if (!empty($pic3)) : ?>
   <li><img src="<?php echo $pic3; ?>" height="388" width="620"/></li>
   <?php endif; ?>
   
   <?php
   pic4 = get_post_meta($post->ID, 'Artist Image 4', true);
   if (!empty($mp4)) : ?>
   <li><img src="<?php echo $mp4; ?>" height="388" width="620"/></li>
   <?php endif; ?>
   
   <?php
   pic5 = get_post_meta($post->ID, 'Artist Image 5', true);
   if (!empty($pic5)) : ?>
   <li><img src="<?php echo $pic5; ?>" height="388" width="620"/></li>
   <?php endif; ?>

5. flint_and_tinder
   Member
   Posted 1 year ago #

   Ok I've realised I didn't add the $ before each of the pic(x)s.

   Doing that has made the images appear, but in the post example I am using where only 1 pic URL has been inputed (Artist Image 1) the slider just outputs that 1 image 5 times and scrolls through them.

   Can anyone help please?

6. flint_and_tinder
   Member
   Posted 1 year ago #

   Ok I've managed to figure it out. The code in my example was slightly different to what I posted above.

   Therefore final code, which seems to work ok whenever there is more than one image is this:
   

   <div id="slider" class="pageSlider">
       <ul>
   <?php
   $pic1 = get_post_meta($post->ID, 'Artist Image 1', true);
   if (!empty($pic1)) : ?>
   <li><img src="<?php echo $pic1; ?>" height="388" width="620"/></li>
   <?php endif; ?>
   <?php
   $pic2 = get_post_meta($post->ID, 'Artist Image 2', true);
   if (!empty($pic2)) : ?>
   <li><img src="<?php echo $pic2; ?>" height="388" width="620"/></li>
   <?php endif; ?>
   <?php
   $pic3 = get_post_meta($post->ID, 'Artist Image 3', true);
   if (!empty($pic3)) : ?>
   <li><img src="<?php echo $pic3; ?>" height="388" width="620"/></li>
   <?php endif; ?>
   <?php
   $pic4 = get_post_meta($post->ID, 'Artist Image 4', true);
   if (!empty($mp4)) : ?>
   <li><img src="<?php echo $mp4; ?>" height="388" width="620"/></li>
   <?php endif; ?>
   <?php
   $pic5 = get_post_meta($post->ID, 'Artist Image 5', true);
   if (!empty($pic5)) : ?>
   <li><img src="<?php echo $pic5; ?>" height="388" width="620"/></li>
   <?php endif; ?>
   
       </ul>
     </div>

   If only 1 image is added into the custom field then the slider just slides through that image only. Is there any way I can tell the system that if there is only one image loaded that it outputs it as a static jpeg instead of a ul within the slider?

Topic Closed

This topic has been closed to new replies.