Question

I’m having a really frustrating problem with a page at the moment.
I’m using jquery isotope to make a horizontal grid of images wrapped in divs, all running on wordpress. It’s been working flawlessly for quite a while. It’s a page that shows the featured image from the first post of each of the child categories of certain category.
For the masonry grid to work properly I’ve been using php to retrieve the image size from each image and put it in the div tag as inline css styles. As I said it’s been working flawlessly.

Suddenly I’m experiencing really bad load times on my site, and once the page loads, the grid will be all messed up. Some of the isotope elements will be in their right spots, but some will be completely off. Checking the source code I can tell that the “off” elements haven’t gotten their sizes printed in inline css – the numbers they were supposed to get via php. It seems to be completely random which divs are off on each page load. Some times they will all be in their right place. But most often lately three-ish will be off.

I’ve just upgraded to wordpress 3.3.2 — the problem has been there both before and after the upgrade.

My hosting service refuses to admit that it’s their problem. I’m having trouble believing this, as I hadn’t made any changes to anything when the site suddenly started messing up.

Can a WordPress installation suddenly mess up, even after upgrading to a new version?

This is the code I’m using to get the entire grid working:

$args=array(
  'child_of' => '50',
  'orderby' => 'name',
  'order' => 'DESC'
  );
$categories=get_categories($args);
    foreach($categories as $category) {
      $posts=get_posts('showposts=1&cat='. $category->term_id);
      if ($posts) {
        foreach($posts as $post) {
          setup_postdata($post); 

        ?>
        <a class="thumblink" href="<?php the_permalink();?>">
        <?php
            if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
              $thumbsize = get_post_custom_values("thumbsize"); // retrieve the wished thumb size, designated in the custom field
              if ( $thumbsize[0] >= 1 && $thumbsize[0] <= 6 ) { // if the thumb size is in the 1 to 6...
          $imglink = wp_get_attachment_image_src( get_post_thumbnail_id(), $thumbsize[0] );
          $size = getimagesize($imglink[0]); // get the width and height of the image in order to work properly with masonry
          echo "<div class='thumbdiv masonrythumb hashover' style='width:$size[0]px;height:$size[1]px'>";
          echo "<div class='hoverobject'>"; //superimposes the content of the post on top of the image on hover
          the_content();
          echo "</div>";
            the_post_thumbnail( $thumbsize[0], array('class' => '' , 'title' => '' ) ); // use the designated thumb size
          echo "</div>";
            }
            }
    ?>
    </a>




        } // foreach($posts
      } // if ($posts
    } // foreach($categories

Can anyone tell if there’s an obvious problem with the script that makes the whole page load excessively slow?

Thank you very much to everyone who may be able to help me. I’m pulling my hair out over this; I honestly don’t understand how some thing that has been working, can suddenly stop working.

Answer 1

To anyone who’s interested, I seem to have solved this on my own.

I don’t quite know what screwed the page up to begin with, but I can say that it seems that the two functions wp_get_attachment_image_src() and getimagesize() somehow got in each other’s way. Now, having read the documentation properly I realize that the wp_get_attachment_image_src() function returns an array with both the img source AND width and height, so I don’t even need the getimagesize() function.

The site loads quickly and nicely now, without any DOM messing-ups.