Sunday, June 24, 2007

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="" target="new">
<img src="" width="50" align="right" /></a>


  1. Dear Peter... Thank you so much for paying attention to my whims :P

  2. This comment has been removed by a blog administrator.

  3. Hi Daniel,

    Thanks for your previous comment plus the link to your profile directory, plus thanks for your plug for my blog. Unfortunately, you put a long unbroken URL which is not clickable and which extend into the right sidebar. This can cause viewing and copy-posting problems, and worst, in Internet Explorer, it may cause the sidebar to slide to the bottom of the page. So I unforunately have to delete your first comment, and then put it back again as if it is really coming from you. The comment will be below this. If you want to find out how to do it, refer to What to do if you accidentally delete comment or how to edit comment. However, this "trick" can be abused and I hope no one will use it for malicious purposes.

    Peter (Blog*Star 2006 and 2007)
    Blogger for Dummies

  4. Anonymous7/15/2007

    I have been reading your blog for some time, but never bothered to leave a comment. I have found it to be helpful and posted a little article about it here:

    Profile Directory: Blogger Tips and Tricks.

  5. Anonymous8/28/2007

    Hi Peter. Your blog is a fantastic help.
    I have a question for you. I have a couple of people writing on the same blog and I would love it if the profile image of the relevant author would appear at the top of the post, like an avatar. Is it possible to do that?

    Thanks a lot


  6. Hi Mark,

    That is easily accomplished. Just do exactly as prescribed in this post, but instead of leaving the script at the bottom of the post, leave them at the top (another way of saying it is, each time you create a post, the script you put in the template will appear. Delete what you don't need. Then type the rest of the post below the script.

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary)


Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics