Display Custom Field Data in a

  • Resolved flint_and_tinder

    (@flint_and_tinder)


    14 years, 1 month 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.

Viewing 5 replies - 1 through 5 (of 5 total)

  • 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.

    Thread Starter flint_and_tinder

    (@flint_and_tinder)

    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

    Thread Starter flint_and_tinder

    (@flint_and_tinder)

    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; ?>
    Thread Starter flint_and_tinder

    (@flint_and_tinder)

    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?

    Thread Starter flint_and_tinder

    (@flint_and_tinder)

    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?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Display Custom Field Data in a’ is closed to new replies.