1

I was following along in another StackExchange Question from a couple of years ago where there was a layout along the lines of:

<div class=items active>
    <div class=row>

        <div class=1b>
            --content of first post in loop--
        </div>

        <div class=1c>
            --content of second post in loop--
        </div>

        <div class=1d>
            --content of third post in loop--
        </div>

        <div class=1e>
            --content of fourth post in loop--
        </div>

    </div>
</div>

<div class=items> -- Note the lack of the active class for this div and row --
    <div class=row>

        <div class=2b>
            --content of fifth post in loop--
        </div>

        <div class=2c>
            --content of sixth post in loop--
        </div>

        <div class=2d>
            --content of seventh post in loop--
        </div>

        <div class=2e>
            --content of eighth post in loop--
        </div>

    </div>
</div>

However, it didn't appear that any custom post type was being used for the solution.

Following is my code, attempting to modify the code provided in that other thread, and I'm having nothing show up in my loop at all (Note that I believe the original thread had the changes happening every 3 posts instead of every 4 as I have here, so I may well have my numbers wrong below :(

add_shortcode( 'partnerlogos', 'display_custom_post_type' );

function display_custom_post_type(){
    $args = array(
        'post_type' => 'dnf_partner_logos',
        'post_status' => 'publish'
    );

    $query = new WP_Query( $args );
        while( have_posts() ) : the_post();
        $image = get_field('partner_logo');

        $position = $wp_query->current_post;
        $p3 = $position%4;
        $p6 = $position%8;
        $number_posts = $wp_query->post_count-1;

        // vars
        $url = $image['url'];
        $title = $image['title'];
        $alt = $image['alt'];
        $caption = $image['caption'];

        // thumbnail
        $size = 'dnf-partners';
        $thumb = $image['sizes'][ $size ];
        $width = $image['sizes'][ $size . '-width' ];
        $height = $image['sizes'][ $size . '-height' ];

        if( $p3 == 0 ) echo '<div class="item active"><div class="row">';
        if( $p6 == 0 ) echo '<div class="col-md-3">';
        elseif( $p6 == 1 || $p6 == 3) echo '<div class="item"><div class="row"';
        elseif( $p6 == 5 ) echo '<div class="col-md-3">'; ?>

        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>"/><!--item-->

        <?php if( $position == $number_posts || in_array($p6, array(0, 2, 4, 5)) ) echo '</div>';
            if( $p3 == 2 || $position == $number_posts ) echo '</div></div><!--layer-->'; 

        endwhile;
}

1 Answer 1

1

After quite a bit of trial and error, I got the code set up correctly for the WordPress loop. I put it into a shortcode. Here it is:

add_shortcode( 'partnerlogos', 'display_partner_logos' );
function display_partner_logos(){
    // Define the query
    $args = array(
        'post_type' => 'dnf_partner_logos',
        'post_status' => 'publish'
    );

    $query = new WP_Query( $args ); ?>

<!-- Carousel
================================================== -->
<div id="partnersCarousel" class="carousel slide">
    <div class="carousel-inner">
        <?php $count = 0;
        while ($query->have_posts()) : $query->the_post();
            $image = get_field('partner_logo');
            $url = $image['url'];
            $size = 'dnf-partners';
            $thumb = $image['sizes'][ $size ];
            $width = $image['sizes'][ $size . '-width' ];
            $height = $image['sizes'][ $size . '-height' ];

        if($count % 4 == 0) { ?>

        <div class="item <?php if($count == 0) echo "active"; ?>">
            <div class="row">

        <?php } ?>

                <div <?php post_class("col-md-3") ?> id="post-<?php the_ID(); ?>">
                    <a href="#" class="thumbnail">
                        <img src="<?php echo $thumb; ?>" class="img-responsive" alt="Thumb11">
                    </a>
                </div>

        <?php if($count % 4 == 3) { ?>   
            </div>
        </div>

        <?php } 
            $count++;
        endwhile;

        if($count % 4 != 0) { ?>
        </div>
    </div>
    <?php } ?>

</div>

<a class="left carousel-control" href="#partnersCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-2x"></i></a>
<a class="right carousel-control" href="#partnersCarousel" data-slide="next"><i class="fa fa-chevron-right fa-2x"></i></a>

</div>

<?php     
    wp_reset_postdata();
    wp_reset_query();
}
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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