Since, it took me over an hour to diagnose and fix this issue in one of my own Wordpress installations, I thought I would write up a quick how-to on the solution to this issue to hopefully save others in wasting their own time.

Symptom:

Accessing the Edit screen via Wordpress Admin showed a blank screen in several versions of WordPress 2.8. The rest of the Admin was working fine.

Cause:

I use Subversion to automate the update/upgrade to new versions of WordPress. This has worked great for me for awhile without incident. In the most recent update, the post.php file was updated and the Subversion update command changed the ownership of the file to the user root, which my script was running as.

This permission changed caused a subtle PHP error, and since the recent version of PHP 5 on my server has the default behavior of not displaying errors – a blank white screen was being shown in WordPress.

Fix:

Reset the permissions recursively on your entire WordPress install.

For example, if your user and group were joesmith and users, run the following command at the root of your WordPress install folder:

chown -R joesmith:users *

You should then be back in business!

So the moral of this story is, if you update your Wordpress blog via Subversion – fix your file permissions afterwards.

When I set out to add database driven player info at NuggetsHoops.com, I knew that I wanted to include code that would display some of the many images that I had set aside for each NBA player. I also knew that I would continue to add new pictures. Application code that could easily display old and new images, without additional effort for each added image would work best.

I had already written PHP code that could look at a folder and create a list of images to be displayed. When I ran across the powerful jQuery Cycle Plugin, I had found a great way to display them.

Let’s get coding. This tutorial depends on PHP 5, jQuery 1.2.3 or later, jQuery Cycle Plugin version 2.51 or later.

• I’ll assume you already have Apache and PHP setup and running. Make sure you have a recent version of PHP 5.
• Download jQuery
• Download jQuery Cycle Plugin

Add the following Javascript to your PHP/HTML to enable and call the Cycle Plugin:

<script src="/scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#myslides').cycle({
		fit: 1
	});
});
</script>

Note that there are many options and styles of animation provided by the powerful Cycle plugin.

Add the following PHP to iterate over any folder and dynamically generate img tags using any images found in the folder:

$directory = 'images/players/' . $row['imageName']; 
try {    
	// Styling for images
	echo "<div id=\"myslides\">";
	foreach ( new DirectoryIterator("../" . $directory) as $item ) {			
		if ($item->isFile()) {
			$path = "/" . $directory . "/" . $item;
			echo "<img src=\"" . $path . "\" />";
		}
	}
	echo "</div>";
}
catch(Exception $e) {
	echo 'No images found for this player.<br />';
}

Any img tags within an HTML element of class ‘myslides’ (or whatever you initialized the Cycle plugin with in the Javascript) will have the slideshow behavior added to it. The $row array on line 1 is referencing a database query result, but could be set in a number of ways for your specific needs. The DirectoryIterator reference on line 5 is a builtin class in PHP5.

Here’s the CSS to style the images being displayed in the slideshow:

#myslides {
width: 340px;
float: right;
        padding: 0;
        margin:  0 auto;
margin-top: 20px;
} 
 
#myslides img {
    padding: 10px;
    border:  1px solid rgb(100,100,100);
    background-color: rgb(230,230,230);
    width: 320px;
    top:  0;
    left: 0
}

So, there’s a very quick walk thru a working example to generate a dynamic slideshow from any folder of images. If you’d like a full download of the code, or any further explanation, please leave a comment!

You can see this code in action by just clicking on any player’s name at the NuggetsHoops.com Roster page.

New – download the code for this Tutorial

Demo

One of the best presents a web developer can receive thru-out the year has arrived in December each of the last four years. 

If you have been a web developer during that span, you most likely are already aware, but just in case, I will share with you:

2008 24 Ways

Each year, a new web themed tip is posted each of the 24 days leading up to Christmas, in a fun holiday themed format. These tips are individual gems, all coming from internet industry super-stars and difference makers.

So do yourself a favor this holiday season and grab your laptop, another glass of eggnog, and head over to 24 Ways and bask in the generously shared ideas and knowledge.

Happy Holidays to All from AmpedWebStandards.com!

Evernote is a free service that allows you to “remember everything”.

Think of it as a backup for your brain. With desktop, mobile, and web based interfaces, along with state-of-the-art OCR capabilities, it is literally possible to record nearly anything you see each day and have it automatically cataloged so that is is accessible and searchable later.

Evernote has been around for a few years, but has steadily improved its available interfaces (started out as Windows only) by adding Mac and mobile. (including a free iPhone/iPod Touch application)

I’ve only recently started using it, but the possibilities already have my mind reeling:

• Capture website snapshots instead of just a text link filed away in delicious
• Save an image of each online purchase receipt page, instead of having to print it out
• Take a picture of that great bottle of wine you just drank at a restaurant and you’ll be able to find it again later
• Digitize all of your receipts
• Capture those brilliant ideas you write down on dinner napkins
• Convert your hand-written notes and throw them away

Hopefully I’ve piqued your interest enough to check it out for yourself. Stop taking my word for it, and go read more about Evernote today – it could change the way you backup your brain! As with most free services, if you find yourself really making use of it, there is a pro version for $40/yr that will let you capture more and do more.

If you’re still not convinced, or still don’t get what all the fuss is about, check out the Lifehacker article about it. Lifehacker is a great website dedicated to helping you get more out of life.

Please drop a comment below if you already use Evernote, or if you give it a try and have something to share!

While I work on finishing up an overdue post on the amazing An Event Apart San Francisco conference I attended last week, I thought I would at least write about one of the many new concepts that was discussed.

Progressive Enhancement (PE) is the concept of adding functionality or enhancements to the presentation and behavior of a webpage, using modern technologies such as CSS and Javascript. The PE approach adds the additional features thru externally linked files in order to avoid forcing older/less capable browsers to process data they don’t understand or can’t handle. In other words, the strategy demands that the basic content always be available, then add the fancier layout and features for browsers that can show it.

I’m going to show a quick but usable example of PE using jQuery. In this example, I am going to show how you can dynamically add an “external link” icon – to links inside a specific area of your webpage.

1. download the current release of jQuery (at this writing – 1.2.6) and add it to your webpage in the tag.

2. Next, we will utilize the jQuery approach of executing Javascript code when the Document is loaded and the DOM is ready to be manipulated.

$(document).ready(function() { });

3. Now, if we want to add an image after each external link, we can use the jQuery filter function which will addall elements that match a specified expression.

In the section above, we'll add:

$("a").filter(".selected")

4. The expression will be another function that tests the hostname property of the link to see if it is different that the current page’s hostname.

Try this:

function() { return this.hostname && this.hostname !== location.hostname; })

5. Lastly, we’ll use jQuery to insert the image after the link that matches the test expression – namely an external link!

.after(' <img src="/images/ext.png" alt="External Link">');

6. Let’s put it all together!

Here’s the sum of the Javascript that we’ve written:

$(document).ready(function() {
$('#extlinks a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).after(' <img src="/images/ext.png" alt="External Link">');
});

put that code in a Javascript file and include it after your jQuery code in your page’s :

That’s it! Now go give it a try for yourself.

Thanks to my awesome employer – ProBuild, I’ll be attending the web standards and best practices conference – An Event Apart, in San Francisco next week.

Many of the speakers are pillars in the web standards and development community – Dan Cederholm, Eric Meyer, Tantek Celik, and Jeffrey Zeldman, and I look forward to meeting them and hearing them speak in person.

I will follow up with a post on a few of the things I learn there when I return.

GetSatisfaction.com is a community website that encourages conversation between consumers and companies.

Their registration form is a clever, real-world example of how microformats can make life easier on the web.

If you’ve already registered with flickr.com, technorati.com, twitter.com, or any of several other sites, you can enter your id for that website off to the right of the form and it will pre-populate the GetSatisfaction form with publically available information. Specifically, it uses the hCard microformat to extract the public portions of your profile on those other websites. The hCard microformat allows for individual elements of your contact information to be parsed and used.

If you haven’t already, go try out the form at GetSatisfaction and see it in action.

I’ll build a live example of this approach here in the coming weeks and post the code.

With the final version of Firefox 3 due out next week, you might be wondering… what happened to the promise of built-in Microformats support?

Unfortunately, there was never a consensus on how they should be exposed in the UI, so they didn’t get added. Not a total loss though, as they did add a microformats API that can be used by developers.

Adiditional info, see: Where are the microformats in Firefox 3?

Web developers need to have a tons of languages and syntaxes in their short term memories – HTML, CSS, Javascript, PHP, MySQL, Microformats, Regular Expressions – its a lot to know and remember.

When I studied for big exams in college, my favorite technique was to create an all encompassing one-page sheet with everything I needed to know for that exam. The act of creating that page was the process of reviewing for the exam, and then I had something to refer to right up until exam time, aid in the memorization.

As web developers trying to keep up with all of the technologies in our toolbox – we need all the help when can get. Dave Child has put together a thorough and impressive set of “cheat sheets” that I highly recommend.

Head on over to Dave’s site addedbytes.com/cheat-sheets to download the ones you need. Print and pin them up next to your monitor for the next time you can’t remember the syntax for the various box model attributes in CSS. If you find them useful, don’t forget to get Dave something from his Amazon wish list as a way to say thanks.

A Microformat is a bit of syntactic HTML and CSS for the purpose of making data on your webpage readable by both humans and machines.

There are currently four popular and well-defined microformats:

• hCalendar – a description of time based events
• hCard – business card style information about a person
• hReview – used to represent reviews of movies, books, and more
• XFN – Xhtml Friend Network, representing social relationships thru hyperlinks

Here’s a technical example of an hCalendar microformat:

<abbr class="vevent">
<a href="http://www.nuggetshoops.com" class="url">
http://www.nuggetshoops.com/</a>
<span class="summary">Denver Nuggets Playoff Game</span>:
<abbr class="dtstart" title="2007-04-28T018:00:00-07:00">
April 28 from 6:00pm MDT</abbr>-
<abbr class="dtend" title="2007-04-28T021:00:00-07:00">9:00pm MDT</abbr>,
at the <span class="location">Pepsi Center, Denver, CO</span></abbr>

Which produces this microformat:

http://www.nuggetshoops.com/
Denver Nuggets Playoff Game:
April 28 from 6:00pm MDT-
9:00pm MDT,
at the Pepsi Center, Denver, CO