WordPress Loop Issue

Question

0.00/5 (No votes)

See more:

I have a set of Wordpress posts with featured images. The images will be displayed in rows of 3 in a grid style format.

When an image is clicked on, the content for that post should be display below the current row and above the next row.

I have written a custom loop, however my problem is as follows:

In a specific row, the onclick content doesn't display for image 1 or 2 unless the row is full (3 posts present.)

I have displayed my page template code below.

<?php
/*
Template Name: Sponsors Grid
*/ ?>

<?php get_header(); ?>



<div id="content">


<div class="slide slide3 sponsors" data-slide="3" data-stellar-background-ratio="0.5">
					

<div class="wrap">
					

<div class="fourcol thanks">
	
	<h2>The NML Awards would not be possible without our amazing sponsors</h2>
	
</div>
											

<div class="sevencol logos">



<?php
$counter = 1; //start counter

$grids = 3; //Grids per row


$wp_query = new WP_Query('showposts=30&&orderby=date&&order=asc&&cat=6');
							
if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>




<?php if($counter == 1) : ?>


			<div class="sponsor_logos">
				<a id="sponsor<?php echo the_ID(); ?>"><div class="threecol sponsor"><?php the_post_thumbnail('bones-thumb-150'); ?></div></a>
			</div>
			
			<div class="content">
			
			<?php $id1 = get_the_ID(); ?>
			
			<?php $url1 = wp_get_attachment_url( get_post_thumbnail_id($id1, 'bones-thumb-150') ); ?>
						
			<?php $title1 = get_the_title(); ?>
			
			<?php ob_start(); the_content(); $content1 = ob_get_clean(); ?>
			
			</div>


<?php elseif($counter == 2) : ?>

			<?php $id2 = get_the_ID(); ?>
			
			<div class="sponsor_logos">
			<a id="sponsor<?php echo the_ID(); ?>"><div class="threecol sponsor"><?php the_post_thumbnail('bones-thumb-150'); ?></div></a>
			</div>
			
			<div class="content">
			
			<?php $url2 = wp_get_attachment_url( get_post_thumbnail_id($id2, 'bones-thumb-150') ); ?>
			
			<?php $title2 = get_the_title(); ?>
			
			<?php ob_start(); the_content(); $content2 = ob_get_clean(); ?>
			
			</div>
			



<?php elseif($counter == $grids) : ?>
			
			<?php $id3 = get_the_ID(); ?>
			
			<div class="sponsor_logos">
				<a id="sponsor<?php echo the_ID(); ?>"><div class="threecol sponsor"><?php the_post_thumbnail('bones-thumb-150'); ?></div></a>
			</div>
			
			<div class="content">
			
			<?php $url3 = wp_get_attachment_url( get_post_thumbnail_id($id3, 'bones-thumb-150') ); ?>
			
			<?php $title3 = get_the_title(); ?>
			
			<?php ob_start(); the_content(); $content3 = ob_get_clean(); ?>
			
			</div>	
			
			
			
			<div class="clearfix"></div>
			
			
			<div class="sponsor_info">
						
					<div id="sponsor<?php echo $id1; ?>content" class="sponsor_content">
					
						<img src="<?php echo $url1; ?>" />
						
						<h2><?php echo $title1; ?></h2>
						
						<?php echo $content1; ?>
					
					</div>
					
			  </div>
			  
			  
			  
			  <div class="sponsor_info">
			  			  						
					<div id="sponsor<?php echo $id2; ?>content" class="sponsor_content">
					
						<img src="<?php echo $url2; ?>" />
						
						<h2><?php echo $title2; ?></h2>
						
						<?php echo $content2; ?>
					
					</div>
					
			  </div>
			  
			  
			  
			  <div class="sponsor_info">
			  						
					<div id="sponsor<?php echo $id3; ?>content" class="sponsor_content">
					
						<img src="<?php echo $url3; ?>" />
						
						<h2><?php echo $title3; ?></h2>
						
						<?php echo $content3; ?>
					
					</div>
					
			  </div>	



<?php $counter = 0; endif; ?>


<?php $counter++; endwhile; ?>


<?php endif; ?>



</div> <!-- .sevencol -->

</div> <!-- .wrap -->

</div> <!-- .slide -->

</div> <!-- .content -->



<?php get_footer(); ?>

Posted 29-Jul-13 0:57am

zakaryfaithfull

Updated 30-Jul-13 3:12am

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Morgan Estes · Answer 1 · 2013-07-30T10:48:00

It's a bit challenging for me to not have a visual of what the browser output looks like, but here's a couple of thoughts after reading through the code:

* Single amp separates parameters here.

PHP

$wp_query = new WP_Query('showposts=30&orderby=date&order=asc&cat=6');

<div class="sponsor_info"></div> only gets displayed if $count == $grids (3, in this case). So if you only have 2 items in a row, the description never gets displayed for #1 & #2.

You can try to rework it so that the "sponsor_info" div gets displayed in the same part of the loop that the "sponsor_logos" does so they're grouped together for each sponsor, or close the if...else for the "sponsor_logos" and start a new loop through the previous count to write out the sponsor info for the previous row of logos before moving to the next row.