Recently I found this plugin called jQuery Image LazyLoad, and it’s been around for 3 years now. In history, web designers and developers wanted their images preloaded when a user browses to their page, in order for it to display properly and look seamless – you can find a plethora of old JavaScripts out there that do this. However, this was mostly intended for the design, and not for the content. Lazy Load is intended for content, not design, and it works in the exact opposite way.
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.)
Read the rest of this entry »
TweetSuite is a great plugin, it has a widget for displaying your latest tweets, displays tweetbacks, and lets you add in links to tweet or re-tweet a post on your blog. There’s more then a few things that need to be fixed with this plugin (ref: TweetSuite Errors and Troubleshooting), right now I’m just going to focus on some markup validation errors I came across.
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…
Read the rest of this entry »
I’m surprised there is not one in the default template for Magento. Nevertheless, it’s pretty common to see a login box on a sidebar, and I need one. This is actually pretty simple to do, we’re going to be modifying templates, layouts, and unfortunatly we’re going to have to alter the core (for something really silly.)
Read the rest of this entry »
I keep almost all my bookmarks at Delicious (formerly del.icio.us.) So I noticed there is a WordPress plugin to display your Delicious bookmarks. One of the things I do after I add a new plugin to WordPress, is to validate a page using The W3C Markup Validate Service. I noticed that my markup was now invalid, but it wasn’t really because of the plugin itself. The errors were caused because some of my Delicious bookmarks have predefined ampersand characters, and the plugin did not replace these with HTML entities. I first tried replacing my bookmark titles in Delicious, but that just screwed up my titles (I always go for the easy way first.) So it’s time to start editing sources again…
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()
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 
I recently installed a plugin called WP Wall (you should now notice it in the sidebar.) I’m pretty happy with how it worked out, but I noticed there was a problem validating my markup after installing this plugin.
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.
I noticed a problem with the caption boxes that WordPress creates, and the image box model around the images in posts.
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.
