• I have searched everywhere for an answer to this but have had no luck… I have a grid displaying post thumbnail images. The grid is currently set to display 6 boxes per row. All good to that point.

    Now there is an additional line of code specifying that column 6 has a unique/additional class than the others.

    <?php echo (($c != $bpr) ? ” : ‘reverse’); ?>”>

    What I want is for column 5 and 6 to have a the unique class which I’ve called “reverse.” I cannot figure out how to edit that bit of code. Here is my entire code:

    <ul>
    
                <?php
                    query_posts( 'cat=4' ); //let’s get the data from Category Id of 4, which in our case is Team.
                    $c = 1; //counter
                    $bpr = 6; //number of column in each row
    
                    if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
                            <?php if ( has_post_thumbnail()) { ?>
    
                    <li class="thumbnail <?php echo (($c != $bpr) ? '' : 'reverse'); ?>">
    
    				<a href="<?php the_permalink() ?>" title="<?php printf(__('%s','rys'), get_the_title()) ?>" rel="bookmark" class="image"><?php the_post_thumbnail('grid-thumb'); ?></a>
    
    				<div class="info-box" style="display:none;">
    					<div class="executive-image" style="overflow:hidden;" class="image">
    					<a href="<?php the_permalink() ?>" title="<?php printf(__('%s','rys'), get_the_title()) ?>" rel="bookmark"><?php the_post_thumbnail('grid-thumb'); ?></a>
    					</div>
    
    					<div class="info">
    						<p class="name"><?php the_title(); ?></p>
    						<p><?php the_field('designation'); ?></p>
    					</div>
    				</div><!-- end .info-box -->
    
                                </li>
    
                            <?php } else { ?>
                                <img src="<?php bloginfo('template_directory'); ?>/images/no-thumbnail.jpg" alt="No Thumbnail" />
                            <?php } ?>
    
                <?php
                if($c == $bpr) { //we add a condition here to see if counter is equal to the number of column.
                    echo '<div class="clear"></div>';
                    $c = 0; // back the counter to 0 if the condition above is true.
                }
                $c++; // increment counter of 1 until it hits the limit of column of every row.
    
                endwhile;
                else: // display if category is empty.
                ?>
                    <h2><?php _e( 'Oops!', 'rys' ); ?></h2>
                    <p><?php _e( 'Sorry, seems there are no post at the moment.', 'rys' ); ?></p>
                <?php
                endif;
                wp_reset_query();
                ?>
    
    	</ul>
Viewing 3 replies - 1 through 3 (of 3 total)
  • try:

    <li class="thumbnail <?php echo (($c > $bpr-2) ? 'reverse' : '' ); ?>">

    checks if the counter is greater than ‘posts-per-row minus 2’ and outputs ‘reverse’

    Thread Starter kikimarie123

    (@kikimarie123)

    Thank you! This did the trick…

    <li class="thumbnail <?php echo (($c < $bpr-1) ? '' : 'reverse'); ?>">

    Needed to switch > to < and then changed 2 to 1 otherwise it was changing the last three columns.

    Thank you so much!

    Needed to switch > to < and then changed 2 to 1 otherwise it was changing the last three columns.

    that is because I not only changed the conditional statement, but also the sequence of the output ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Grid System for Posts’ is closed to new replies.