| If your blog has more than one author, you might like to include author photos with their posts. It's easy to do this automatically by associating each author with an image file using a clever piece of coding. The trick is that each author has a unique ID on the blog; just use photos whose file names use that same ID. Tip
To discover author IDs 1. | Follow the instructions in Chapter 5 to view the Authors & Users administration panel for your blog (Figure 5).
Figure 5. Each user's ID appears in the Authors & Users administration panel. 
| 2. | In the leftmost column, note the ID of each author.
|
Tip
To prepare author photos 1. | Use your image editing software to create an image for an author (Figure 6).
Figure 6. Create an image you want to associate with an author. Here's Miraz. 
| 2. | Save the image as a JPEG, GIF, or PNG format file using the author's ID as the file name with the appropriate filename extension. For example, using the user list shown in Figure 5, Miraz's image, if saved in JPEG format, would be named 2.jpg.
| 3. | Repeat steps 1 and 2 for each author you want to provide an image for.
| 4. | Upload the author images to your server within the main WordPress main directory. For our example, we uploaded them to wp-content/images/authors.
|
Tips  | In step 1, for best results the image file's dimensions and file size should be smallless than 150 pixels square and less than 10Kb. If your blog entries are usually very short, use smaller images. If you like your entries to have a uniform look, be sure to use the same size for all author images. In step 2, all images must be saved in the same format with the same file extension. To prevent missing image errors in some browsers, you should create images for all blog authors. If you don't want to display an image for a specific author, create a 1x1 pixel image with the same background color as your blog's entry area and save it with that author's ID.
|
To add author photos to posts 1. | Open the Default theme's index.php file in a text editor.
| 2. | Add the code shown in Code 1 within The Loop where you want the author's photo to appear. Here's a breakdown of the code so you can understand how it works:
<img src="/books/2/586/1/html/2/<?php get_bloginfo ('url'); ?>wp-content/images/ authors/<?php the_author_ID(); ?>.jpg"
This code uses the get_bloginfo tag to get the URL of the blog's home page, then appends the rest of the path to the author images folder. The the_author_ID tag supplies the user ID for the author, which is appended to the file name extension. (This example assumes you are using JPEG format files.) The result is the start of an img src tag with the complete URL for the post's author image file.
This applies a style to the image which will be defined later in these instructions.
alt="<?php the_author(); ?>. "
This uses the the_author template tag to get the name of the author as alternate text.
title="<?php the_author(); ?>. "
This uses the the_author template tag to get the name of the author as title text.
/>.
This completes the img src tag.
| 3. | Save the edited file.
| 4. | Open the Default theme's style.css file in a text editor.
Code 1. Author Photo Code Inserted in The Loop <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div color: #C1BCBC;">the_ID(); ?>"> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2> <small><?php the_time('F jS, Y') ?> by <?php the_author() ?></small> <div > <img src="/books/2/586/1/html/2/<?php get_ bloginfo('url'); ?>wp-content/images/ authors/<?php the_author_ID(); ?>.jpg" alt="<?php the_author(); ?>. " title="<?php the_author(); ?>. " /><?php the_content('Read the rest of this entry »'); ?> </div> <p >Posted in <?php the_category(', ') ?> | <?php edit_ post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p> </div> <?php endwhile; ?> <div > <div ><?php next_ posts_link('« Previous Entries') ?></div> <div ><?php previous_ posts_link('Next Entries »') ?></div> </div> <?php else : ?> <h2 >Not Found</h2> <p >Sorry, but you are looking for something that isn't here.</p> <?php include (TEMPLATEPATH . "/ searchform.php"); ?> <?php endif; ?>
|
| | | 5. | Insert the following line of code at the end of the file:
img.auth { float: left; margin-right: 1em; }
This code aligns the image on the left with 1 em of spacing between the image and the text that will flow around it.
| 6. | Save the edited file.
| 7. | View posts written by different authors to make sure that each one has the related image (Figure 7).
Figure 7. Each entry should display the photo of its author. 
|
Tips | The image code must be anywhere within The Loop for each author's image to appear near their post. Chapter 6 provides more information about The Loop. The Loop does not always appear in the index.php file for a theme. If you're not using the Default theme, you may find it in a different filefor example, post.php. Be sure to use the correct file name extension for your image file. These instructions assume you have saved the images in JPEG format. If you don't want text to wrap around the image, you can omit the code and skip steps 4 through 6.
|
|
