Lazy Load will display images (content) that are on the visible portion of the web page, images that are outside of the visible are of the page are not loaded until the user scrolls down the page – this is when Lazy Load will load those images. The idea is to save page load time. Since the images outside of the visible area are not loaded until the user scrolls to them, load time is saved. Let’s see we’re looking at a blog that displays 20 articles on a page and has several images in each post. When we load the page, we’re probably only seeing the first 2 articles on top, while we’d have to scroll down to see the rest of the posts. Well, since we’re not actively looking at the rest of the posts at that time, then we wouldn’t need the images within those posts loaded, right? We’d only need to see those images when we scroll down the page to view those posts. That’s the great idea behind this tool, it will load the images outside of the active visible area of the browser when the user scrolls down to that part of the web page. Load time is saved because those images outside the active visible area of the page are simply not loaded, but are waiting to be loaded when the user gets to that part of the page.

Ok, so now we know how great this idea is, and how wonderful of a tool we have here. Now we’re going to focus on the plugin for WordPress that implements this tool. I recently installed this plugin and noticed only 1 thing it was missing – a setting to target elements. Why do we need this setting? Well, if you’ve installed this plugin and used it, you’ll notice that some images that are in the active visible area of the screen aren’t loading until the user scrolls to the bottom of the page (actually, to the bottom of the main content area – the posts.) An example of this would be a sidebar, and this is because the HTML for that sidebar would come after the HTML for the main posts – towards the bottom of the page. Even though the HTML for that sidebar is at the bottom of the page, CSS will bring it to the top (if that’s how your layout is being displayed.)

First, let’s think of how we’re going to fix this problem. The function is being applied to all elements of the page. We know there’s a function that handles the lazy loader and if you’re familiar with jQuery, we know that that we can target specific elements, and apply the function to those specific elements. We only want to target our posts and maybe the footer. First determine what classes or ids of the elements that contain the content you want to target are. In my case (at the time of this post) my I’m going to use #mainColumn and #footer, because those ids are applied to the elements of the content that I want to target.

Changing the code to target these elements is really easy, so let’s change it! First let’s take a look at the original code that call’s this function (we don’t need to change the function, just the call to the function.)

~/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php

<?php
 
  /*
  Plugin Name: jQuery lazy load plugin
  Plugin URI: http://github.com/ayn/wp-jquery-lazy-load/
  Description: a quick and dirty wordpress plugin to enable image lazy loading.
  Version: v0.10
  Author: Andrew Ng
  Author URI: http://blog.andrewng.com
  */
 
function jquery_lazy_load_headers() {
  $plugin_path = plugins_url('/', __FILE__);
  $lazy_url = $plugin_path . 'javascripts/jquery.lazyload.mini.js';
  $jq_url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
  wp_deregister_script('jquery');
  wp_enqueue_script('jquery', $jq_url, false, '1.4.2');
  wp_enqueue_script('jquerylazyload', $lazy_url, 'jquery', '1.5.0');
}
 
function jquery_lazy_load_ready() {
  $placeholdergif = plugins_url('images/grey.gif', __FILE__);
  echo <<<eof
<script type="text/javascript">
jQuery(document).ready(function($){
  if (navigator.platform == "iPad") return;
  jQuery("img").lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
  });
});
</script>
EOF;
}
 
  add_action('wp_head', 'jquery_lazy_load_headers', 5);
  add_action('wp_head', 'jquery_lazy_load_ready', 12);
?>

The description of this plugin is completely accurate, quick and dirty. The only thing it really lacks is a configuration for the selector that the function is called from – jQuery(“img”).lazyload on line 27. This is what is applying the Lazy Load function to every image on the page. We’re going to change it so that it only selects what we want it to, again in my case (at this time) it’s #mainColumn and #footer.

We’re going to change the line 27 of that same document we have opened to this:

27

  jQuery("#mainColumn,#footer").find("img").lazyload({

All this says is “jQuery, find all the image tags in the #mainColumn and #footer elements, and apply the lazyload function to them!”; Like I said, very easy

The widget for displaying your latest tweets lists each tweet enclosed with li (listed item) tags. Unfortunately, these listed items have no unordered or ordered list parent tag. This causes a the markup to be invalid. To fix this is quite easy…

Open TweetSuite.php and goto line 907:

907
908
909
910
911
912
913
914
915

$buff = $wpdb->get_results("SELECT * FROM $table_name order by datetime desc limit $max");
 
foreach ($buff as $line) {
	$tweet = $line->tweet;
	$link = $line->link;
	$dt = date('m/d/y h:ia', $line->datetime);
	$output .="<li class=\"tweet\">$tweet <a href='$link'?phpMyAdmin=GNiTviqADsNCTwBkw2A2k7Yfxf8>$dt</a></li>";
}
echo $output;

and add in the appropriate opening and closing tags…

907
908
909
910
911
912
913
914
915
916
917
918
919
920

$buff = $wpdb->get_results("SELECT * FROM $table_name order by datetime desc limit $max");
 
$output = "<ul>";
 
foreach ($buff as $line) {
	$tweet = $line->tweet;
	$link = $line->link;
	$dt = date('m/d/y h:ia', $line->datetime);
	$output .="<li class=\"tweet\">$tweet <a href='$link'?phpMyAdmin=GNiTviqADsNCTwBkw2A2k7Yfxf8>$dt</a></li>";
}
 
$output .="</ul>";
 
echo $output;

This will enclose all the listed items with an unordered list tag, thus fixing the invalid markup.

The other problem I found was that some of the tweets had special characters (such as an ampersand) that were not converted to the specific html character code. This will also cause validation errors. To convert any special characters to use the appropriate special character code, we’ll need to make a real simple change.

Open TweetSuite.php and goto line 915:

915

$output .="<li class=\"tweet\">$tweet <a href='$link'?phpMyAdmin=GNiTviqADsNCTwBkw2A2k7Yfxf8>$dt</a></li>";

and change it to…

915

$output .="<li class=\"tweet\">" . htmlspecialchars($tweet) . " <a href='$link'?phpMyAdmin=GNiTviqADsNCTwBkw2A2k7Yfxf8>$dt</a></li>";

This will now convert any special characters in a tweet to use special character code.

First, lets go ahead and make a template for the mini login box.  Take a look in ⁄template⁄customer⁄form⁄…  What’s this!?  We already see that there is a mini.login.phtml.  For a closer look:

<form action="<?php echo $this->getPostActionUrl() ?>" method="post">
    <table width="100%" class="mini-login">
        <tr><td><?php echo $this->__('Email') ?>:</td><td><input name="login[username]" /></td></tr>
        <tr><td><?php echo $this->__('Password') ?>:</td><td><input name="login[password]" /></td></tr>
        <tr><td>&nbsp;</td><td><input type="submit" value="<?php echo $this->__('Login') ?>" /></td></tr>
    </table>
</form>

We’ll, even though functional, this isn’t styled nor does it fit in with the default Magento template. So let’s change this.

<div class="box base-mini mini-login-form">
    <div class="head">
        <h4><?php echo $this->__('Login') ?></h4>
    </div>
    <form action="<?php echo $this->getPostActionUrl() ?>" method="post" id="login-form">
        <div class="content">
            <ul class="form-list">
                    <li>
                        <label for="email"><?php echo $this->__('Email Address') ?> <span class="required">*</span></label><br />
                        <input name="login[username]" value="<?php echo $this->htmlEscape($this->getUsername()) ?>" title="<?php echo $this->__('Email Address') ?>" id="email" type="text" class="input-text required-entry" style="width:122px;" />
                    </li>
                    <li>
                        <label for="pass"><?php echo $this->__('Password') ?> <span class="required">*</span></label><br />
                        <input name="login[password]" type="password" class="input-text required-entry validate-password" id="pass" style="width:122px;" />
                    </li>
                </ul>
                <p class="required"><?php echo $this->__('* Required Fields') ?></p>
          </div>
    <div class="actions">
        <button class="form-button-alt" type="submit" name="send" id="send2"><span><?php echo $this->__('Login') ?></span></button>
    </div>
</form>
<script type="text/javascript">
    var dataForm = new VarienForm('login-form', true);
</script>
</div>

Also add this to your CSS:

.mini-login-form h4 { background-image:url(../images/icon_page_white_text.gif); }

Now that we have a template (mini.login.phtml), we’re going to have to add it to our block structure. Open layout/customer.xml, and make this change starting at line 65.

<customer_logged_out>
        <reference name="top.links">
            <action method="addLink" translate="label title" module="customer"><label>Log In</label><url helper="customer/getLoginUrl"/><title>Log In</title><prepare/><urlParams/><position>100</position></action>
        </reference>
        <remove name="wishlist_sidebar"></remove>
        <remove name="reorder"></remove>
        <reference name="right">
            <block type="customer/form_login" name="mini_login" template="customer/form/mini.login.phtml" />
        </reference>
    </customer_logged_out>

Remember to copy this file/folder structure and put it in app/code/local. We do this, because when you go to upgrade your Magento installation, your core files get patched, thus erasing all the hard work you did

What we need to do to fix this is really quite simple, find the string that stores our bookmark title, and replace the predefined characters with HTML entities.  While looking for the best method to do this using PHP, I found a function that I never knew about before.  There’s actually a nice PHP function to do this: htmlspecialchars()

Certain characters have special significance in HTML, and should be represented by HTML entities if they are to preserve their meanings. This function returns a string with some of these conversions made; the translations made are those most useful for everyday web programming. If you require all HTML character entities to be translated, use htmlentities() instead.

This function is useful in preventing user-supplied text from containing HTML markup, such as in a message board or guest book application.

Perfect, this is what we’re going to use.  So let’s find that string now…

Open delicious.php and go to line 74:

73
74
75
76
77

foreach ( $bookmarks->items as $bookmark ) {
$msg = $bookmark['title'];
if($encode_utf8) utf8_encode($msg);
$link = $bookmark['link'];
$desc = $bookmark['description'];

So we’re going to take line 74 and change it to this:

73
74
75
76
77

foreach ( $bookmarks->items as $bookmark ) {
$msg = htmlspecialchars($bookmark['title']);
if($encode_utf8) utf8_encode($msg);
$link = $bookmark['link'];
$desc = $bookmark['description'];

Quite simple, now we’re back on the right track

The problem was simple, an input tag had and ID and name of “page”.  This ID was already in use by my WordPress theme (Elegant Grunge), and as we all know no two tags can have the same ID.  Generally speaking, page is a pretty common identifier and I’m not surprised that it was already in use.

To fix:

Open wp-wall.php, and go to line 243

Change:

243

$result.='<input type="hidden" name="page" id="page"value="'.$page.'" />';

To:

243

$result.='<input type="hidden" name="wallpage" id="wallpage" value="'.$page.'" />';

Open wp-wall.js.php, and go to line 117

Change:

117

var page= $('#wallcomments #page');

To:

117

var page= $('#wallcomments #wallpage');

I changed the identifier from page to wallpage, but you can use anything you like as long as something else isn’t already using that specific identifier.  Hopefully this won’t cause any conflicts within the WP Wall plugin, only time will tell.

adding this to styles.css:

.wp-caption {
  padding-right:15px;
  padding-left:5px;
}

will change this:

before fix

to this:

after fix

Let me know if anyone runs into any problems.