WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Display Custom Field Data in a (6 posts)

  1. flint_and_tinder
    Member
    Posted 4 years 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. Matthew Denton
    Member
    Posted 4 years 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 4 years 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 4 years 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 4 years 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 4 years 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.

About this Topic