Put photo of authors in post footer

I have written a post about putting a series of photos in the blog footer in Add series of photos in blog footer. However, that apparently was not what the blog reader wants. She has a team blog and want to be able to have a photo of the author at the footer of the post which the author "authored".

There is not automatic way of doing it. However, one can do it semi-automatically. You will first have to determine the width of the photo you want displayed (the height will be determined automatically by the need to keep the aspect ratio constant). This obviously will have to be less than the width of the main column (posts). To determine the width of the main column (posts), you will have to click on the TEMPLATE tab, then the EDIT HTML sub-tab to open the template editor. Then search for this block of code:

#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

This tells me that the width of the main column (posts) is 400 pixels. The authors' photos will have to be less than 400px in width. You will then have to upload the photos of each authors to the web either using Photobucket or the method outlined in this post: Getting New Blogger to host your photos for the profile, sidebar, header, etc (click BACK button to get back to this page). If you don't want a complicated HTML to display the photo, the best is to refer to Using Irfanview photo editor for your blog on how to first resize the photos to the proper width, then upload them. You will need to get the URLs of the photos.

You will also have to decide whether you want the photo to be aligned to the left or to the right. Suppose you have 4 authors. You will then have to go to SETTINGS > FORMATTING, then in the post template, type in this code:

<img src="photo URL of author 1" align="right" />
<img src="photo URL of author 2" align="right" />
<img src="photo URL of author 3" align="right" />
<img src="photo URL of author 4" align="right" />

If you want to have the photo to be aligned to the left, you will then change it to align="left" or leave this attribute out as it is the default. Then each time a new post is made, this will appear in the post editor window. Type your content above this code, then just remove the code that is not relevant and just leave the code for the post author. I post my mugshot in the bottom of this post as an example.

If you want the photo to be a link to the author's profile, you will first have to get the URL of the profile (if you are not familiar with URL, refer to What is URL and how to get it), then modify the HTML as a hyperlink using the <img> tag. I shall demonstrate by making the photo below as a link to my profile. The HTML I use I put in the scroll box below:

<a href="http://www.blogger.com/profile/06356385819441765673" target="new">
<img src="http://photos1.blogger.com/x/blogger/5611/753/1600/98819/mugshot.jpg" width="50" align="right" /></a>