Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm having trouble wrapping my head around the best way to achieve this. I'm trying to load two photos at a time into a which serves as a slideshow wrapper. Currently i'm repeating a lot of code and just manually setting an offset each time.

My current code works, but it's just very clunky. Here's what it looks like:

<div id="engagement">
<div>
    <div class="row">
        <?php
            $images = new WP_Query( array(
                'post_parent' => get_the_ID(),
                'post_status' => 'inherit',
                'post_type' => 'attachment',
                'post_mime_type' => 'image',
                'order' => 'ASC',
                'orderby' => 'menu_order ID',
                'offset' => 0,
                'posts_per_page' => 2, // show two images at a time
                'update_post_term_cache' => false,
            ) );    
                foreach ($images->posts as $image) {
                ?>
                <div class="six columns mobile-two">
                    <?php echo wp_get_attachment_image( $image->ID, 'full' ); // get the image ?>
                </div> 
            <?php
            }                               
        ?>                      
    </div>
    <div class="row">
        <?php
            $images = new WP_Query( array(
                'post_parent' => get_the_ID(),
                'post_status' => 'inherit',
                'post_type' => 'attachment',
                'post_mime_type' => 'image',
                'order' => 'ASC',
                'orderby' => 'menu_order ID',
                'offset' => 2,
                'posts_per_page' => 2, // show two images at a time
                'update_post_term_cache' => false,
            ) );    
                foreach ($images->posts as $image) {
                ?>
                <div class="six columns mobile-two">
                    <?php echo wp_get_attachment_image( $image->ID, 'full' ); // get the image ?>
                </div> 
            <?php
            }                               
        ?>                      
    </div>
    <div class="row">
        <?php
            $images = new WP_Query( array(
                'post_parent' => get_the_ID(),
                'post_status' => 'inherit',
                'post_type' => 'attachment',
                'post_mime_type' => 'image',
                'order' => 'ASC',
                'orderby' => 'menu_order ID',
                'offset' => 4,
                'posts_per_page' => 2, // show two images at a time
                'update_post_term_cache' => false,
            ) );    
                foreach ($images->posts as $image) {
                ?>
                <div class="six columns mobile-two">
                    <?php echo wp_get_attachment_image( $image->ID, 'full' ); // get the image ?>
                </div> 
            <?php
            }                               
        ?>                      
    </div>
</div>

It seems like there has to be a better way to do this.

Thanks!

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

Yep - it is pretty inefficient. Here is a rewrite:

<div id="engagement">
    <?php
        $images = new WP_Query( array(
            'post_parent' => get_the_ID(),
            'post_status' => 'inherit',
            'post_type' => 'attachment',
            'post_mime_type' => 'image',
            'order' => 'ASC',
            'orderby' => 'menu_order ID',
            'offset' => 0,
            'posts_per_page' => 6, // show six images total
            'update_post_term_cache' => false,
        ) );    
        $count = 0;
        foreach ($images->posts as $image) { 
            if($count % 2==0) echo "<div><div class='row'>";
            echo "<div class='six columns mobile-two'>
            echo wp_get_attachment_image( $image->ID, 'full' );
            echo "</div>";
            $count++;
            if($count % 2==0) echo "</div></div>";
        }                               
    ?>
</div>                      

The idea here is to just use 1 query to get all six images, and then loop through them. We are using the modular operator (%) to determine when we are on odd or even items so we know when to add the starting and ending div elements for the row.

Code is just off the top of my head, so it is currently untested...

share|improve this answer
    
Thanks. Not sure why I didn't think of the modulo. Your code is almost there. Not sure if I should edit your answer or not, but moving the placeholder <div> inside the loop and moving the counter before the last if does the trick. –  Nathan P. Jan 3 '13 at 3:56
    
Feel free to edit the answer - might help the next guy find his way... –  Ed Burns Jan 3 '13 at 5:07
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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