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 am trying to integrate jSquares with wordpress and I am having a couple of issues. I am a beginner developer - but would love to solve this problem so that anyone can use jSquares with Wordpress. jSquares info can be found here: boedesign.com/blog/2009/10/22/jsquares-for-jquery/

This is my code so far:

    <div id="js-container">

<?                      $boxes = array(
// sizes are styled through css and top, left css attributes are hard-coded on the div
                array('size' => 3, 'top' => 0, 'left' => 0),
                    array('size' => 2, 'top' => 0,'left' => 224),
                    array('size' => 2, 'top' => 78, 'left' => 224),
                    array('size' => 3, 'top' => 0, 'left' => 336),
                    array('size' => 2, 'top' => 0, 'left' => 560),
                    array('size' => 2, 'top' => 78, 'left' => 560),
                    array('size' => 2, 'top' => 156, 'left' => 0),
                    array('size' => 3, 'top' => 156, 'left' => 112),
                    array('size' => 2, 'top' => 156, 'left' => 336),
                    array('size' => 1, 'top' => 156, 'left' => 448),
                    array('size' => 1, 'top' => 195, 'left' => 448),
                    array('size' => 2, 'top' => 156, 'left' => 504),
                    array('size' => 1, 'top' => 156, 'left' => 616),
                    array('size' => 1, 'top' => 234, 'left' => 56),
                    array('size' => 1, 'top' => 234, 'left' => 336)); ?>

            <?php 
            query_posts(array(
                'showposts' => 15, 
                'post_type' => 'page', 
                'posts_per_page=15', 
                'orderby' => 'rand', 
                'post__not_in' => array(33,145,31,148,109,111,113,29,209)));


            if (have_posts()) : while (have_posts()) : the_post(); 
            foreach ($boxes as $box); ?>    

    <div class="js-image size-<?= $box['size']; ?>" style="top:<?= $box['top']; ?>px;left:<?= $box['left']; ?>px;">     
        <a href="<?php the_permalink(); ?> "><img class="js-small-image" src="<? $image = wp_get_attachment_image_src ( get_post_thumbnail_id ( $post_id ), 'single-post-thumbnail' ); echo $image[0]; ?>"/></a>
        <div class="js-small-caption">
            <span><?php the_title(); ?></span>
        </div>
        <div class="js-overlay-caption-content">
            <h4><?php the_title(); ?></h4>
            <p>
        <a href="<?php the_permalink(); ?>">Read</a>
            </p>
        </div>
    </div>


        <?php endwhile; endif; ?>

But the foreach ($boxes as $box) is only reflecting the last array for $boxes instead of one of each. I hope this makes sense. Any suggestions would be greatly appreciated!!

Thanks for the advice! Here's where I am:

     <?php $query = new WP_Query(
             array('showposts' => 15, 
             'post_type' => 'page', 
             'posts_per_page=15', 
             'orderby' => 'rand', 
             'post__not_in' => array(33,145,31,148,109,111,113,29,209))); 
      foreach($query->$boxes as $box ); 
      while ($query->have_posts()) : $query->the_post() ; ?>

I appreciate your help. I am trying to teach a lot of this to myself and post it for everyone else to use. I am still getting stuck - Invalid argument supplied for foreach()

share|improve this question
    
don't use query_posts!!!!!!!! Use WP_Query or hook into the query before it happens via actions/hooks –  Tom J Nowell Sep 21 '12 at 13:43
    
Thanks for the advice! Here's where I am: ` <?php $query = new WP_Query(array('showposts' => 15, 'post_type' => 'page', 'posts_per_page=15', 'orderby' => 'rand', 'post__not_in' => array(33,145,31,148,109,111,113,29,209))); foreach($query->$boxes as $box ); while ($query->have_posts()) : $query->the_post() ; ?>` I appreciate your help. I am trying to teach a lot of this to myself and post it for everyone else to use. I am still getting stuck - Invalid argument supplied for foreach() –  user1687763 Sep 21 '12 at 14:57
    
can you put that in your question so that it's formatted correctly? –  Tom J Nowell Sep 21 '12 at 15:03

1 Answer 1

up vote 0 down vote accepted

Your main issue is that you're loop logic is incorrect

You're doing:

Foreach post
    iterate over each box type
        and print out the current post as that box

So if you define 5 boxes, then for post 1 you'll have 5 copies of that post, then another 5 for post 2, then another 5 for post 3. You're showing 15 posts, and you've defined 15 boxes, so your code is going to output 15x15=225 jsquares.

Instead you want:

foreach post N
    print out the current post as box N

so:

$q = new WP_Query(array(
    /* .. options .. */
));
if($q->have_posts()){
    $counter = 0;
    while($q->have_posts()){
        $q->the_post();
        $box = $boxes[$counter];
        // print out your jsquare stuff here

        // increment the counter
        $counter++;
    }
    // reset the main post data
    wp_reset_postdata();
} else {
    echo '<p>hmmm no posts found</p>';
}

Here we setup a counter, and use that to grab the box from the boxes array. At the end of the loop we increase it by 1 so that the next post uses the next box along.

You may also find libraries like Isotope and jQuery Masonry interesting

share|improve this answer
    
so is it correct to say that I was looping the loops and instead by using the counter you stop it from relooping and move it to the next one in the boxes array? Thank you so much!! It worked perfectly. –  user1687763 Sep 21 '12 at 15:28
    
Thanks =] If you can accept this answer then if it works correctly? What you were doing is foreach post, print all the boxes, rather than foreach post, print just that posts box –  Tom J Nowell Sep 21 '12 at 15:31
    
Can I ask you another question regarding this same code? I have been working for a week with no success. The wordpress loop fills boxes for the output and the jquery then arranges the boxes. I am trying to get the jquery to shift the position of the boxes or the content of the boxes every 15 seconds. I tried to reload the wordpress loop but that does not work. Next, I thought I could put that boxes in an iframe and refresh the iframe every 15 seconds however it is not refreshing the random loop order. A demo of the jquery script can be seen here: boedesign.com/demos/jsquares –  user1687763 Oct 4 '12 at 17:06
    
Why would you want to shift the position every 15 seconds? That sounds nightmarish from a UX point of view –  Tom J Nowell Oct 4 '12 at 18:05
    
I was trying to make it more dynamic. Maybe its something I should avoid. –  user1687763 Oct 4 '12 at 18:14

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.