1

I was originally using a single field and things worked perfectly with the following code. Now I need to alter it to loop of several fields that are similar.

To start: I've created several custom fields on my page (slide1, slide2, slide3) and these fields contain a URL for an image location. Next I created some text fields (slide1_text, slide2_text, etc).

Code wise, I was pulling my fields in my template like:

<?php
    // check for slide
    $slide = get_post_meta($post->ID, 'slide1', $single = true);
    // check for slide text
    $thumb_text = get_post_meta($post->ID, 'slide1_label', $single = true);
    // if there's a slide
    if($slide !== '') { ?>
    <section class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <img src="<?php echo $slide; ?>" class="slider-images" />
            </div>
            <div class="carousel-caption">
                <h2><?php if($slide_text !== '') { echo $slide_text; } else { echo the_title(); } ?></h2>
            </div>
        </div>
    </section>
    <?php } // end if statement
?>

Basically it checks to see if there is a field called slide1 and if so it prints it. I don't know a lot about adding in loops and the end goal here is to return the fields formatted for a bootstrap carousel. (I know there are plugins but I've tried a couple and they aren't exactly what I want.)

How can I alter this code to include a loop so that it will check and see if there are fields titled slide* and if so, loop over them and get them all?

Additionally, it would be great if there were a way I could ensure the first slide had a class of "active" as you can see in the code below <div class="item active"> and all other fields will only be class=item.

2

Try this to loop through up to 4 slides - checking each for a valid slide:

<?php
    $max_slides = 4; // this should be the maximum number of slides there can be

    for ($i=1; $i<=$max_slides; $i++) { 
        // check for slide
        $key = 'slide' . $i; 
        $slide = get_post_meta($post->ID, $key, $single = true);
        // check for slide text
        $thumb_text = get_post_meta($post->ID, $key . '_label', $single = true);
        // if there's a slide
        if($slide !== '') { ?>
            <section class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="<?php echo $slide; ?>" class="slider-images" />
                    </div>
                    <div class="carousel-caption">
                        <h2><?php if($slide_text !== '') { echo $slide_text; } else { echo the_title(); } ?></h2>
                    </div>
                </div>
            </section>
        <?php } // end if statement
    } 
?>

You can change $max_slides to go through more than 4

  • This returns <img src="Array" />. I'm checking now to see if I can find out where it's causing that. Also, when I set the max slides to 10 it's printing more slides than are actually on the page's custom fields. – o_O Nov 4 '15 at 18:51
  • I think I had a bug - just edited my answer to fix - specifically this line: $slide = get_post_meta($post->ID, $key, $single = true); Sorry, need more coffee! – Aric Watson Nov 4 '15 at 18:54
  • Excellent. I see what you changed. Thanks. This appears to be working. I will tweak this a bit to get it where I want and try to get the first slide only with the active class. Thanks for your help. As soon as the timer is out I'll accept your answer. – o_O Nov 4 '15 at 19:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.