Grid Issue with Loop

  • Hello all,

    I have an odd problem with creating a grid of thumbnails. The grid ends up not being correct, it will skip a space or be generally wacky. If I have three separate loops with a clear between each one it works, but I can’t get the loop to work cleanly.

    Any ideas on creating a simple grid of 9 thumbnails? Thanks!

    <?php $my_query = new WP_Query('category_name=Videos&showposts=9');
  while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate[] = $post->ID ?>

  				<?php
						$video = get_post_meta($post->ID, "video_value", true);
						$thumbnail = get_post_meta($post->ID, "thumbnail_value", true);
				?>

	<div id="video">

		<a  title=<?php the_title(); ?> rel="vidbox" href="<?php echo $video; ?>">
		<img width="120" height="90" src="<?php echo $thumbnail; ?>" /></a>

		<h8><?php the_title(); ?></h8>
		<p><?php the_excerpt(); ?></p>
		<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">(Transcript...)</a>
	</div>

		<?php endwhile;?>

<div class="clear"></div>
Viewing 3 replies - 1 through 3 (of 3 total)

  • It could be a CSS problem. However, there is no such markup as <h8>.

    Thread Starter misterpatrick67

    (@misterpatrick67)

    Thanks. The h8 is custom and a sub-style of #video and is just styling for the titles. Here’s the video class:

    #video{
    margin: 30px 64px 10px 0px;
    padding:0px;
    float:left;
    width:120px;
    }

    Pretty basic. I’ve tried some of the hints of running three loops but am unable to get them to work. If anyone has some examples that work that’d be great. I’ll keep looking as well.

    If you take out the div styling, do the 3 loops work?

    If not, the problem right now is the loops.
    If so, then the issue is probably css related.

    I can’t help with a loop problem, but for css, first trouble shoot by changing the h8 to h6 and style the way you like (#video h6{}). The browser might be having trouble with the non-standard declaration.
    Or, it could be padding/margin/width in relation to the container, especially if ie is the browser. (is the container width greater than 552px?)

    The first post sounds like a float/clear issue, which is really common and there are lots of approaches to fixing – try google “css float clear gallery” or “css float clear grid” to find what will work best for you.

    I only see one loop above though, pulling in 9 thumbnails from posts in Video. Which with floating should work, but there are also examples of having 3 loops in 3 columns.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Grid Issue with Loop’ is closed to new replies.

Tags