Jumpy pages and Excluding image from gallery

[Pamela Cather]

I have two things to work out and I’m ready to go live (I think) 🙂

1) My pages jump as they load each and every time. It seems that something is loading, like a solid white page, for just a fraction of a second.

2) in a post, is there any way to say exclude the featured image or other photos from the gallery?

THanks

[Bill Robbins]

Pamela,

I have an idea about the white flash. Browser’s load from the top of the HTML page down. So while the CSS file is near the top, there’s quite a bit of extra code added by plugins and so on that is inserted before the custom background is loaded. You could try taking the custom background out of the theme options page and adding them directly to the bottom of the style.css file

		
	body, body.dark { background:url(https://www.test.reflections-etc.com/wp-content/uploads/2012/06/reflect_bkgr.jpg);background-color: #9b4e24; background-repeat: repeat; background-attachement: scroll; background-position: top left;}	    
	.header-wrap, body.dark .header-wrap { background:url();background-color: #4a2d17; background-repeat: no-repeat; background-attachement: scroll; background-position: top left;}						
		
 

That should cause those (which includes your background color) to load before the scripts which hopefully will help with the white flash.

That said, I did notice that the NextGen Gallery plugin is loading the same jQuery plugin as the WP-Cycle plugin. That could cause problems.

As a general rule, I highly recommend skipping the NextGen Gallery.

---

Excluding Images
You can exclude an image. The trick is if you want to insert an image in your post, but not have it in the gallery, then you’ll want to upload it in the Media section of your WordPress control panel. Then copy the URL to the image and insert the image manually. That way the image is visible in the post, but it’s not attached to the post. WordPress will display all images attached to the post.

---

Let me know if you have any trouble,
Bill

[Pamela Cather]

As far as the jumpiness is concerned I deleted the NextGen Gallery. I wasn’t using it anyway. Just activated to check it out. Then I removed the theme options and added them to the style.css.

Still jumping????

Here you can see a series of screen shots I took http://clients.reflections-etc.com/websiteproblem

It is loading everything twice. First with the white background and then the custom background.

??????

[Pamela Cather]

Also, I don’t know if this is significant, but on one screenshot that was just loading the white background, I saw that it was “reading ajax.googleapis.com” . I have no idea what this is or if it’s important. ???

[Bill Robbins]

Pamela,

I think we’re headed in the right direction. One thing that didn’t make it through was the background color. The body tag has a white background by default which is what you’re seeing before the image loads. If you assign a color to this style:

body, body.dark { 
	font: normal normal 14px/1.2  Verdana, sans-serif;
	color: #EBEE9F;
	background:url(https://www.test.reflections-etc.com/wp-content/uploads/2012/06/reflect_bkgr2.jpg);
	background-color: ; 
	background-repeat: repeat; 
	background-attachement: scroll; 
	background-position: top left;
}

That will cause a color other than white to display before your background image loads.

Adding that will probably be about the extent of what we can do to minimize the white prior to the page loading.

If I can help, let me know,
Bill

[Pamela Cather]

Bill,

I’ve been dissecting my website all weekend. I’ve studies the css using Firebug until I know every detail there is. I’ve deactivated very plugin one by one. I’ve been going through the php and deleting sections of code one by one to see what happens, and,…..I think I have found the problem.

Something I have done is conflicting with the piece of code in header.php that you see below. When I delete this code the jumping goes away. I had added a plugin for google fonts, so that may be the conflict (though when I deactivate the plugin the problem persists).

Anyway, my question is…..can I go ahead and delete this code? Since I don’t actually understand all this code, I’m worried it will create another unforeseen problem later.

Thanks so much for all your help,
Pamela

[Pamela Cather]

oops. my code is missing. How to I enter code into a message? Thanks.

[Bill Robbins]

The best way to include code is to use gist.github.com or Pastebin to keep your code and then paste a link to it in the forum.

But the good news is, I now know what you’re referring to when you say it’s jumpy. The theme does use Google fonts. There are a couple of different ways to implement them from Google directly. The way we include them in the theme is in the header with this code:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Lora::latin', 'Oswald::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

The reason we use the “javascript method” is Google will add a class to our body tag that will keep Firefox from displaying a default font before our custom font is loaded. It’s a phenomenon called “FOUST” or flash of unstyled text. Chrome and Safari don’t do that, but Firefox does for some reason that makes no sense to anyone outside of the Mozilla Foundation.

That’s also why this is in the stylesheet:

.wf-loading p,
.wf-loading h1,
.wf-loading h2,
.wf-loading h3,
.wf-loading h4,
.wf-loading h5,
.wf-loading h6,
.wf-loading li {
	display: none;
}

Google uses javascript to add the class “wf-loading” before the fonts are loaded by the browser and then removes it once they’re finished.

If you use the stylesheet link or the @import version of Google fonts, they don’t add this so you get a flash of a default font and then the final font loads. Depending on the Google font, the change can be small or it can be quite large.

Here’s what I’d do if I were you. I would change the code above to use the fonts from Google that I was panning on. Then add them to the font stack in the style.css file. This is where the fonts are set in style.css:

h1, h2, h3, h4, h5, h6 { 
	font-family: 'Oswald', "Lucida Grande", Lucida, Verdana, sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	margin-top: 0; 
}

body { 
	font: normal normal 14px/1.2 'Lora', Verdana, sans-serif;
	color: #000;
	background-color: #fefefe;
}

Yes you won’t see text until the fonts load and that could cause some movement. If you want to minimize that, make your second font in your font stack, close in dimensions to the final one.

Let me know if you have any trouble,
Bill

[Author]

Posts