A plug-in search turned up nothing. No surprise—Wordpress does not support user profile pictures natively. There’s no field in the database for an user’s image file name. Then I remembered reading an article in Smashing Magazine about filters a couple of months ago. They had an example where a subscribe request was appended to the end of each post’s content. Maybe that technique would work to prepend a photo.

In WordPress, a filter is like a plug-in except for two important distinctions: It’s not packaged for distribution and it’s associated with the theme. That is, you can’t manage the filter from the dashboard’s plug-in manager and, if you change themes, it disappears. That was all right for my purposes. The clients were quite happy with the theme we’d chosen – Mistylook, by Sadish Bala – and I could provide instructions on how to remove the filter from the theme’s functions file should they ever want to “deactivate” the feature.

I got the images from the client for the four lawyer/authors—a wallet-sized image and a thumbnail for each. The larger image would appear on the author’s profile page and the thumbnails would be placed at the beginning of their posts, floated left of the text. For the larger image, I modified the author’s template (author.php) as I had with the previous website. For the thumbnails, I would use the filter approach since post content is accessed in several templates and I wanted a unified solution. For the sake of brevity, I’ll skip the part about the author template mods in this article. If you’re interested in that piece, leave a comment and I’ll write another article.

I created a new directory, /wp-content/authors for the larger images and a sub-directory, /wp-content/authors/thumbs for the smaller versions. In each, I renamed the images files to match the corresponding login usernames. If, for example, there was a user with the login username of ‘bobama’, then the two images files would be: /wp-content/authors/bobama.jpg and  /wp-content/authors/thumbs/bobama.jpg . I did this with an ftp program but you can use the dashboard’s Media manager, in which case, the image files will be somewhere in your /wp-content/uploads directory with your other media files. All of the other work described in this article can be done through the dashboard’s theme editor by an admin user but I highly recommend using a good code editor with color syntax highlighting. BBEdit is my favorite.

A WordPress filter goes into the theme’s functions file (functions.php) and consists of two parts: A function definition and a call to add that function to a named WordPress “hook”. I called my function: add_author_photo() and  added it to the ‘the_content’ hook. You can think of this hook as the point in the page building process when WordPress gets the page or post content from the database and starts to get it in shape for the web page it’s building. WordPress passes the content to the function as a string and expects it back in return. Roughly, the outline of the process looks like this:

<?php
     function add_author_photo($content) {
         ...
         return $content;
     }

     add_filter('the_content', 'add_author_photo');
?>

Note how the entire filter is enclosed in a PHP container. This is important!  Now, all we need to do is fill in the “dots”.

First, we need to make sure that our function does its work in the right place since it will be called anytime WordPress fetches the content from the database. We want the thumbnail photo to appear in posts on the home page and on single post pages, but not on static pages (which are, in a sense, “authorless”) nor on the archive and search result pages and especially not in RSS feeds. The following if statement does what we want:

if (is_home() || is_single()) {
    ...
}

Next, the code needs to check that the image file we want for the current post author actually exists. The client may add more authors and contributors before their photos are available and we don’t want an ugly, empty missing-image square to appear where a nice photo is expected. This is a bit tricky. There’s a PHP function, file_exists(), for checking whether a file exists or not but it takes, as its argument, the full Unix path to the file, as opposed to a URL fragment. WordPress provides a function for doing this: get_theme_root() which returns a string that, depending on your hosting company’s site configuration, might look like this:

/var/web/clients/abc.com/htdocs/wp-content/themes

Since my ‘authors’ directory is at the same level in /wp-content as the themes directory, all I have to do is replace the ‘themes’ part in the string above with ‘authors/thumbs/’ and append the image’s file name. The following two lines of code will assign the username to a variable and do the replacement using  PHP’s  str_replace() function.

$author_uname = get_the_author_meta('user_login');
$author_photo = str_replace(
                    'themes',
                    'authors/thumbs/' . $author_uname . '.jpg',
                    get_theme_root() );

We can check whether the file exists with another if statement:

if (file_exists($author_photo)) {
    ...
}

Now we are ready to add the image tag to the beginning of the post content. I’ll add a CSS class, ‘authorImage’, to the image tag which I’ll use to make the image float left and set appropriate margins and padding (see below.) I’ll also enclose the image in an anchor tag that links the image to the author’s profile page. I’ve laid this out here in several lines for readability. The dot at the end of each line is the PHP concatenation operator.

$image_src = '/wp-content/authors/thumbs/' .
             $author_uname . '.jpg';

$content =  '<a href="/author/' .
            $author_uname .
            '"><img class="authorImage" src="' .
            $image_src .
            '" alt="' .
            get_the_author() .
            '" /></a>' .
            $content;

Here’s a screenshot of the final code I pasted into the theme’s functions file. Because I’m a nice guy, I added  /* comments */ to explain what was going on. Click on the image to open a text division with the actual code you can copy.

[RAW]

<?php
/*  Add authors' photos to posts on the home and single-post pages.
     Copyright 2009 Larry Aronson.

     For a post author identified by username, if the image file:
	/wp-content/authors/thumbs/username.jpg
     exists, it will be prepended to the content, floating left
     of the text and linked to the author's profile page		*/

function add_author_photo($content) {
  if(is_home() || is_single()) {
    $author_uname = get_the_author_meta('user_login');
    $author_photo = str_replace('themes',
         'authors/thumbs/' . $author_uname . '.jpg',
         get_theme_root());
    if (file_exists($author_photo)) {
	 $image_src = '/wp-content/authors/thumbs/' . $author_uname . '.jpg';
	 $content = '<a href="/author/' . $author_uname .
             '"><img class="authorImage" src="' .
	     $image_src . '" alt="' . get_the_author() . '" /></a>' .
             $content;
     }
  }
  return $content;
}

/* remove the following line to deactivate the add photo feature */
add_filter('the_content', 'add_author_photo');
?>

[/RAW]

The final version took a bit of debugging to fix some stupid typing errors but it worked as I wanted it to. A look at the source code for the home page shows the generated image tag and link:

<a href="/author/larryaronson"><img class="authorImage"
   src="/wp-content/authors/thumbs/larryaronson.jpg"
   alt="Larry Aronson" /></a>

All that remained was adding some simple CSS to the style sheet to float the image to the left of the post text. The rules shown below does that and sets appropriate margins.  The images already incorporated a border so I removed the border set elsewhere in the CSS and removed the drop shadow background that Mistylook adds to images as a matter of taste.

img.authorImage {
   float: left;
   margin: 0 1em 0 0;
   border: 0;
   padding: 0;
   background-image: none;
 }

That’s it. I hope you found this article useful. Suggestions for improvements are welcome.

Well…, yes, that is right. Easy because services exists that create usable websites using templates and wizards friendly enough for the Internet illiterate.  And free – or at least it’s free in the sense of approaching zero initial software cost. But, in order for your website to grow, you’re going to need that technical knowledge, HTML, to keep your content publishing costs under control.

How amazing it is that we can create and globally distribute content, on zillions of Web pages, to inform and entertain ourselves without moving physical stuff anywhere! The Web page is irrevocably becoming the World’s most common form of communication. It’s the lowest cost replacement for articles, pamphlets, brochures, manuals, directories, flyers, commercials, letters, announcements—almost any kind of document you can think of. The Web does this instantly, adding interactivity, links and searching as a bonus!!

But here’s the problem: By doing so much for so many, the Web has become irreducibly complex. It’s also rapidly evolving. The learning curve never gets any less steep and climbing it is not easy. There just is so much to know about and we all know that even just knowing about what to know ain’t easy.

Content Is Kingdom

For many small website owners, creating and maintaining their own content is paramount. So Web editing tools are the keys to the content kingdom. There are two choices: using a wysiwyg editor on a local PC, downloading and uploading files; or using a Web-based editor to edit content directly on a webserver. The former approch allows you to create Web pages rich in structure and interactivity. The latter is easier by far and can be done anywhere you browse the Web. Unfortunately Web-based wysiwyg editors are rather puny and often frustrating to use when the content has any structure or is already marked up with HTML from another source like Microsoft Word. Knowing HTML helps you avoid many of problems and resolve others before they frustrate, no matter which editing method is used.

When Tim Berners-Lee invented the Web about twenty years ago, he thought that most HTML would be written by software programs. How did that work out? You might ask. Not very well, actually. One of the Web’s great strengths – a dictate that browsers must gracefully tolerate crappy code – is also a weakness. The early browsers; Mosaic, Netscape, AOL and Internet Explorer, went to war competing for market share by introducing new elements into the HTML language. The people writing wysiwyg editors couldn’t keep up with the rapid pace of HTML development, delivering mediocre products that generated bad code, while competition among Web designers to create unique and compelling pages encouraged  advanced HTML techniques beyond the capabilities of the wysiwyg editors.

The Rise Of The Robots

It’s 2009 and although they look much like their counterparts of a dozen years ago, Web pages are coded quite differently in this century. For one thing, good cross-browser support for Cascading Style Sheets (CSS) make it possible to code Web pages with far less HTML markup. Also, a large proportion of Web pages are dynamically generated using HTML templates. These templates are bits of code that may be reused millions of times a day so there’s high value in using the cleanest, leanest HTML markup possible.

By far the biggest change is the rise of search technologies and the role that today’s search platforms: Google, Yahoo, Bing and others, play in our experience of the Web. A modern Website seeks to increase its find-ability and raise its search engine ranking. These requirements has spawned a new business practice called Search Engine Optimization (SEO). Companies providing SEO services specialize in writing HTML that’s very easy for the search engines’ automated scripts (the robots) to understand.

This is Web 2.0, where websites continually exchange information with other websites and where what other websites “know” and “think” about your website can be as important as your site’s content. Knowing the basics of HTML, how it works to add semantic information to page elements and how that information is gathered and used by robots will give you an edge in meeting your online goals.

Suzearts is the online showcase for my best friend, Susan Thornton, who creates wonderful images from the land and sky scapes of New Mexico and Fire Island. We put this simple site together in an afternoon several years ago for the New York Licensing show. Today, you can do a lot more to showcase art and music by using services such as flickr and photobucket, to organize and tag your art, and social media services like Facebook and Twitter to promote your work across a web of networks, groups and friends.

Mick Kolodgy Fine Art

is an online gallery of his paintings. I developed the horizontal gallery design with rollover menus at both ends and tied it all together with a compact image caching and navigation scheme written in Javascript. This was fun to build but I can’t advise artists that having your own showcase site is the best way to leverage the Web anymore. There are many web services companies that want and need your content; provide a wide range of options for organizing, displaying and selling it; can boost your search engine juices and connect you to networks, groups and forums of people interested in what you do.