CoPress

Post edited 7:14 am – November 6, 2009 by Joseph Cefoli
Post edited 7:18 am – November 6, 2009 by Joseph Cefoli

If you are using the Gazette Edition theme and want to solve a page layout loading glitch on slow connections, read on.

What was happening was that the static images, titles and descriptions would load chronologically before the JavaScript and CSS style sheets loaded. The javascript/css then rearranged the layout to make the scroller work properly. For those of us on slow connections, we would see something like this until the page loaded:

On fast connections, this wasn't really a problem, but often times our internet at school is slow. Therefore, numerous people complained about the glitchy, overlapped page while the site was loading. This is not professional and I decided to investigate.

The solution is rather simple: add some CSS styling tags to the code and make a few elements hidden, so that nothing will overlap content that is already there. When the script loads, the images will become visible and the proper layout will display because the external style sheet takes priority.

Instructions:

1.  In wp-content/themes/gazette/includes, open featured.php
2. Search for

   <h3><a style="text-decoration: underline;" href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
           <p><?php echo strip_tags(get_the_excerpt(), '<a><strong>'); ?></p>
           <a href="<?php the_permalink() ?>" title="Read the full story" class="open"></a>
3. Change that to:

   <h3 style="visibility: hidden;"><a style="text-decoration: underline;" href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
           <p style="visibility: hidden;"><?php echo strip_tags(get_the_excerpt(), '<a><strong>'); ?></p>
           <a style="visibility: hidden;" href="<?php the_permalink() ?>" title="Read the full story" class="open"></a>
4. In addition, search for:

   <?php if ( !get_option('woo_resize') ) { ?>
          
           <img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo get_post_meta($post->ID, "image", $single = true); ?>&amp;h=270&amp;w=595&amp;zc=1&amp;q=95″ class="full" alt="<?php the_title(); ?>" />
          
           <img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo get_post_meta($post->ID, "image", $single = true); ?>&amp;h=75&amp;w=100&amp;zc=1&amp;q=95″ class="thumbnail" alt="<?php the_title(); ?>" />
          
           <?php } else { ?>
          
           <img src="<?php echo get_post_meta($post->ID, "image", $single = true); ?>" class="full" alt="<?php the_title(); ?>" />
          
           <img src="<?php echo get_post_meta($post->ID, "image", $single = true); ?>" class="thumbnail" alt="<?php the_title(); ?>" />

           <?php } ?>

5. Replace that with:

   <?php if ( !get_option('woo_resize') ) { ?>
          
           <img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo get_post_meta($post->ID, "image", $single = true); ?>&amp;h=270&amp;w=595&amp;zc=1&amp;q=95″ class="full" alt="<?php the_title(); ?>" style="visibility: hidden;" />
          
           <img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo get_post_meta($post->ID, "image", $single = true); ?>&amp;h=75&amp;w=100&amp;zc=1&amp;q=95″ class="thumbnail" alt="<?php the_title(); ?>" style="visibility: hidden;" />
          
           <?php } else { ?>
          
           <img src="<?php echo get_post_meta($post->ID, "image", $single = true); ?>" class="full" alt="<?php the_title(); ?>" style="visibility: hidden;" />
          
           <img src="<?php echo get_post_meta($post->ID, "image", $single = true); ?>" class="thumbnail" alt="<?php the_title(); ?>" style="visibility: hidden;" />

           <?php } ?>

   Essentially, all we're doing is adding a style tag with visibility: hidden so that the overlapping content doesn't display while the page loads

Now, when our page is loading, it no longer makes a mess of our layout and we get a white placeholder, followed by the loading graphic until the real images load.

Post edited 9:11 pm – November 8, 2009 by Joseph Cefoli

I like that. My code was kind of a workaround hack and although it fixes the layout problem – loading still isn't handled very well.

I notice that gallery is from Jondesign.net and he has since released a new version. We started using Gazette edition last June, so I'm glad it;s still being improved.

I will contact CoPress to get an updated version of this theme. I made a lot of customizations already, so I don't think I'll be able to completely replace it, as it will override my edits, but I can probably just mash it together so the new features are added.