How to Display Author Photos in Blogger Templates

This guide explains different methods to display author profile photos in Blogger templates with proper sizing, fallback handling, and profile links.

Basic Author Photo Display

The standard way to show author profile photos in Blogger:

<!-- Author photo -->
<b:with value='128' var='size'>
<b:with value='"1:1"' var='ratio'>
  <b:if cond='data:post.author and data:post.author.authorPhoto'>
    <img>
      <!-- class --><b:class name='author-photo'/>
      <!-- src --><b:attr expr:value='data:post.author.authorPhoto.image.isResizable ? resizeImage(data:post.author.authorPhoto.image, data:size, data:ratio) : data:post.author.authorPhoto.image' name='src'/>
      <!-- alt --><b:attr expr:value='data:post.author.name' name='alt'/>
      <b:attr name='b:whitespace' value='remove'/>
    </img>
  </b:if>
</b:with>
</b:with>

Image Size and Aspect Ratio

The code uses these parameters:

• 128 is the image size in pixels
• "1:1" is the aspect ratio (square)
• Calculation:
  • width = size (128px)
  • height = (size * ratio height) / ratio width
    • For 1:1 ratio: (128 * 1) / 1 = 128px

With Fallback for Missing Photos

To handle cases where author photos might be missing:

Method 1: Using Placeholder Image

<!-- Author photo with fallback -->
<b:with value='128' var='size'>
<b:with value='"1:1"' var='ratio'>
  <b:if cond='data:post.author and data:post.author.authorPhoto'>
    <img>
      <b:class name='author-photo'/>
      <b:attr expr:value='data:post.author.authorPhoto.image.isResizable ? resizeImage(data:post.author.authorPhoto.image, data:size, data:ratio) : data:post.author.authorPhoto.image' name='src'/>
      <b:attr expr:value='data:post.author.name' name='alt'/>
      <b:attr name='b:whitespace' value='remove'/>
    </img>
  <b:else/>
    <img>
      <b:class name='author-photo'/>
      <b:attr name='src' value='https://via.placeholder.com/128x128/777/eee?text=No+Image'/>
      <b:attr expr:value='data:messages.image' name='alt'/>
      <b:attr name='b:whitespace' value='remove'/>
    </img>
  </b:if>
</b:with>
</b:with>

Linking Author Photos to Profiles

To make the author photo clickable when a profile URL exists:

Basic Profile Link

<!-- Author photo with profile link -->
<b:with value='128' var='size'>
<b:with value='"1:1"' var='ratio'>
  <b:if cond='data:post.author and data:post.author.authorPhoto'>
    <b:tag cond='data:post.author.profileUrl' expr:href='data:post.author.profileUrl' name='a'>
      <img>
        <b:class name='author-photo'/>
        <b:attr expr:value='data:post.author.authorPhoto.image.isResizable ? resizeImage(data:post.author.authorPhoto.image, data:size, data:ratio) : data:post.author.authorPhoto.image' name='src'/>
        <b:attr expr:value='data:post.author.name' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    </b:tag>
  </b:if>
</b:with>
</b:with>

Complete Solution with Fallback

<!-- Complete author photo with profile link and fallback -->
<b:with value='128' var='size'>
<b:with value='"1:1"' var='ratio'>
  <b:if cond='data:post.author and data:post.author.authorPhoto'>
    <b:tag cond='data:post.author.profileUrl' expr:href='data:post.author.profileUrl' name='a'>
      <img>
        <b:class name='author-photo'/>
        <b:attr expr:value='data:post.author.authorPhoto.image.isResizable ? resizeImage(data:post.author.authorPhoto.image, data:size, data:ratio) : data:post.author.authorPhoto.image' name='src'/>
        <b:attr expr:value='data:post.author.name' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    </b:tag>
  <b:else/>
    <b:tag cond='data:post.author.profileUrl' expr:href='data:post.author.profileUrl' name='a'>
      <img>
        <b:class name='author-photo'/>
        <b:attr name='src' value='https://via.placeholder.com/128x128/777/eee?text=No+Image'/>
        <b:attr expr:value='data:messages.image' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    </b:tag>
  </b:if>
</b:with>
</b:with>

Best Practices

• Always include proper alt text for accessibility
• Use appropriate image sizes to balance quality and performance
• Consider using CSS to style the author photo consistently
• Test with different author scenarios (with/without photo, with/without profile URL)
• For team blogs, you might want to combine this with the author name display